React Native与原生的交互通信

在React Native与原生之间进行通信，通常使用react-native link命令链接原生模块，然后通过NativeModules来访问原生模块。

以下是一个简单的例子：

1. 在原生代码中定义模块和方法：

// Java (Android)
public class MyNativeModule extends ReactContextBaseJavaModule {
 
    private ReactApplicationContext mContext;
 
    MyNativeModule(ReactApplicationContext context) {
        super(context);
        mContext = context;
    }
 
    @Override
    public String getName() {
        return "MyNativeModule";
    }
 
    @ReactMethod
    public void sampleMethod(String stringArgument, int numberArgument, Callback callback) {
        // 原生逻辑
        String stringToSendBack = "Received: " + stringArgument + " and " + numberArgument;
        callback.invoke(stringToSendBack);
    }
}

// Swift (iOS)
@objc(MyNativeModule)
class MyNativeModule: RCTEventEmitter {
 
    @objc(sampleMethod:number:callback:)
    func sampleMethod(stringArgument: String, numberArgument: Int, callback: RCTResponseSenderBlock) {
        // 原生逻辑
        let stringToSendBack = "Received: \(stringArgument) and \(numberArgument)"
        callback(["data": stringToSendBack])
    }
 
    // ... 实现 RCTEventEmitter 方法
}

2. 注册模块：

// Java (Android) - 在MainActivity.java或你的自定义ReactActivity中
public class MainActivity extends ReactActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // ...
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            // ...
            new MyNativePackage() // 自定义包
        );
    }
}
 
public class MyNativePackage implements ReactPackage {
 
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

// Swift (iOS) - 在AppDelegate.swift中
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegat