react Native从入门到深入一 RN嵌套在原生项目

很多时候，在开发过程中，不是全部都用RN来开发，更多时候是嵌套使用。看了官方的文档和中文翻译文档都不是很详细，自己找了很多，做了一遍，现详细步骤记录下来，以便大家不用那么困难。

第一步  环境搭建

注意

1.Xcode可以正常编写程序并运行。

2.终端必须会。

撒干货开始

1.配置package.json安装依赖包文件

cd到根目录，执行

npm init     创建 跟着提示一步步来主要需要写的是名字和版本，其他的可以默认选项

name 字符串不支持大写字母

成功之后会出现基本的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 重载 一下。