前言
我们在使用RN的时候,会发现RN提供了很多Module供JS调用,这些Module能够满足我们一些基础的应用场景,但是在实际的项目中,必定会有一些交互逻辑需要我们自己去实现,这时候就需要我们自定义一些Module供JS调用,那么怎么才能让JS调用到我们自定义的Module呢? 下面我们就一步步的去实现JS对自定义Module的调用。
实现方法
1、在原生端创建ReactUiModule类:
public class ReactUiModule extends ReactContextBaseJavaModule {
public ReactUiModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "ReactUiModule";
}
//toast
@ReactMethod
public void showToast(String msg) {
Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_LONG);
}
}
复制代码
2、创建ReactPackage类并在该类中添加我们自定义的Module:
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> nativeModules = new ArrayList<>();
/*在这里加入开发的接口*/
nativeModules.add(new ReactUiModule(reactContext));
return nativeModules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
复制代码
3、修改ReactNativeHost类的getPackages方法,将MyReactPackage添加到package列表。
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);
}
}
复制代码
原生端准备完毕,接下来看一下JS怎么使用我们定义的这个module
import React, {Component} from 'react';
import {Platform, StyleSheet, NativeModules, Text, View} from 'react-native';
RCTDemoToast = NativeModules.ReactUiModule; // 获取到Native Module
type Props = {};
export default class App extends Component<Props> {
render() {
RCTDemoToast.showToast('ReactNative');
console.log('ReactNative','js first page render');
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
</View>
);
}
}
复制代码
调用效果图
到此我们就实现了JS调用我们自定义Module的所有工作,例子比较简单大家可以自己根据上述步骤一步步操作,相信在创建的过程中会有自己的体会和收获。其间有什么建议或疑问欢迎和我们互动交流
原文链接: tech.meicai.cn/detail/72, 也可微信搜索小程序「美菜产品技术团队」,干货满满且每周更新,想学习技术的你不要错过哦。