615
ReactNative調用Android原生模塊
有時候App需要訪問平台API，但React Native可能還沒有相應的模塊包裝；或者你需要複用一些Java代碼，而不是用Javascript重新實現一遍；又或者你需要實現某些高性能的、多線程的代碼，譬如圖片處理、數據庫、或者各種高級擴展等等。
我們把React Native設計為可以在其基礎上編寫真正的原生代碼，並且可以訪問平台所有的能力。要想實現訪問Android原生API，總結一下，主要有以下幾個步驟：
1. 創建一個原生模塊
這個原生模塊是一個繼承ReactContextBaseJavaModule的Java類,它可以實現一些JavaScript所調用的原生功能。我們的目標是可以在JavaScript裏寫ToastAndroid.show('Awesome', ToastAndroid.SHORT);，來調起一個Toast通知。例如：
public class RnTest extends ReactContextBaseJavaModule {
public RnTest(ReactApplicationContext reactContext) {
super(reactContext);
}
// ReactContextBaseJavaModule要求派生類實現getName方法。這個函數用於返回一個字符串
// 這個字符串用於在JavaScript端標記這個原生模塊
@Override
public String getName() {
return "ToastByAndroid";
}
// 獲取應用包名
// 要導出一個方法給JavaScript使用，Java方法需要使用注解@ReactMethod
@ReactMethod
public void getPackageName() {
String name = getReactApplicationContext().getPackageName();
Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
}
}
ReactContextBaseJavaModule要求派生類實現getName方法。這個函數用於返回一個字符串名字，這個名字在JavaScript端標記這個模塊。這裏我們把這個模塊叫做ToastByAndroid，這樣就可以在JavaScript中通過React.NativeModules.ToastByAndroid訪問到這個模塊。
注意：模塊名前的RCT前綴會被自動移除。所以如果返回的字符串為"RCTToastAndroid"，在JavaScript端依然通過React.NativeModules.ToastByAndroid訪問到這個模塊。
2. 注冊模塊
要使JavaScript端調用到原生模塊還需注冊這個原生模塊，需要實現一個類實現ReactPackage接口，並實現其中的抽象方法。例如：
public class ExampleReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new RnTest(reactContext));
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
MainApplication聲明
除了上麵的步驟外，還需在MainApplication.java文件中的getPackages方法中，實例化上麵的注冊類。例如：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// 實例化注冊類
new ExampleReactPackage());
}
};
3. JS調用android原生方法
3.1 引入NativeModules模塊
import { NativeModules } from 'react-native';
3.2 調用Android原生方法
var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.getPackageName();
4. 獲取android返回值
提供給js調用的原生android方法的返回類型必須是void，React Native的跨語言訪問是異步進行的，所以想要給JavaScript返回一個值的唯一辦法是使用回調函數或者發送事件。
4.1 回調函數
Callback是React.bridge中的一個接口，它作為ReactMethod的一個傳參，用來映射JavaScript的回調函數（function）。Callback接口隻定義了一個方法invoke，invoke接受多個參數，這個參數必須是react.bridge中支持的參數。
Android端代碼：
@ReactMethod
public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){
try{
if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){
// 失敗時回調
errorCallback.invoke("user or psw is empty");
}
// 成功時回調
successCallback.invoke("add user success");
}catch(IllegalViewOperationException e){
// 失敗時回調
errorCallback.invoke(e.getMessage());
}
}
rn端代碼：
var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});
5.調用測試
android主動向rn發送消息。
5.1 android端代碼
public static void sendEvent(ReactContext reactContext, String eventName, int status)
{
System.out.println("reactContext="+reactContext);
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName,status);
}
5.2 RN端代碼
// eventName為5.1中的eventName，reminder為5.1中的status
DeviceEventEmitter.addListener(eventName, (reminder) => {
console.log(reminder):
});
RN調用Android原生模塊的代碼如下：
const RNBridgeModule = NativeModules.RNBridgeModule;
nativeLanuchApp(message) {
RNBridgeModule.nativePlayVideo(message);
}
<TouchableOpacity onPress={() => {
this.nativeLanuchApp("111");
}} >
<Text >
try
</Text>
</TouchableOpacity>
最後更新：2017-04-18 22:32:35