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

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

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

{ NativeModule.addSuffix( this.state.postText, (msg) => { console.log(msg); }, (newText) => { this.setState({newText: newText}); }, ); }} /> {this.state.newText} ); } } 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 getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List 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 createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }
}

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

作者：隔壁老何