原生暴露一个接口给RN使用。
1、用AS打开一个已存在的项目
2、在Android原生创建一个类继承ReactContextBaseJavaModule,这个类里面放需要被rn调用的方法,封装成一个原生模块。
public class MyNativeModule extends ReactContextBaseJavaModule {
private ReactApplicationContext mContext;
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}
@Override
public String getName() {
//rn代码需要这个名字来调用该类的方法
return "MyNativeModule";
}
//函数不能有返回值,因为被调用的原生代码是异步的;原生代码执行结束之后只能通过回调函数或者发送消息给rn侧
@ReactMethod
public void rnCallNative(String msg) {
Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
}
}
3、在Android原生这边创建一个类实现接口ReactPackage包管理器,并把第二步创建的类加到原生模块(NativeModule)列表里
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> list = new ArrayList<>();
list.add(new MyNativeModule(reactContext));
return list;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
4、将第三步创建的包管理器添加到ReactPackage列表里(getPackage方法里)
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 MyReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
5、在RN中去调用原生模块 添加NativeModules从react-native
import {Platform, StyleSheet, Text, View, NativeModules} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}
onPress={this.call_button.bind(this)}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
call_button(){
NativeModules.MyNativeModule.rnCallNative('rn调用native成功!')
}
}