在iOS项目中导入React Native

 React Native的势头越来越猛，但凡提及Native，皆是一片666，大有替代原生APP的趋势，也许Native有着大好形势，但目前看来，尚有太多不足。

开始    

在iOS原生项目中动态使用React Native定制界面

       如果你已经是一个iOS开发者，继续原生项目开发可能是更好的选择，而

React Native，也许更加适合原生项目中部分动态页(例如广告、咨询详情)的编写，方便页面的多端重用和即时修改。

1、安装环境

       如果你之前只接触过iOS开发，使用终端也仅限于CocoaPods、Git，那么环境配置一定会费一番劲。

· 安装Node.js

Node.js官方下载：https://nodejs.org/en/download/

在官网可以下载到对应系统的Node安装包，非常简单。

（推荐使用nvm安装管理Node.js，能够更好的控制node的版本
nvm github地址：https://github.com/creationix/nvm
中文安装方法：http://www.tuicool.com/articles/vmi6Zv7）

· 安装CocoaPods

CocoaPods是iOS开发最常用的依赖管理工具。

2、iOS原生项目

          我们需要准备一个简单的原生项目SimpleNative，选用的语言是Swift。

        在Main.storyboard中初始化项目框架：导航控制器内有两层视图控制器，在第一层Controller中居中设置一个button用来push，第二层Controller空白待用。

3、初始化React Native的node依赖

（1）初始化node

         在终端中，定位到iOS项目的根目录，运行npm init，

         然后一路回车即可。

       （注意：node项目的命名不能使用大写字母，所以指定name时输入simple-native 后回车）

         执行完毕之后，在项目根目录下生成了一个package.json文件，类似于

CocoaPods的Podfile文件，用来管理项目依赖。

（2）安装React Native

        在项目根目录下运行npm install --save react-native，

      （注意：由于国内的网络问题，npm安装比较缓慢，可以使用淘宝npm镜像替代）

       安装完毕之后，根目录下会生成node_modules文件夹，里面保存了react和react-native的依赖；

         --save参数会在package.json文件中保存react和react-native的依赖声明。

4、初始化CocoaPods

          在项目根目录下，运行pod init

       在项目根目录下生成了Podfile，用任何编辑器打开，编写React Native的依赖。

       在项目的target下，pod导入React，路径指向了当前目录下'./node_modules/react-native'，然后还有一堆乱七八糟的子依赖。(一个都不能少！)

        运行pod install安装依赖，本地安装速度很快。

5、绑定Native的视图

（1）导入Native View

        由于使用的是Swift项目，我们需要一个OC-Swift桥接文件导入Native的类，在桥接文件夹导入#import <RCTRootView.h>。

（2）设置Native View

        点击SimpleNative.xcworkspace打开iOS项目，新建一个ReactView继承于UIView，并为这个view添加RCTRootView的子视图。

          然后在第二层控制器中居中显示一个View，并绑定为ReactView。

       再次运行项目，点击push按钮后，就会见到第一个红彤彤的Native错误了，但是这表示已经成功绑定了Native。

6、启动Native服务

        在ReactView的初始化中，我们为rootView指定了bundleURL和moduleName，其中moduleName既是当前项目名，而bundleURL，就要一步一步实现了，步步都是坑。?

（1）新建index.ios.js

        在项目根目标下，新建ReactComponents文件夹，并在文件夹中新建

index.ios.js文件，在js文件中写入react代码。

        官方推荐的简单代码为：

（2）启动node服务

        建好了js文件，需要启动一个端口为8081的服务将index.ios.js打包成

index.ios.bundle。

        在项目根目录下运行：

分解一下命令：

1.将新建的ReactComponents文件夹目录赋值到JS_DIR上，注意需要是全路径！！！

2.进入node_modules/react-native。

3.绑定JS_DIR会监听ReactComponents文件夹下的文件，然后npm run start启动native的node服务。

4.三行命令最好用()包装起来，可以避免运行后定位到node_modules/react-native文件夹下。

       再次运行iOS项目，当然也可以直接在模拟器上 Commend + R刷新，就会获得另一个错误。。。

（3）开启Http支持

        苹果在iOS9之后默认关闭了对HTTP的支持，需要打开以访问localhost的服务。

        在iOS项目的Info.plist文件中，加入：

       加入后，plist看起来是这样的：

7、最后

       重新运行iOS项目，点击push按钮后，在绿色加载条之后(第一次打包编译比较慢)，就能看到native的界面了，在搜索栏输入内容后回车，能够简单搜索Github内容。（需要在index.ios.js添加Github搜索页代码）

由于附件上传限制，本文中有部分图片内容无法显示，详情请见：http://mp.weixin.qq.com/s?__biz=MzI5ODI3NzY2MA==&mid=100000234&idx=3&sn=55423a2f8c7eff7c6a28d74718f6269e#rd

敬请谅解！

欢迎大家一起交流。

扫描以下二维码，获取更多更精美文章！

关注我们微信订阅号（ uniguytech100） 与服务号（uniguytech），获取更多更精美文章！

也欢迎加入【大家技术网讨论QQ群】，群号码：256175955，请备注你个人的介绍！让我们一起聊聊it的那些事！

转载于:https://my.oschina.net/uniguy/blog/673431