前言
我们在使用 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 的所有工作, 例子比较简单大家可以自己根据上述步骤一步步操作, 相信在创建的过程中会有自己的体会和收获. 其间有什么建议或疑问欢迎和我们互动交流
来源: https://juejin.im/post/5c0928bf6fb9a04a0a5efd50