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的那些事!