1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| 在 React Native 中，原生模块允许你在 JavaScript 代码中调用 Android 或 iOS 的原生功能。
创建和使用原生模块的过程通常分为以下几个步骤：
一、创建原生模块
1.1 Android（Java/Kotlin）：
1.1.1 在 android/app/src/main/java/com/{your_project}/
目录下创建一个Java或Kotlin文件，例如 MyNativeModule.java。
1.1.2 在该文件中编写原生模块类，继承 ReactContextBaseJavaModule 并实现所需的方法。
Java 示例：
package com.myproject;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class MyNativeModule extends ReactContextBaseJavaModule {
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "MyNativeModule";
}
@ReactMethod
public void showToast(String message) {
// 调用 Android 的 Toast 类来显示消息
Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
}
}
1.1.3 注册原生模块。在 MainApplication.java 文件中，添加 MyNativeModule 到包列表中：
import com.myproject.MyNativeModule;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyNativeModule() // 注册模块
);
}
1.2 iOS（Objective-C/Swift）：
1.2.1 在 ios/{your_project}/ 目录下创建一个原生模块文件，
例如 MyNativeModule.m（Objective-C）或 MyNativeModule.swift（Swift）。
Objective-C 示例：
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
@implementation MyNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(showToast:(NSString *)message) {
// 调用 iOS 的 Toast 类或 UIAlertView 来显示消息
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message"
message:message
preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
[alert addAction:action];
[[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:alert animated:YES completion:nil];
});
}
@end
1.2.2 注册原生模块。在 AppDelegate.m 文件中，确保 RCTBridge 已正确设置并加载模块。
二、使用原生模块
在 React Native JavaScript 代码中，你可以通过 NativeModules 来调用原生模块的方法。
JavaScript 使用原生模块：
2.1 在 JavaScript 中，首先导入 NativeModules：
import { NativeModules } from 'react-native';
2.2 调用原生模块中的方法：
NativeModules.MyNativeModule.showToast('Hello from React Native!');
三、总结：
3.1 Android：使用 Java 或 Kotlin 创建原生模块，
继承 ReactContextBaseJavaModule，并通过 @ReactMethod 注解暴露方法。
3.2 iOS：使用 Objective-C 或 Swift 创建原生模块，遵循 RCTBridgeModule 协议，
通过 RCT_EXPORT_METHOD 暴露方法。
3.3 在 JavaScript 中，通过 NativeModules 导入原生模块并调用方法。
这样，你就能在 React Native 应用中调用 Android 和 iOS 的原生功能，扩展应用的能力。
|