React Native与原生交互：传参并带有回调

在React Native开发中，与原生代码进行交互是常见的需求，通常涉及调用原生模块、传递参数并在操作完成后接收回调。本文将演示如何实现这一过程。

首先，需要创建原生模块。在iOS中，通常使用Objective-C或Swift编写；在Android中，则使用Java或Kotlin。以下是一个简化的示例。

iOS（Objective-C）示例

#import <React/RCTBridgeModule.h>@interface RCT_EXTERN_MODULE(NativeModule, NSObject)RCT_EXTERN_METHOD(stringFromNative:(NSString *)param callback:(RCTResponseSenderBlock)callback)@end

Android（Java）示例

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 com.facebook.react.bridge.Callback;public class NativeModule extends ReactContextBaseJavaModule {public NativeModule(ReactApplicationContext reactContext) {super(reactContext);}@ReactMethodpublic void stringFromNative(String param, Callback callback) {// 实现逻辑}}

接下来，在React Native代码中调用原生方法，通常通过事件系统完成。以下是一个简化示例。

React Native代码示例

import { NativeModules } from 'react-native';const nativeModule = NativeModules.NativeModule; // 假设模块名为NativeModulenativeModule.stringFromNative('Hello from RN', (result) => {console.log('Received result from native module:', result);});

在这个例子中，假设有一个名为 NativeModule 的原生模块，使用其 stringFromNative 方法，该方法接受字符串参数和回调函数。当原生方法完成任务时，将结果传递给回调函数，此处回调函数仅打印结果到控制台。

请注意，这只是一个简化示例。实际应用中可能需要处理更复杂的逻辑，如错误处理和多线程问题。此外，与原生代码的交互通常涉及更复杂的桥接工作，可能需使用其他React Native组件或库。