1.创建原生模块,定义与实现本地方法,供JS调用
(1)自定义一个类,继承ReactContextBaseJavaModule;
(2)重写getName方法,返回模块名称;
(3)在类中定义方法,方法要用@ReactMethod注解,定义普通参数和Callback参数(Callback用于回调JS端).
例:
public class RNBizModule extends ReactContextBaseJavaModule { //自定义类,继承ReactContextBaseJavaModule
public RNBizModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "RNBizModule"; //返回模块名称,供JS调用
}
@ReactMethod
public void login(String json, Callback callback) { //定义方法,用@ReactMethod注解,表明供JS调用
...
callback.invoke("json内容"); //异步调用JS端回调方法,返回json内容给JS端
}
}
2.注册自定义模块,以便JS端可以调用
(1)自定义类,继承ReactPackage;
(2)重写createNativeModules方法,将自定义原生模块加入列表并返回.
(3)自定义Application类,实现ReactApplication类的getReactNativeHost方法,加入自定义ReactPackage
例:
自定义ReactPackage类:
public class RNPackage implements ReactPackage {
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new RNBizModule(reactContext)); //此处加入自定义模块
return modules;
}
}
自定义Application类:
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(new MainReactPackage(), new RNPackage()); //此处加入自定义ReactPackage
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost; //返回ReactNativeHost实现
}
}
AndroidManifest.xml类:
<application
android:name=".MainApplication" //此处配置为自定义application类
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
...
</application>
3.JS端调用本地方法
(1)import { NativeModules } from 'react-native';
(2)NativeModules.模块名称.方法名称('参数内容', (返回参数) => {...});
例:
import { NativeModules } from 'react-native';
export default class Home extends Component {
login(){
NativeModules.RNBizModule.login('json', //调用Android本地RNBizModule模块中的login方法,传入json格式的字符串
(json) => { //json为Android回调时传入的参数
alert(json); //处理json格式的字符串
}
);
}
render(){
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.login}> //点击时调用Android端本地方法
<Text>调用native方法</Text>
</TouchableOpacity>
</View>
)
}
}
//样式
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});