React Native 桥接原生实现 JS 调用原生方法

在React Native中，你可以通过创建一个自定义的原生模块来实现JavaScript调用原生方法。以下是一个简单的例子：

1. 在原生代码中定义一个模块。

// 对于Android（Java）
public class MyNativeModule extends ReactContextBaseJavaModule {
 
    private ReactContext mContext;
 
    MyNativeModule(ReactApplicationContext context) {
        super(context);
        mContext = context;
    }
 
    @Override
    public String getName() {
        return "MyNativeModule";
    }
 
    @ReactMethod
    public void nativeMethod(String message, Promise promise) {
        // 实现你的原生逻辑
        promise.resolve(message);
    }
}

// 对于iOS (Swift)
@objc(MyNativeModule)
class MyNativeModule: RCTEventEmitter {
 
  @objc func nativeMethod(message: String, responseCallback: RCTResponseSenderBlock) {
    // 实现你的原生逻辑
    responseCallback([message])
  }
  
  override func supportedEvents() -> [String]! {
    return ["MyEvent"]
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

2. 注册模块。

// 对于Android
public class MyReactPackage 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();
    }
}

// 对于iOS
@objc(MyNativeModuleManager)
class MyNativeModuleManager: RCTViewManager {
  override func view() -> UIView? {
    return nil
  }
  
  override func moduleName() -> String! {
    return "MyNativeModule"
  }
}

3. 在应用的Java/Kotlin或者Objective-C/Swift代码中注册该模块。

// 对于Android
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyReactPackage() // 注册你的包
    );
}

// 对于iOS
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let bridge = RCTBridge(delegate: self, launchOptions: launchOptions)
    let rootView = RCTRootView(bridge: bridge, moduleName: "YourAppName", initialProperties: nil)
    ...
}
 
func sourceURLForBridge(_ bridge: RCTBridge!) -> URL! {
#if DEBUG
    return RCTBundleURLProvider.sharedSettings().