React Native与Android原生通信的全面指南

在使用React Native进行混合开发时，您需要掌握在原生端和React Native之间进行通信的技巧。本文将全面介绍原生模块与JavaScript (JS)传递数据的几种方法。

Android 原生模块的步骤

1. 定义原生模块类

在原生端，创建一个继承ReactContextBaseJavaModule的模块类，并在构造函数中使用super传递ReactApplicationContext对象。

public class NativeModule extends ReactContextBaseJavaModule {

    public NativeModule(ReactApplicationContext context) {
        super(context);
    }

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

2. 注册原生模块

在MainActivity.java中注册您的原生模块：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new NativeModulePackage()
    );
}

3. 在React Native中使用原生模块

在React Native代码中，使用requireNativeModule导入原生模块：

const { NativeModule } = require('react-native');

数据传递方法

1. 使用属性传递数据

使用属性将数据从原生模块传递到JS：

// 原生端
@ReactMethod
public void sendData(String data) {
    WritableMap map = Arguments.createMap();
    map.putString("data", data);
    sendEvent("onDataReceived", map);
}

// JS端
NativeModule.addEventListener("onDataReceived", (event) => {
    const data = event.nativeEvent.data;
});

2. 使用方法传递数据

使用方法将数据从JS传递到原生模块：

// JS端
NativeModule.sendData("Hello from JS!");

// 原生端
@ReactMethod
public void sendData(String data) {
    // 处理数据
}

3. 使用异步调用传递数据

使用异步调用实现更复杂的交互：

// JS端
NativeModule.getData().then((data) => {
    // 处理数据
});

// 原生端
@ReactMethod(isBlockingSynchronousMethod = false)
public Promise<String> getData() {
    return new Promise<String>((resolve, reject) -> {
        // 获取数据并resolve或reject Promise
    });
}

SEO优化