在用react-native开发应用中，和原生通信是一个非常重要的事情。rn的模块包装不可能面面俱到，直接用别的造好的轮子又有很多的不可控性，所以掌握和原生通信是非常重要的技能。今天先以官方的Toast为例简单介绍下Android开发的和原生通信。
一·实现Toast模块
首先我们需要创建一个原生模块类，该原生模块类是继承ReactContextBaseJavaModule类的Java代码，该用来实现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类之后，要求子类去实现一个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必须需要通过回调方法或者事件发送。
@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)}
