很多时候,在开发过程中,不是全部都用RN来开发,更多时候是嵌套使用。看了官方的文档和中文翻译文档都不是很详细,自己找了很多,做了一遍,现详细步骤记录下来,以便大家不用那么困难。
第一步 环境搭建
注意
1.Xcode可以正常编写程序并运行。
2.终端必须会。
撒干货开始
1.配置package.json安装依赖包文件
cd到根目录,执行
npm init 创建 跟着提示一步步来主要需要写的是名字和版本,其他的可以默认选项


成功之后会出现基本的json样式,可以在根目录中创建成功package.json文件

2.添加JS环境
通过npm install --save react
npm install --save react-native
运行之后 根目录下多了 node_modules文件夹:

3.添加启动
打开生成的的package.json文件,添加符合
"start" : "node node_modules/react-native/local-cli/cli.js start"

4.创建Podfile文件
cd 到iOS工程的根目录
pod install 创建Podfile文件,这边包括所需要的react-native依赖库在此配置初始化内容如下:

对你需要的组件进行配置:

cd到根目录
pod install
pod成功:

5.创建index.iOS.js(rn的入口函数)
touch index.ios.js
穿件index.ios.js文件,使用webstorm 编写
简单方法就是去react-native中copy一份,更改名称就好名字就是package.json里边的name一致。
6.编写代码调用RN
在你需要调用的页面的点击事件中,建立连接

运行点击之后出现:

原因是没有开启服务。
需要开启服务器。 cd的本工程的react-native的文件目录中,
执行npm start 开启服务器。
然后刷新出现:

根据提示说是package.json 错误。
仔细查看,可以找到问题。修改之后 npm install 重载 一下。
网友评论