原生模块与桥接：10.1 原生模块概述

在React Native中，原生模块（Native Modules）是连接JavaScript代码与原生平台（iOS和Android）之间的桥梁。通过原生模块，开发者可以利用平台特有的功能和API，这使得React Native能够在跨平台开发中保持高效和灵活性。本文将详细介绍原生模块的概念、创建方法、优缺点以及注意事项。

1. 原生模块的概念

原生模块是用Java（Android）或Objective-C/Swift（iOS）编写的代码，能够被JavaScript调用。它们允许开发者在React Native应用中使用原生平台的功能，比如访问设备硬件、使用第三方SDK等。

1.1 原生模块的工作原理

React Native通过一个称为“桥接”（Bridge）的机制来实现JavaScript与原生代码之间的通信。JavaScript代码通过桥接发送异步请求，原生模块接收请求并执行相应的操作，然后将结果返回给JavaScript。

2. 创建原生模块

2.1 Android原生模块示例

2.1.1 步骤

创建原生模块类：在Android项目中创建一个新的Java类，例如MyNativeModule.java。

package com.yourapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class MyNativeModule extends ReactContextBaseJavaModule {
    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void add(int a, int b, Promise promise) {
        promise.resolve(a + b);
    }
}

注册模块：在MainApplication.java中注册模块。

import com.yourapp.MyNativeModule; // 导入模块

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyNativeModule() // 注册模块
    );
}

调用原生模块：在JavaScript中调用原生模块。

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.add(5, 3)
    .then(result => {
        console.log('Result:', result); // 输出: Result: 8
    })
    .catch(error => {
        console.error(error);
    });

2.2 iOS原生模块示例

2.2.1 步骤

创建原生模块类：在iOS项目中创建一个新的Objective-C类，例如MyNativeModule.m。

#import <React/RCTBridgeModule.h>

@interface MyNativeModule : NSObject <RCTBridgeModule>
@end

@implementation MyNativeModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(add:(NSInteger)a b:(NSInteger)b resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
    resolve(@(a + b));
}

@end

调用原生模块：在JavaScript中调用原生模块。

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.add(5, 3)
    .then(result => {
        console.log('Result:', result); // 输出: Result: 8
    })
    .catch(error => {
        console.error(error);
    });

3. 原生模块的优缺点

3.1 优点

性能：原生模块可以直接调用原生API，性能更高，尤其是在处理复杂计算或需要访问设备硬件时。
功能丰富：可以使用平台特有的功能和第三方SDK，扩展React Native的能力。
灵活性：可以根据需要选择使用原生模块，保持JavaScript代码的简洁性。

3.2 缺点

复杂性：创建和维护原生模块需要对原生开发有一定的了解，增加了项目的复杂性。
跨平台问题：需要为iOS和Android分别实现原生模块，增加了开发和维护的工作量。
调试困难：调试原生代码相对JavaScript更为复杂，可能需要使用不同的工具和流程。

4. 注意事项

异步处理：原生模块的调用是异步的，确保正确处理Promise的resolve和reject。
线程安全：在原生模块中，确保对共享资源的访问是线程安全的，避免潜在的竞争条件。
错误处理：在原生模块中，确保对错误进行适当处理，并通过reject返回给JavaScript。
文档和注释：为原生模块编写清晰的文档和注释，以便其他开发者理解和使用。

结论

原生模块是React Native中一个强大的特性，能够帮助开发者充分利用平台的能力。通过本文的介绍，您应该能够理解原生模块的基本概念、创建方法以及在实际开发中的应用。尽管原生模块带来了额外的复杂性，但它们的优势在于能够提供更高的性能和更丰富的功能，使得React Native应用能够更好地满足用户需求。