ReactNative调用Android原生模块

有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用JavaScript重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 

我们把React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。要想实现访问Android原生API，总结一下，主要有以下几个步骤：

1. 创建一个原生模块

这个原生模块是一个继承ReactContextBaseJavaModule的Java类,它可以实现一些JavaScript所调用的原生功能。我们的目标是可以在JavaScript里写ToastAndroid.show(‘Awesome’, ToastAndroid.SHORT);，来调起一个Toast通知。例如：

public class RnTest extends ReactContextBaseJavaModule {
public RnTest(ReactApplicationContext reactContext) {
super(reactContext);
}
// ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串
// 这个字符串用于在JavaScript端标记这个原生模块
@Override
public String getName() {
return "ToastByAndroid";
}
// 获取应用包名
// 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod
@ReactMethod
public void getPackageName() {
String name = getReactApplicationContext().getPackageName();
Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串名字，这个名字在JavaScript端标记这个模块。这里我们把这个模块叫做ToastByAndroid，这样就可以在JavaScript中通过React.NativeModules.ToastByAndroid访问到这个模块。 

注意：模块名前的RCT前缀会被自动移除。所以如果返回的字符串为”RCTToastAndroid”，在JavaScript端依然通过React.NativeModules.ToastByAndroid访问到这个模块。

2. 注册模块

要使JavaScript端调用到原生模块还需注册这个原生模块，需要实现一个类实现ReactPackage接口，并实现其中的抽象方法。例如：

public class ExampleReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new RnTest(reactContext));
return modules;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

MainApplication声明

除了上面的步骤外，还需在MainApplication.java文件中的getPackages方法中，实例化上面的注册类。例如：

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// 实例化注册类
new ExampleReactPackage());
}
};

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

3. JS调用android原生方法

3.1 引入NativeModules模块

import { NativeModules } from 'react-native';

1
1

3.2 调用Android原生方法

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.getPackageName();

1
2
1
2

4. 获取android返回值

提供给js调用的原生android方法的返回类型必须是void，React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。

4.1 回调函数

Callback是React.bridge中的一个接口，它作为ReactMethod的一个传参，用来映射JavaScript的回调函数（function）。Callback接口只定义了一个方法invoke，invoke接受多个参数，这个参数必须是react.bridge中支持的参数。 

Android端代码：

@ReactMethod
public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){
try{
if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){
// 失败时回调
errorCallback.invoke("user or psw  is empty");
}
// 成功时回调
successCallback.invoke("add user success");
}catch(IllegalViewOperationException e){
// 失败时回调
errorCallback.invoke(e.getMessage());
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

rn端代码：

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});

1
2
1
2

5.调用测试

android主动向rn发送消息。

5.1 android端代码

public  static void sendEvent(ReactContext reactContext, String eventName, int status)
{
System.out.println("reactContext="+reactContext);

reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName,status);
}

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

5.2 RN端代码

// eventName为5.1中的eventName，reminder为5.1中的status
DeviceEventEmitter.addListener(eventName, (reminder) => {
console.log(reminder):
});

1
2
3
4
1
2
3
4

RN调用Android原生模块的代码如下：

const RNBridgeModule = NativeModules.RNBridgeModule;
nativeLanuchApp(message) {
RNBridgeModule.nativePlayVideo(message);
}

<TouchableOpacity onPress={() => {
this.nativeLanuchApp("111");
}} >
<Text >
try
</Text>
</TouchableOpacity>

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12