iOS React Native创建自定义模块

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


至此创建自定义模块就完成了..

猜你喜欢

转载自blog.csdn.net/youshaoduo/article/details/79670703