Android与RN数据交互初探

  • Arans
  • 14 Minutes
  • June 29, 2018

本文来记录一下在最近的项目中Android端和React端是如何进行数据交互的

关于数据类型：

以下所列举的参数类型展示了，在@ReactMethod标签所标注的方法中，Java端与JavaScript之间的映射关系。 

1
2
3
4
5
6
7
8
Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

准备工作：

首先要创建一个自己的Modules来继承ReactContextBaseJavaModule 

1
2
3
4
5
6
7
8
9
10
public class AransModules extends ReactContextBaseJavaModule{
    private Context mContext;
    public AransModules(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }
    @Override
    public String getName() {
        return "AransModules";
    }

再创建一个Package实现ReactPackage接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class AransPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        //这条方法只执行一次
        List<NativeModule> modules = new ArrayList<>();
        mModule = new AransModules(reactContext);
        modules.add(mModule);
        return modules;
    }
}

在需要加载的的activity中添加

1
.addPackage(reactPackage)

常见普通常量的传递:

1
2
3
4
5
6
7
8
/**native端*/
@Override
    public Map<String, Object> getConstants() {
        Map<String, Object> params = new HashMap<>();
        params.put("aa","hahaha");
        params.put("bb","xixixi");
        return params;
    }
1
2
/**javaScript*/
let nativeResult=NativeModules.AransModules.aa;

调用方法：

所要注意的问题就是原生端的方法要用@ReactMethod标签标注上

1
2
3
4
5
/**java**/
@ReactMethod
    public void rnCallNative(String msg){
        Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
    }
1
2
3
4
/**js**/
call_button(){
    NativeModules.AransModules.rnCallNative("这里是js端传递的数据");
}

Callback方法：

关于invoke：

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

设计思想：

通过Android端拿取网络数据，传递到React端

在Package类中，通过setData( )把数据塞进 Module中

在Modules类中，通过setData( )把数据传递进invoke中等待Js端调用

1
2
3
4
5
6
7
@ReactMethod
    public void giveRnData(Callback callback){

        callback.invoke(data);
        System.out.println("--------------------------------"+data);

    }
1
reactBrandFragment.getReactPackage().setData("hahaha");//TODO 置入数据的的入口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**js**/
render() {
        return (
            <View>
                <TouchableHighlight onPress={() ={
                        NativeModules.AransModules.giveRnData((result) => {
                    //result去回调中取值
                        this.setState({name: result});
                    })}}>
                    <Text>
                        aaaa{this.state.name}
                    </Text>
                </TouchableHighlight>
            </View>
        )
    }

点击按钮以后，状态机的name值就会发生改变

© 2019 AransBlog