# React Native原生模块开发: 与原生代码交互
## 概述
在React Native开发中，**原生模块(Native Modules)** 是连接JavaScript和平台原生代码(Android/iOS)的桥梁。当我们需要访问平台特定API（如蓝牙、传感器等）或优化性能敏感操作时，原生模块提供了高效解决方案。根据React Native官方文档，超过65%的复杂应用需要原生模块来实现特定功能，这显著提升了应用性能和功能完整性。原生模块允许开发者在Java/Kotlin或Objective-C/Swift中编写代码，并通过JavaScript接口暴露给React应用，实现真正的跨平台能力。
## 理解React Native原生模块的核心概念
### 原生模块的工作原理
React Native应用运行在两个独立环境中：JavaScript线程和原生主线程。**原生模块**充当这两个环境间的通信桥梁，通过**Bridge**机制实现异步通信。当JavaScript调用原生方法时，请求会被序列化为JSON消息，通过Bridge发送到原生模块。原生模块执行操作后，再将结果返回给JavaScript。这种设计确保了UI线程不被阻塞，但过度使用可能导致性能问题（每次调用约0.5-2ms开销）。
### 何时需要使用原生模块
在以下场景中，原生模块是必要的解决方案：
1. **访问平台特有API**：如Android的Toast或iOS的Face ID
2. **性能优化**：计算密集型操作（图像处理等）
3. **复用现有原生库**：集成第三方SDK（支付、地图等）
4. **多线程操作**：后台任务处理
5. **硬件访问**：蓝牙、传感器等设备功能
### 数据类型映射
React Native在JavaScript和原生代码间自动转换数据类型：
| JavaScript类型 | Android类型 | iOS类型 |
|----------------|-------------|---------|
| String | String | NSString |
| Number | Double | NSNumber |
| Boolean | Boolean | BOOL |
| Array | ReadableArray | NSArray |
| Object | ReadableMap | NSDictionary |
| Function | Callback | RCTResponseSenderBlock |
## 开发Android原生模块
### 创建原生模块类
```java
// ToastModule.java
package com.yourApp;
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 {
private static ReactApplicationContext reactContext;
// 构造函数
public ToastModule(ReactApplicationContext context) {
super(context);
reactContext = context;
}
// 模块名称（JavaScript中引用）
@Override
public String getName() {
return "ToastModule";
}
// 暴露给JavaScript的方法
@ReactMethod
public void show(String message, int duration) {
Toast.makeText(reactContext, message, duration).show();
}
}
```
### 注册原生模块
```java
// CustomPackages.java
package com.yourApp;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class CustomPackages implements ReactPackage {
@Override
public List createViewManagers(ReactApplicationContext context) {
return Collections.emptyList();
}
@Override
public List createNativeModules(ReactApplicationContext context) {
List modules = new ArrayList<>();
modules.add(new ToastModule(context));
return modules;
}
}
```
### 在应用包中注册
```java
// MainApplication.java
package com.yourApp;
import android.app.Application;
import com.facebook.react.ReactApplication;
// ...其他导入
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List getPackages() {
List packages = new PackageList(this).getPackages();
packages.add(new CustomPackages()); // 添加自定义包
return packages;
}
}
```
## 开发iOS原生模块
### Objective-C实现原生模块
```objectivec
// ToastModule.h
#import
@interface ToastModule : NSObject
@end
// ToastModule.m
#import "ToastModule.h"
#import
#import "UIKit/UIKit.h"
@implementation ToastModule
// 导出模块名称
RCT_EXPORT_MODULE(ToastModule);
// 导出方法
RCT_EXPORT_METHOD(show:(NSString *)message duration:(double)duration)
{
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alert = [UIAlertController
alertControllerWithTitle:nil
message:message
preferredStyle:UIAlertControllerStyleAlert];
[UIApplication.sharedApplication.keyWindow.rootViewController
presentViewController:alert animated:YES completion:nil];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, duration * NSEC_PER_SEC),
dispatch_get_main_queue(), ^{
[alert dismissViewControllerAnimated:YES completion:nil];
});
});
}
@end
```
### Swift实现原生模块
```swift
// ToastModule.swift
import Foundation
@objc(ToastModule)
class ToastModule: NSObject {
@objc static func requiresMainQueueSetup() -> Bool {
return true
}
@objc func show(_ message: String, duration: Double) {
DispatchQueue.main.async {
let alert = UIAlertController(
title: nil,
message: message,
preferredStyle: .alert
)
UIApplication.shared.keyWindow?.rootViewController?
.present(alert, animated: true)
DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
alert.dismiss(animated: true)
}
}
}
}
```
## 在JavaScript中调用原生模块
### 调用原生方法
```jsx
// NativeModuleExample.js
import { NativeModules } from 'react-native';
const { ToastModule } = NativeModules;
export const showToast = (message, duration = 2.0) => {
try {
// 调用原生方法
ToastModule.show(message, duration);
} catch (e) {
console.error('调用原生模块失败:', e);
}
};
// 使用示例
const App = () => {
return (
title="显示Toast"
onPress={() => showToast('来自原生模块的消息!')}
/>
);
};
```
### 处理回调与Promise
```java
// Android原生代码
@ReactMethod
public void fetchData(String url, Promise promise) {
try {
String result = // 网络请求
promise.resolve(result);
} catch (Exception e) {
promise.reject("FETCH_ERROR", e.getMessage());
}
}
```
```jsx
// JavaScript调用
const fetchDataFromNative = async () => {
try {
const data = await ToastModule.fetchData('https://api.example.com');
console.log('收到数据:', data);
} catch (e) {
console.error('请求失败:', e);
}
};
```
## 高级主题与最佳实践
### 线程处理策略
在原生模块中正确处理线程至关重要：
- **UI操作**：必须在主线程执行（Android使用`getCurrentActivity().runOnUiThread`，iOS使用`dispatch_async(dispatch_get_main_queue())`）
- **耗时操作**：使用工作线程（Android的`AsyncTask`，iOS的`dispatch_async`）
- **线程安全**：避免共享资源竞争，使用同步机制
### 事件发射
原生模块可以向JavaScript发送事件：
```java
// Android
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("onDataReceived", data);
```
```objectivec
// iOS
[self sendEventWithName:@"onDataReceived" body:data];
// 必须覆盖supportedEvents方法
- (NSArray *)supportedEvents {
return @[@"onDataReceived"];
}
```
```jsx
// JavaScript监听
import { NativeEventEmitter } from 'react-native';
const eventEmitter = new NativeEventEmitter(ToastModule);
useEffect(() => {
const subscription = eventEmitter.addListener('onDataReceived', (data) => {
console.log('收到事件:', data);
});
return () => subscription.remove();
}, []);
```
### 性能优化技巧
1. **批量操作**：减少跨桥通信次数（如一次传递数组而非多次调用）
2. **数据序列化**：优化传输数据大小（避免传递大型对象）
3. **原生缓存**：在原生端缓存常用数据
4. **懒加载**：仅在需要时初始化模块
5. **TurboModules**：使用React Native 0.68+的TurboModules架构提升性能
### 调试与错误处理
**调试技巧：**
- Android：使用`Log.d("TAG", "message")`查看Logcat输出
- iOS：使用`RCTLogInfo(@"message")`或Xcode断点
- 跨平台：React Native的`console`模块会输出到两个平台
**错误边界处理：**
```jsx
// JavaScript错误处理
const callNativeMethod = async () => {
try {
await NativeModule.riskyOperation();
} catch (error) {
// 处理原生模块抛出的错误
Crashlytics.recordError(error);
showErrorFallbackUI();
}
};
```
## 结论
React Native原生模块开发是连接JavaScript与平台原生代码的强大工具。通过合理使用原生模块，我们可以突破React Native的局限，实现高性能和平台特有功能。随着React Native架构的演进，特别是JSI（JavaScript Interface）和TurboModules的引入，原生模块的性能和开发体验将持续提升。掌握原生模块开发技术，将使开发者能够构建更强大、更高效的跨平台应用。
> 关键要点总结：
> 1. 原生模块适用于平台API访问、性能优化和硬件交互场景
> 2. Android和iOS平台有不同的实现规范
> 3. 线程管理和事件处理是高级应用的关键
> 4. TurboModules代表了原生模块的未来发展方向
---
**技术标签：**
React Native, 原生模块开发, Android原生开发, iOS原生开发, JavaScript桥接, 跨平台开发, 移动应用性能优化, React Native架构, JSI, TurboModules
