前言

我們在使用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， 也可微信搜尋小程式「美菜產品技術團隊」，乾貨滿滿且每週更新，想學習技術的你不要錯過哦。