概述

有時候App需要訪問平臺API，但React Native可能還沒有相應的模塊包裝；或者你需要復用一些Java代碼，而不是用Javascript重新實現一遍；又或者你需要實現某些高性能的、多線程的代碼，譬如圖片處理、數據庫、或者各種高級擴展等等。
我們知道React Native本身對這種偏業務和底層調用是不關心的，這時候我們就想到了原生組件，我們通過調用原生組件，然后經過特定的封裝來達到效果。如我們在原生開發中常見的Toast為例：

原生模塊封裝

假設我們希望可以從Javascript發起一個Toast消息，Android會顯示在屏幕的下方，會停留一段時間。我們來看一下官方給出的例子。

創建一個繼承了ReactContextBaseJavaModule的Java類，它可以實現一些JavaScript所需的功能。我們這里的目標是可以在JavaScript里寫ToastAndroid.show('Awesome', ToastAndroid.SHORT);，來調起一個Toast通知。

package com.facebook.react.modules.toast;import android.widget.Toast;import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod;import java.util.Map;public class ToastModule extends ReactContextBaseJavaModule {private static final String DURATION_SHORT_KEY = "SHORT";private static final String DURATION_LONG_KEY = "LONG";public ToastModule(ReactApplicationContext reactContext) {super(reactContext);} }

ReactContextBaseJavaModule要求派生類實現getName方法，這個名字返回的字符串可以自取，但是不能命名為'ToastAndroid'，因為RN已經內置了一個名為ToastAndroid的模塊，運行時會報錯名字沖突！

@Overridepublic String getName() {return "ToastAndroid";}

注：模塊名前的RCT前綴會被自動移除。所以如果返回的字符串為"RCTToastAndroid"，在JavaScript端依然通過React.NativeModules.ToastAndroid訪問到這個模塊。
接下來我們需要設置一個可選的方法getContants()，用于彈出時間選擇（及Toast.Length）

@Overridepublic Map<String, Object> getConstants() {final Map<String, Object> constants = new HashMap<>();constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);return constants;}

最后導出一個方法給JavaScript使用。

@ReactMethodpublic void show(String message, int duration) {Toast.makeText(getReactApplicationContext(), message, duration).show();}

在Java這邊要做的最后一件事就是注冊這個模塊。我們需要在應用的Package類的createNativeModules方法中添加這個模塊。如果模塊沒有被注冊，它也無法在JavaScript中被訪問到。

class AnExampleReactPackage implements ReactPackage {@Overridepublic List<Class<? extends JavaScriptModule>> createJSModules() {return Collections.emptyList();}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new ToastModule(reactContext));return modules;}

這個package需要在MainApplication.java文件的getPackages方法中提供。這個文件位于你的react-native應用文件夾的android目錄中。具體路徑是: android/app/src/main/java/com/your-app-name/MainApplication.java.

protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new AnExampleReactPackage()); // <-- 添加這一行，類名替換成你的Package類的名字. }

那么在React Native中怎么使用呢？為了讓你的功能從JavaScript端訪問起來更為方便，通常我們都會把原生模塊封裝成一個JavaScript模塊。

'use strict';import { NativeModules } from 'react-native';export default NativeModules.ToastAndroid;

最后調用javascript模塊就好了。

import ToastAndroid from './ToastAndroid'; ToastAndroid.show('Awesome', ToastAndroid.SHORT);

未完待續..

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的React Native调用原生模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。