React Native 原生模块和 JS 模块交互(Android)

1. JS 模块调用原生模块方法

1.1 ReactContextBaseJavaModule

创建一个原生模块 ZanIntentModule 并继承抽象类 ReactContextBaseJavaModule,同时实现几个方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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()

1
2
3
4
@Override
public String getName() {
return "ZanIntentModule";
}

这个函数用于返回一个字符串名字,这个名字在 JavaScript 端标记这个模块。这里我们把这个模块命名为 ZanIntentModule,这样就可以在 JavaScript 中通过 NativeModules.ZanIntentModule 访问到这个模块。

getConstants()

1
2
3
4
5
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap<>();
return constants;
}

如果需要在 Java 和 JavaScript 之间定义常量,则要覆盖这个方法,返回需要导出给 JavaScript 使用的常量。

@ReactMethod

要导出一个方法给 JavaScript 使用,Java 方法需要使用注解 @ReactMethod,方法的返回类型必须为 void。React Native 的跨语言访问是异步进行的,所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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());
}
}

在 JavaScript 中可以这样调用

1
2
3
4
5
NativeModules.ZanIntentModule.startActivity(
'com.danke77.sample.activity.WebViewActivity',
{
'url': url
})

1.2 注册模块

创建一个 Package 类 ZanReactPackage 并实现 ReactPackage,在 createNativeModules 方法中添加这个模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 实例

1
2
3
4
5
6
7
@Override
protected 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 中支持的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@ReactMethod
public 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 中可以这样调用

1
2
3
4
5
NativeModules.LoginModule.login('name', 'password', (name) => {
alert(name)
}, (err) => {
alert(err)
})

Promise

Promise 是 ES6 中增加的对于异步编程和回调更加友好的 API。

com.facebook.react.bridge 中定义的 Promise 接口,实现了 resolvereject 方法,resolve 用来处理正确结果,reject 用来处理异常。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@ReactMethod
public 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 中可以这样调用

1
2
3
4
5
6
7
8
9
10
11
NativeModules.LoginModule.login('name', 'password')
.then(
(map) => {
alert(map.name)
}
)
.catch(
(code, err) => {
alert(err)
}
)

或者用 async/await 来修饰,以同步方式调用原生模块

1
2
3
4
5
6
7
8
9
10
11
async login() {
try {
var {
name
} = await NativeModules.LoginModule.login('name', 'password')
alert(name)
}
catch (code, err) {
alert(err)
}
}

在原生模块中 Promise 类型的参数必须要放在最后一位,这样 JavaScript 调用的时候才能返回一个 Promise。

2. 原生模块发送事件到 JS 模块

原生模块可以在没有被调用的情况下往 JavaScript 发送事件通知。

1
2
3
4
5
6
7
protected void sendEvent(ReactContext reactContext,
String eventName,
@Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}

发送事件时

1
2
3
WritableMap params = Arguments.createMap();
params.putInt("unread", unreadCount);
sendEvent(getReactApplicationContext(), "onRefreshMessage", params);

向 JavaScript 模块发送了一个名为 onRefreshMessage 的事件,并携带了 params 作为参数。

JavaScript 模块可以通过使用 DeviceEventEmitter 模块来监听事件

1
2
3
4
5
6
7
8
9
10
11
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/,版权归作者所有,转载请注明出处。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!