Android React Native 原生模塊和 JS 模塊交互
1. JS 模塊調用原生模塊方法
1.1 ReactContextBaseJavaModule
創建一個原生模塊 ZanIntentModule 并繼承抽象類 ReactContextBaseJavaModule ，同時實現幾個方法。
public classZanIntentModuleextendsReactContextBaseJavaModule{
publicZanIntentModule(ReactApplicationContext reactContext){
super(reactContext);
}
@Override
publicStringgetName(){
return "ZanIntentModule";
}
@Override
publicMap<String, Object>getConstants(){
final Map<String, Object> constants = new HashMap<>();
return constants;
}
/**
* js call native to start activity
*
* @param toActivityName
* @param map
*/
@ReactMethod
publicvoidstartActivity(String toActivityName, ReadableMap map){
try {
Activity currentActivity = getCurrentActivity();
if (currentActivity != null) {
Class toActivity = Class.forName(toActivityName);
Intent intent = getActivityIntent(currentActivity, toActivity, map);
currentActivity.startActivity(intent);
}
} catch (Exception e) {
throw new JSApplicationIllegalArgumentException(
"Could not open Activity : " + e.getMessage());
}
}
}
</code></pre>
getName()
@Override
publicStringgetName(){
return "ZanIntentModule";
}
這個函數用于 返回一個字符串名字，這個名字在 JavaScript 端標記這個模塊 。這里我們把這個模塊命名為 ZanIntentModule ，這樣就可以在 JavaScript 中通過 NativeModules.ZanIntentModule 訪問到這個模塊。
getConstants()
@Override
publicMap<String, Object>getConstants(){
final Map<String, Object> constants = new HashMap<>();
return constants;
}
如果需要在 Java 和 JavaScript 之間定義常量，則要覆蓋這個方法，返回需要導出給 JavaScript 使用的常量。
<p>@ReactMethod</p>
要導出一個方法給 JavaScript 使用，Java 方法需要使用注解 @ReactMethod ，方法的返回類型必須為 void 。React Native 的跨語言訪問是異步進行的，所以想要給 JavaScript 返回一個值的唯一辦法是使用回調函數或者發送事件。
@ReactMethod
publicvoidstartActivity(String toActivityName, ReadableMap map){
try {
Activity currentActivity = getCurrentActivity();
if (currentActivity != null) {
Class toActivity = Class.forName(toActivityName);
Intent intent = getActivityIntent(currentActivity, toActivity, map);
currentActivity.startActivity(intent);
}
} catch (Exception e) {
throw new JSApplicationIllegalArgumentException(
"Could not open Activity : " + e.getMessage());
}
}
</code></pre>
在 JavaScript 中可以這樣調用
NativeModules.ZanIntentModule.startActivity(
'com.danke77.sample.activity.WebViewActivity',
{
'url': url
})
1.2 注冊模塊
創建一個 Package 類 ZanReactPackage 并實現 ReactPackage ，在 createNativeModules 方法中添加這個模塊。
public classZanReactPackageimplementsReactPackage{
@Override
publicList<NativeModule>createNativeModules(ReactApplicationContext reactContext){
List<NativeModule> modules = new ArrayList<>();
modules.add(new ZanIntentModule(reactContext));
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
publicList<ViewManager>createViewManagers(ReactApplicationContext reactContext){
return Collections.emptyList();
}
}
</code></pre>
1.3 添加模塊
在 Application 中的 ReactNativeHost 實例里 getPackages 方法添加 ZanReactPackage 實例
@Override
protectedList<ReactPackage>getPackages(){
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ZanReactPackage()
);
}
1.4 回調函數
Callback
Callback 是 com.非死book.react.bridge 中的一個接口，作為 ReactMethod 的一個傳參，用來映射 JavaScript 的回調函數（function）。
Callback 接口只定義了一個方法 invoke，invoke 接受多個參數，這個參數必須是 com.非死book.react.bridge 中支持的參數。
@ReactMethod
publicvoidlogin(String name, String password, Callback success, Callback failure){
try {
if (TextUtils.isEmpty(name)) {
failure.invoke("name is empty");
return;
}
if (TextUtils.isEmpty(password)) {
failure.invoke("password is empty");
return;
}
if (new LoginTask().login(name, password)) {
success.invoke(name);
} else {
failure.invoke("login failure");
}
} catch (Exception e) {
e.printStackTrace();
failure.invoke(e.getMessage());
}
}
</code></pre>
在 JavaScript 中可以這樣調用
NativeModules.LoginModule.login('name', 'password', (name) => {
alert(name)
}, (err) => {
alert(err)
})
Promise
Promise 是 ES6 中增加的對于異步編程和回調更加友好的 API。
在 com.非死book.react.bridge 中定義的 Promise 接口，實現了 resolve 和 reject 方法， resolve 用來處理正確結果， reject 用來處理異常。
@ReactMethod
publicvoidlogin(String name, String password, Promise promise){
try {
if (TextUtils.isEmpty(name)) {
promise.reject("-1", "name is empty");
return;
}
if (TextUtils.isEmpty(password)) {
promise.reject("-2", "password is empty");
return;
}
if (new LoginTask().login(name, password)) {
WritableMap map = Arguments.createMap();
map.putString("name", name);
promise.resolve(map);
} else {
promise.reject("-3", "login failure");
}
} catch (Exception e) {
e.printStackTrace();
promise.reject(e);
}
}
</code></pre>
在 JavaScript 中可以這樣調用
NativeModules.LoginModule.login('name', 'password')
.then(
(map) => {
alert(map.name)
}
)
.catch(
(code, err) => {
alert(err)
}
)
或者用 async/await 來修飾，以同步方式調用原生模塊
async login() {
try {
var {
name
} = await NativeModules.LoginModule.login('name', 'password')
alert(name)
}
catch (code, err) {
alert(err)
}
}
在原生模塊中 Promise 類型的參數必須要放在最后一位，這樣 JavaScript 調用的時候才能返回一個 Promise。
2. 原生模塊發送事件到 JS 模塊
原生模塊可以在沒有被調用的情況下往 JavaScript 發送事件通知。
protectedvoidsendEvent(ReactContext reactContext,
String eventName,
@Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
發送事件時
WritableMap params = Arguments.createMap();
params.putInt("unread", unreadCount);
sendEvent(getReactApplicationContext(), "onRefreshMessage", params);
向 JavaScript 模塊發送了一個名為 onRefreshMessage 的事件，并攜帶了 params 作為參數。
JavaScript 模塊可以通過使用 DeviceEventEmitter 模塊來監聽事件
componentDidMount() {
DeviceEventEmitter.addListener('onRefreshMessage', this.onUpdateMessage)
}
componentWillUnmount() {
DeviceEventEmitter.removeListener('onRefreshMessage', this.onUpdateMessage)
}
onUpdateMessage = (e) => {
alert(e.unread)
}
</code></pre>
來自：https://danke77.github.io/2016/12/07/react-native-native-modules-android/