ReactNative iOS原生模块开发流程

2018-04-26 本文已影响686人 lg8294

最近要开发 RN 的组件，查看了官方原生组件的开发说明文档，发现侧重点是在编写原生代码这部分，缺少环境的搭建流程，所以查了一些资料，整理一个环境搭建的流程。

整个流程基本上分以下几步：

创建 RN 项目（用来调试模块）；
创建原生模块项目；
RN 项目中引入原生模块项目；
开发原生模块（参照 RN 官方文档）；
发布上线；

创建 RN 工程

首先通过 CLI 创建一个 RN 项目，在开发原生模块的过程中会用这个工程来进行调试。

react-native init ExampleModule

创建原生模块项目

通过网上的资料，我发现创建原生模块项目有2种简便方法，通过2种方式创建项目，可以省去手动配置项目的工作，极大的减少可能出错的环节。

通过 RN 的 CLI 创建

#react-native new-library --name <yourLibraryName>

命令执行后，可以在./Libraries下面找到创建的原生项目，这种方式只支持 iOS 项目。

通过 react-native-create-library 来创建

安装react-native-create-library；

npm install -g react-native-create-library

进入你要存放原生模块的目录（建议是 Libraries），执行下面的命令；
```
react-native-create-library <yourLibraryName>
```

这种方式创建的项目中包含iOS、Android、Windows三个文件夹，对应三个平台。如果是开发跨平台的模块，建议使用这种方式。

RN 项目中引入原生模块项目

这里只是开发 iOS 模块，所以直接使用方式一创建原生模块项目。ExampleModule 是 RN 项目，MyFirstRNModule 是原生模块。现在文件结构如下图：

15245383675028.jpg

用 xcode 打开 ExampleModule/ios 下的 iOS 工程，添加 MyFirstRNModule 到Libraries 文件夹下，如下图：

15245390726193.jpg

15245391049749.jpg

链接 MyFristRNModule 到 ExampleModule 工程中：

15245394525224.jpg

15245394784670.jpg

至此，RN 项目就引入了原生模块项目。

编写原生模块代码

这一部分按照 RN 官方教程来编写原生模块代码。

在这里只做个简单的测试，看是否可以调用到这个模块。

打开MyFirstRNModule.m文件，添加代码，然后使用模拟器运行；
15245402331526.jpg
修改 RN 项目中的App.js；
15245408646258.jpg
选中模拟器，cmd+R 刷新界面；
15245409912857.jpg
点击 test 按键，注意观察 xcode 的调试窗口，这时会打印一条 test 信息出来，说明模块运行正确；
15245415527519.jpg

发布上线

编写好原生模块之后，就可以发布到 npm，这样其他人就可以下载使用。

创建模块的 GitHub 仓库
修改模块的入口文件

目录下已经有了 MyFirstRNModule.ios.js 可以作为入口文件，但是发布到 npm 上的包都是以 index.js 作为入口文件的，因此创建 index.js，将原生模块导出。
```
import React, { NativeModules } from 'react-native';
module.exports = NativeModules.MyFirstRNModule;
```
发布到 npm

发布之前，需要先编辑 package.json 来配置原生模块的信息，如下：
```
{
  "name": "my-first-rn-module",
  "version": "0.0.1",
  "main": "index.js",
  "keywords": "react-native",
  "author": "lg",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/lg8294/MyFirstRNModule.git"
  },
  "homepage": "https://github.com/lg8294/MyFirstRNModule",
  "bugs": {
    "url": "https://github.com/lg8294/MyFirstRNModule/issues"
  }
}
```
注：其中的 name 要采用 kebab-case 格式，否则发布的时候会报错。
如果编写的原生模块依赖于其他的原生模块，需要在 package.json 添加依赖关系，这里由于没有相关依赖，所以不需要添加：
```
"dependencies": {
}
```
如果没有npm的账号，先注册一个账号，这个账号会被添加到npm本地的配置中，用来发布module用。
```
npm adduser
Username: your name
Password: your password
Email: yourmail@gmail.com
```
发布：
```
npm publish
```
有时候，有些文件没必要发布，例如 MyFirstRNModule.ios.js 和 MyFirstRNModule.android.js 文件，可以通过 .npmignore 忽略它。例如我这里 .npmignore 文件内容如下：
```
.git
.gitignore
MyFirstRNModule.ios.js
MyFirstRNModule.android.js
```
添加 README

README 文件是非常重要的，如果没有 README 文件，别人看到这个组件，根本就不知道它是用来做什么的。所以，很有必要添加一个 README 文件，这个文件需要告诉别人这个原生组件是干什么的、如何安装、API、使用手册等等。

参考文档

React Native 原生模块库打包指南
 ReactNative之原生模块开发并发布——iOS篇
 如何创建React Native iOS原生模块