一、窗口一个react-native项目
react-native init RnComponent
二、用Android studio 打开项目android/build.gradle
期间提示你要升级什么的请忽略，如果你忍不住好奇点了升级，那接下来便是一堆bug等着你处理，骚年们，好运！
三、创建一个继承与ReactContextBaseJavaModule的Class
至于在哪里，找到目录最深的那个java文件便是了，
image.png
写上继承后会报错，懂点java的都知道，这时候把光标定位到报错的地方，按下alt+enter键，会给错误提示，照着一步步来就行了
image.png
按照上面的截图处理，基本上都可以解决报错问题（声明下，大牛请绕道，此篇文章只针对android菜鸟级的！）
RnModules代码如下：
package com.rncomponent;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
/**
* Created by 97974 on 2017/9/11.
*/
public class RnModules extends ReactContextBaseJavaModule {
private ReactApplicationContext mContext;
public RnModules(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}
@Override
public String getName() {
return "RnNativeModule"; //这里的name是必须的，最终在js中调用的时候以这个为准！
}
@ReactMethod //这个也是必须的，不然会报错
public void Toasts(String msg) {
Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
}
}
四、在Android原生这边创建一个类实现接口ReactPackage包管理器
并把第二步创建的类加到原生模块(NativeModule)列表里，此类继承接口 ReactPackage，最终代码如下：
package com.rncomponent;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
/**
* Created by 97974 on 2017/9/11.
*/
public class RnPackages implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new RnModules(reactContext));
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
五、把RnPackages添加到ReactPackage列表里面。
MainApplication最终代码如下：
package com.rncomponent;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RnPackages() //add
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
到这里原生部分的代码算是完成了，接下来便是去react-native里面调用这个module。
六、修改index.android.js如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
NativeModules, //add
Text,
View
} from 'react-native';
export default class RnComponent extends Component {
call_button(){
NativeModules.RnNativeModule.Toasts('调用原生方法的Demo');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}
onPress={this.call_button.bind(this)} //add
>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('RnComponent', () => RnComponent);
image.png
