React-Native与Android原生数据通信之回调函数

写作时间：2020/4/8
React-Native版本：0.62.2
Android Studio版本：3.5.2
开发平台：Windows
目标平台：Android

在RN的开发过程中，有时会不可避免地使用原生模块。本文通过利用回调函数实现RN和Android原生之间的通信。实现的结果是在RN界面输入文字之后，将文字发送给原生，原生在收到文字之后对其进行简单处理（添加后缀）再返回给RN界面。如下图所示

以下是具体操作过程

1 通过react-native init 命令创建一个初始项目（我创建的项目名称为Init），打开项目中的App.js文件，将代码全部删除，换成如下内容

// App.js
import React from 'react';
import {View, Text, TextInput, Button, StyleSheet, NativeModules} from 'react-native';

const NativeModule = NativeModules.MyNativeModule;

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {postText: '', newText: ''};
    }

    render() {
        return (
            <View style={styles.page}>
                <TextInput
                    style={styles.input}
                    placeholder="请输入文字"
                    value={this.state.postText}
                    onChangeText={(text) => this.setState({postText: text})}
                />
                <Button
                    title="提交给原生"
                    onPress={() => {
                        NativeModule.addSuffix(
                            this.state.postText,
                            (msg) => {
                                console.log(msg);
                            },
                            (newText) => {
                                this.setState({newText: newText});
                            },
                        );
                    }}
                />
                <Text>{this.state.newText}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    page: {
        flex: 1,
        backgroundColor: '#F7F7F7',
        justifyContent: 'space-evenly',
    },
    input: {
        height: 80,
        borderWidth: 1,
        borderColor: '#DDDDDD',
    },
});

2 通过Android Studio打开RN工程下的Android项目，在app/java/com/init目录下找到MainApplication.java文件，对文件进行如下修改

修改1

// MainApplication.java

···

// 新添加MyReactPackage包（这个包会在后面创建）
import com.init.MyReactPackage;

···

修改2

// MainApplication.java

···
@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    
    //找到getPackages方法，添加如下语句
    packages.add(new MyReactPackage());
    
    return packages;
}
···

3 在同路径下新建文件，命名为MyNativeModule.java，代码如下

// MyNativeModule.java

package com.init;

import com.facebook.react.bridge.Callback;
import com.facebook.react.uimanager.IllegalViewOperationException;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class MyNativeModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext context;

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void addSuffix(String name,Callback errorCallback,Callback successCallback){
        try {
            successCallback.invoke(name + "_native");
        }catch (IllegalViewOperationException e){
            errorCallback.invoke(e.getMessage());
        }
    }
}

4 在相同目录下再创建另一个文件MyReactPackage.java，代码如下

// MyReactPackage.java

package com.init;

import com.facebook.react.ReactPackage;
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 MyReactPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }
}

5 重新执行react-native run-android，成功！