在采用React-Native开发APP时,必然要用到原生的API,rn和原生交互无非就两种情况:
- Android主动向JS端传递事件、数据
- JS端被动向Android询问获取事件、数据
React Native 与原生交互一般有三种方式,分别是Callback,Promise,RCTDeviceEventEmitter
。
交互步骤:
1.创建一个原生模块来继承ReactContextBaseJavaModule并实现getName()函数
public class TestModules extends ReactContextBaseJavaModule {
private ReactApplicationContext context;
public TestModules(ReactApplicationContext reactContext) {
super(reactContext);
context=reactContext;
}
@Override
public String getName() {
return "test";
}
}
2.将它注册到ReactNative中
public class ReactPackageRegister implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules=new ArrayList<>();
modules.add(new TestModules(reactContext));//注册模块
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
3.将模块注册到Application中去
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 ReactPackageRegister()//注册package
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
4.React native 调用原生方法
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
NativeModules,
} from 'react-native';
const Natives=NativeModules.test;
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={()=>{
this.props.navigation.navigate('Detail');
}} >
<Text style={{color: 'white'}}>首页</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={()=>this.toast()} >
<Text style={{color: 'white'}}>toast测试</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={
()=>this.sums()} >
<Text style={{color: 'white'}}>回调js</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={
()=>this.cell()
} >
<Text style={{color: 'white'}}>拨打电话</Text>
</TouchableOpacity>
</View>
);
}
toast() {
Natives.showToast('调用成功');
}
sums(){
Natives.haveCallBack(10,10,(sum)=>{
// Natives.showToast(sum);
{Natives.showToast(sum);}
});
}
cell(){
//tel,访问native中的getConstants()函数返回的常量值
Natives.callPhone(Natives.tel);//拨打电话
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
width: 120,
height: 45,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#4398ff',
}
});
网友评论