React Native iOS 原生模块制作全攻略

前端

2023-09-17 15:42:59

各位前端老铁们，都 2022 年了，不会还有人不会制作 React Native iOS 原生模块吧？为了让大家都能成为真正的全栈工程师，今天我就手把手带大家从零开始制作一个 iOS 原生模块，并分享一些我踩过的坑，保证让你们少走弯路。

本文将基于 react-native-builder-bob 这一工具来构建 iOS 原生模块，并重点介绍整个流程中遇到的各种问题以及解决方案。

前期准备

在开始之前，我们需要确保已经安装了以下工具：

Node.js 和 npm
Xcode
CocoaPods
react-native-cli

如果缺少任何工具，请先进行安装。

创建新项目

首先，创建一个新的 React Native 项目：

npx react-native init MyApp

进入项目目录：

cd MyApp

安装依赖

接下来，安装必要的依赖项：

npm install react-native-builder-bob

创建原生模块

使用 react-native-builder-bob 创建一个新的原生模块：

npx react-native-builder-bob init MyNativeModule

这将在 ios/MyApp 目录下创建一个名为 MyNativeModule 的文件夹，其中包含所有必要的头文件、源文件和桥接文件。

编写原生代码

打开 ios/MyApp/MyNativeModule/MyNativeModule.h 和 ios/MyApp/MyNativeModule/MyNativeModule.m 文件，编写原生代码。

在头文件中声明方法：

- (void)multiply:(int)a withB:(int)b withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject;

在源文件中实现方法：

- (void)multiply:(int)a withB:(int)b withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject
{
    int result = a * b;
    resolve(@(result));
}

注册原生模块

在 ios/MyApp/AppDelegate.m 文件中，注册原生模块：

#import "MyNativeModule.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    RCTBridge *bridge = ...;  // 获取桥接器实例

    [bridge registerModule:[MyNativeModule new] withName:@"MyNativeModule"];

    return YES;
}

使用原生模块

在 React Native 代码中，使用原生模块：

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.multiply(2, 3).then(result => {
  console.log(result);  // 输出：6
});

遇到的坑

在构建 iOS 原生模块的过程中，我遇到了以下几个坑：

Xcode 找不到头文件： 确保在 Xcode 的 Header Search Paths 中添加了 React Native 的头文件路径，例如 $(SRCROOT)/../node_modules/react-native/ios。
桥接文件找不到类： 确保在桥接文件中导入了原生模块的头文件，例如 #import "MyNativeModule.h"。
原生方法未注册： 确保在 AppDelegate 中注册了原生模块，例如 [bridge registerModule:[MyNativeModule new] withName:@"MyNativeModule"];。
方法签名错误： 原生方法的签名必须与 React Native 中调用的方法签名一致。
Promise 未解决： 确保在原生方法中使用 resolve 和 reject 来解决或拒绝 Promise。