混合开发：React Native与原生通信

在混合移动应用开发中，React Native（RN）允许通过桥接机制与原生代码（如Android的Java/Kotlin或iOS的Objective-C/Swift）通信。这常用于访问设备原生功能（如摄像头、蓝牙）或优化性能。以下是逐步指南，确保结构清晰、真实可靠。核心机制包括原生模块、事件和回调。

1. 原生模块（Native Modules）

原生模块是RN与原生代码交互的基础。它允许JavaScript调用原生方法。

• Android端（Java/Kotlin）：创建一个类继承ReactContextBaseJavaModule，并注册到ReactPackage。
• iOS端（Objective-C/Swift）：创建一个类实现RCTBridgeModule协议，并使用宏注册。

2. 事件（Events）

事件用于从原生代码向JavaScript发送数据，例如传感器更新。

• 原生端触发事件，JavaScript通过NativeEventEmitter监听。
• 适用于实时数据流，如位置更新。

3. 回调（Callbacks）

回调用于从JavaScript向原生代码传递函数，处理异步操作。

• JavaScript调用原生方法时传入回调函数。
• 原生执行完成后，通过回调返回结果。

4. 设置步骤

以下以Android为例（iOS类似），分步实现一个简单模块：从JavaScript获取字符串，原生代码处理并返回大写形式。

步骤1: 创建原生模块（Android/Java）

在Android项目中，创建ToastModule.java文件：

package com.yourApp;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class ToastModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "ToastModule"; // 模块名称，JavaScript通过此调用
    }

    @ReactMethod
    public void toUpperCase(String input, Callback callback) {
        String result = input.toUpperCase(); // 原生处理逻辑
        callback.invoke(result); // 回调返回结果
    }
}

步骤2: 注册模块到React Package

创建CustomReactPackage.java：

package com.yourApp;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext)); // 添加模块
        return modules;
    }
    // 其他方法省略...
}

在MainApplication.java中注册Package：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
        new MainReactPackage(),
        new CustomReactPackage() // 添加自定义包
    );
}

步骤3: JavaScript调用原生模块

在RN组件中，导入并使用模块：

import { NativeModules } from 'react-native';
const ToastModule = NativeModules.ToastModule;

function App() {
  const handlePress = () => {
    ToastModule.toUpperCase('hello world', (result) => {
      console.log(result); // 输出: "HELLO WORLD"
    });
  };

  return (
    <Button title="调用原生方法" onPress={handlePress} />
  );
}

5. 事件示例：原生到JavaScript通信

添加事件支持，例如当原生代码完成处理时发送事件。

在Android模块中：

import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;

public class ToastModule extends ReactContextBaseJavaModule {
    // ... 其他代码同上
    private void sendEvent(String eventName, String data) {
        ReactContext reactContext = getReactApplicationContext();
        WritableMap params = Arguments.createMap();
        params.putString("result", data);
        reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
    }

    @ReactMethod
    public void toUpperCase(String input) {
        String result = input.toUpperCase();
        sendEvent("onUpperCaseComplete", result); // 发送事件
    }
}

在JavaScript中监听事件：

import { NativeEventEmitter, NativeModules } from 'react-native';
const eventEmitter = new NativeEventEmitter(NativeModules.ToastModule);

useEffect(() => {
  const subscription = eventEmitter.addListener('onUpperCaseComplete', (event) => {
    console.log(event.result); // 接收事件数据
  });
  return () => subscription.remove(); // 清理监听
}, []);

6. 注意事项

• 性能优化：频繁通信可能影响性能，建议批量处理数据或使用TurboModules（RN新架构）。
• 错误处理：在回调中添加错误参数，例如callback.invoke(null, error)。
• 跨平台一致性：Android和iOS实现需保持一致，JavaScript接口应统一。
• 调试工具：使用Flipper或React Native Debugger监控桥接通信。

通过以上步骤，您可以高效实现RN与原生通信。如需更多细节，参考官方文档或社区资源（如React Native网站）。