React Native 支持 iOS, Android 和 Windows 三个平台。本文我们只考虑 iOS。
首先介绍一下,RN自定义模块的目录结构为:
-android
-ios
-index.js
-package.json
-README.md
其中,
android:Android平台的原生代码
ios:iOS 平台的原生代码
index.js:自定义模块的入口(还有一种方式是定义 index.ios.js 和 index.android.js来分别作为对应平台的入口)
package.json: 自定义组件的npm包信息
README.md:相关文档说明
然后我们开始进入正题(整个过程中不要关闭终端):
首先,打开Mac的终端,进入一个RN的项目目录下,必须是在RN的项目目录下,不然会报错:
Command new-library unrecognized. Make sure that you have run npm install and that you are inside a react-native project.
没有项目的话,可以先用创建一个:
react-native init DemoProject
然后进入项目目录,执行这句话(Lib的名字可以随便起):
react-native new-library --name "DemoLib"
上述命令帮我们做了以下两件事情:
在 DemoProject/ 目录下,创建一个 Libraries/ 目录。
把我们上面创建的DemoLib 放在 Libraries/ 下面。
然后,进入Libraries/DemoLib/目录下,发现有一个工程文件DemoLib.xcodeproj,打开它,把你的代码拖入。
接着切换到终端,输入:
npm install <library-with-native-dependencies> --save
<library-with-native-dependencies>是你的DemoLib.xcodeproj所在的那一级目录,直接把Libraries/DemoLib拖到终端里就行。
然后输入:
react-native link
再打开之前新建的RN项目DemoProject,就会发现他的自工程里多了一个DemoLib.xcodeproj
至此创建自定义模块就完成了..