React Native 新、旧架构集成原生模块方式

React Native新旧架构支持信息

ReactNative版本	最低支持Android版本	最低支持Ios版本	支持架构	备注
0.75及以下	sdk23（安卓6.0及以下）	Ios 13.4	旧架构
0.76及以上	sdk24（安卓7.0及以上）	Ios 15.4	新架构	到现在写文章的0.82版本

新、旧架构性能对比的文章挺多的就不多介绍了，性能优先肯定选新。

新架构集成原生模块

1、Expo原生模块

1.1 生成Expo方式的 app原生模块，运行下面命令，会在项目根目录下创建如下图所示目录：

# 创建Expo方式的 app原生模块
npx create-expo-module@latest --local

1.2 安装Expo模块

默认的Expo项目是没有安卓和Ios目录的，此时需要运行下面命令：

# 生成ios和安卓目录
npx expo prebuild --clean

如果已经prebuild出安卓和ios目录的，ios需要下面命令安装到pods内：

npx pod-install

1.3 此时ios打开expoapp.xcworkspace可以看到Development Pods内安装进来的模块，可以在这里进行修改，运行到手机或模拟器

2、社区cli搭建的项目方式

集成模块方式有几种，比如：Turbo Module、Nitro Module，可以使用官网推荐的社区模块模版，性能最好的是Nitro Module方式。

# 创建最新的模块lib
npx create-react-native-library@latest react-native-awesome-module

旧架构

1、创建旧架构的原生模块，选择 Legacy Native module

# 创建旧架构的模块lib，选择 `Legacy Native module `
npx create-react-native-library@0.49.8 test-mod

创建完成以后，会在项目根目录创建一个modules/你的模块目录，ios同上面Expo安装模块步骤一样。

2、旧架构如果想偷懒，甚至可以直接在Android或Ios目录内，直接创建对应的原生模块代码，暴露出来给RN使用，新时代了 原生模块代码可以使用AI生成，这样就不需要使用create-react-native-library库来创建模块了，下面是示例代码：

import { NativeModules, Platform } from 'react-native';

const LINKING_ERROR =
  `The package 'TestNative' doesn't seem to be linked. Make sure: \n\n` +
  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
  '- You rebuilt the app after installing the package\n' +
  '- You are not using Expo Go\n';

// 定义设备信息接口
export interface DeviceInfo {
  model: string;
  systemVersion: string;
  name: string;
  systemName: string;
}

// 定义原生模块接口
interface ITestNative {
  hello(input: string): Promise<string>;
  multiply(a: number, b: number): Promise<number>;
  getDeviceInfo(): DeviceInfo;
  delayedMessage(message: string, delay: number): Promise<string>;
  getCurrentTimestamp(): Promise<number>;
  formatDate(timestamp: number, format?: string): Promise<string>;
}

const TestNative: ITestNative = NativeModules.TestNative
  ? NativeModules.TestNative
  : new Proxy(
      {},
      {
        get() {
          throw new Error(LINKING_ERROR);
        },
      }
    ) as ITestNative;

/**
 * 调用iOS原生方法，返回问候语
 * @param input 输入字符串
 * @returns Promise<string> 返回格式化的问候语
 */
export function hello(input: string): Promise<string> {
  return TestNative.hello(input);
}

/**
 * 两个数字相乘
 * @param a 第一个数字
 * @param b 第二个数字
 * @returns Promise<number> 返回相乘结果
 */
export function multiply(a: number, b: number): Promise<number> {
  return TestNative.multiply(a, b);
}

/**
 * 获取设备信息（同步方法）
 * @returns 设备信息对象
 */
export function getDeviceInfo(): DeviceInfo {
  return TestNative.getDeviceInfo();
}

/**
 * 延迟发送消息
 * @param message 消息内容
 * @param delay 延迟时间（秒）
 * @returns Promise<string> 返回延迟后的消息
 */
export function delayedMessage(message: string, delay: number): Promise<string> {
  return TestNative.delayedMessage(message, delay);
}

/**
 * 获取当前时间戳
 * @returns Promise<number> 返回Unix时间戳
 */
export function getCurrentTimestamp(): Promise<number> {
  return TestNative.getCurrentTimestamp();
}

/**
 * 格式化日期
 * @param timestamp Unix时间戳
 * @param format 日期格式（可选，默认：'yyyy-MM-dd HH:mm:ss'）
 * @returns Promise<string> 返回格式化后的日期字符串
 * 
 * @example
 * ```typescript
 * // 使用默认格式
 * const date1 = await formatDate(Date.now() / 1000);
 * // 输出: "2024-11-14 15:30:45"
 * 
 * // 使用自定义格式
 * const date2 = await formatDate(Date.now() / 1000, 'MM/dd/yyyy');
 * // 输出: "11/14/2024"
 * ```
 */
export function formatDate(timestamp: number, format?: string): Promise<string> {
  return TestNative.formatDate(timestamp, format);
}

// 导出原生模块供高级用户直接使用
export { TestNative };

相关文档链接

• docs.expo.dev/modules/get...