动手建立一个本身的「React native」原生模块

前言

咱们在使用RN的时候，会发现RN提供了不少Module供JS调用，这些Module可以知足咱们一些基础的应用场景，可是在实际的项目中，一定会有一些交互逻辑须要咱们本身去实现，这时候就须要咱们自定义一些Module供JS调用，那么怎么才能让JS调用到咱们自定义的Module呢？ 下面咱们就一步步的去实现JS对自定义Module的调用。

实现方法

一、在原生端建立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);
    }

}
复制代码

二、建立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();
    }
}
复制代码

三、修改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， 也可微信搜索小程序「美菜产品技术团队」，干货满满且每周更新，想学习技术的你不要错过哦。