React Native 入门——js与native互相通信

在React Native中，JavaScript与原生代码（iOS和Android）之间的通信是通过一个桥接层实现的。这个桥接层允许JavaScript调用原生模块，反之亦然。

以下是一个简单的例子，展示了如何从JavaScript发送消息到原生代码，并接收回调。

首先，在JavaScript中，你需要使用NativeModules来调用原生模块：

import { NativeModules } from 'react-native';
 
// 假设你有一个名为ToastModule的原生模块
const ToastModule = NativeModules.ToastModule;
 
// 调用原生模块的方法
ToastModule.show('Hello, this is a toast message', ToastModule.DURATION_SHORT);

然后，在原生代码中，你需要创建一个模块，这里以iOS为例：

// RCTToastModule.h
 
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
 
@interface RCTToastModule : NSObject <RCTBridgeModule>
@end
 
// RCTToastModule.m
 
#import "RCTToastModule.h"
 
@implementation RCTToastModule
 
RCT_EXPORT_MODULE();
 
RCT_EXPORT_METHOD(show:(NSString *)message
                  duration:(nonnull NSNumber *)duration) {
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Toast"
                                                                             message:message
                                                                      preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK"
                                                       style:UIAlertActionStyleDefault
                                                     handler:nil];
    [alertController addAction:okAction];
    UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
    [rootViewController presentViewController:alertController animated:YES completion:nil];
}
 
@end

在Android中，你需要创建一个模块：

// ToastModule.java
 
package com.yourpackage;
 
import android.widget.Toast;
 
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
 
public class ToastModule extends ReactContextBaseJavaModule {
 
    public ToastModule(ReactApplicationContext context) {
        super(context);
    }
 
    @Override
    public String getName() {
        return "ToastModule";
    }
 
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

然后，你需要在原生应用中注册这个模块：

// MainApplication.java
 
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHo