在用react-native開發(fā)應用中，和原生通信是一個非常重要的事情。rn的模塊包裝不可能面面俱到，直接用別的造好的輪子又有很多的不可控性，所以掌握和原生通信是非常重要的技能。今天先以官方的Toast為例簡單介紹下Android開發(fā)的和原生通信。
一·實現(xiàn)Toast模塊
首先我們需要創(chuàng)建一個原生模塊類，該原生模塊類是繼承ReactContextBaseJavaModule類的Java代碼，該用來實現(xiàn)JavaScript所需的一些功能。我們的目標是使用JavaScript代碼通過調用ToastAndroid.show('Awesome',ToastAndroid.SHORT)方法進行再屏幕上面顯示一個toast消息提醒。
package com.demo;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.HashMap;
import java.util.Map;
public class ToastCustomModule extends ReactContextBaseJavaModule {
private static final String DURATION_SHORT="SHORT";
private static final String DURATION_LONG="LONG";
public ToastCustomModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}
然后繼承ReactContextBaseJavaModule類之后，要求子類去實現(xiàn)一個getName()方法。該方法用于返回一個字符串信息，用來代表JavaScript前端使用這個模塊。這邊我們返回信息為"ToastCustomAndroid"用來代表給模塊。這樣我們在前端就可以用JavaScript通過React.NativeModules.ToastCustomAndroid訪問到這個模塊了。
@Override
public String getName() {
return"ToastCustomAndroid";
}
getConstants該給JavaScript提供一些可以使用常量
@Override
public Map getConstants() {
final Map constants =newHashMap<>();
constants.put(DURATION_SHORT, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG, Toast.LENGTH_LONG);
returnconstants;
}
最后在寫一個方法，需要添加@ReactMethod注解，用于給JavaScript進行調用。該橋接方法的返回類型必須要為void。React Native中的橋接通信是異步形式的，所以如果需要返回值給JavaScript必須需要通過回調方法或者事件發(fā)送。
@ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
二·模塊注冊
package com.modules.custom;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class AnToastReactPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
List modules =newArrayList<>();
modules.add(newToastCustomModule(reactContext)); ?
returnmodules;
}
@Override
public List> createJSModules() {
returnCollections.emptyList();
}
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
returnCollections.emptyList();
}
}
接下來，上面自定義的packager需要在MainApplication.java中的getPackagers方法中進行添加(具體路徑:android/app/src/main/java/com/your-app-name/MainApplication.java)。
好了到這里一個簡單例子已經完成，你可以在你的代碼中使用這個模塊了
?import { NativeModules } ?from 'react-native');
onPress={()=>NativeModules.ToastCustomAndroid.show("我是ToastCustomAndroid彈出消息",NativeModules.ToastCustomAndroid.SHORT)}
