1. JS 模塊調用原生模塊方法
1.1 ReactContextBaseJavaModule
創建一個原生模塊 ZanIntentModule 並繼承抽象類 ReactContextBaseJavaModule，同時實現幾個方法。
public
class
ZanIntentModule
extends
ReactContextBaseJavaModule {
public
ZanIntentModule(ReactApplicationContext reactContext) {
super(reactContext); } @Override
public String
getName() {
return
"ZanIntentModule"; } @Override
public Map<String, Object>
getConstants() {
final Map<String, Object> constants =
new HashMap<>();
return constants; }
/** * js call native to start activity * *
@param toActivityName *
@param map */
@ReactMethod public
void
startActivity(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()); } }}
getName()
@Overridepublic
String getName() {
return
"ZanIntentModule";}
這個函數用於返回一個字符串名字，這個名字在 JavaScript 端標記這個模塊。這裏我們把這個模塊命名爲 ZanIntentModule，這樣就可以在
JavaScript 中通過 NativeModules.ZanIntentModule 訪問到這個模塊。
getConstants()
@Overridepublic
Map<String, Object> getConstants() {
final Map<String, Object> constants =
new HashMap<>();
return constants;}
如果需要在 Java 和 JavaScript 之間定義常量，則要覆蓋這個方法，返回需要導出給 JavaScript 使用的常量。
@ReactMethod
要導出一個方法給 JavaScript 使用，Java 方法需要使用註解 @ReactMethod，方法的返回類型必須爲 void。React
Native 的跨語言訪問是異步進行的，所以想要給 JavaScript 返回一個值的唯一辦法是使用回調函數或者發送事件。
@ReactMethodpublic
void
startActivity(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()); }}
在 JavaScript 中可以這樣調用
NativeModules.ZanIntentModule.startActivity(
'com.danke77.sample.activity.WebViewActivity', {
'url': url })
1.2 註冊模塊
創建一個 Package 類 ZanReactPackage 並實現 ReactPackage，在 createNativeModules 方法中添加這個模塊。
public
class
ZanReactPackage
implements
ReactPackage { @Override
public List<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
public List<ViewManager>
createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList(); }}
1.3 添加模塊
在 Application 中的 ReactNativeHost 實例裏 getPackages 方法添加 ZanReactPackage 實例
@Overrideprotected
List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ZanReactPackage() );}
1.4 回調函數
Callback
Callback 是 com.facebook.react.bridge 中的一個接口，作爲
ReactMethod 的一個傳參，用來映射 JavaScript 的回調函數（function）。
Callback 接口只定義了一個方法 invoke，invoke 接受多個參數，這個參數必須是 com.facebook.react.bridge 中支持的參數。
@ReactMethodpublic
void
login(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()); }}
在 JavaScript 中可以這樣調用
NativeModules.LoginModule.login('name',
'password', (name) => { alert(name) }, (err) => { alert(err) })
Promise
Promise 是 ES6 中增加的對於異步編程和回調更加友好的 API。
在 com.facebook.react.bridge 中定義的
Promise 接口，實現了 resolve 和 reject 方法，resolve 用來處理正確結果，reject 用來處理異常。
@ReactMethodpublic
void
login(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); }}
在 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 發送事件通知。
protected
void
sendEvent(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)}
本文是 慌不要慌 原創，發表於 https://danke77.github.io/，請閱讀原文支持原創 https://danke77.github.io/2016/12/07/react-native-native-modules-android/，版權歸作者所有，轉載請註明出處。