工具
xcode+cocoapods+RN+webStorm
一、xcode+cocoapods
新创建一个以cocoapods管理的xcode项目
二、RN
①、软件安装--只在首次安装配置即可
Homebrew#
Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R \whoami` /usr/local`
Node#
使用Homebrew来安装Node.js.
React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。
brew install node
React Native的命令行工具(react-native-cli)#
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g react-native-cli
如果你看到EACCES: permission denied
这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local
目录的所有权:
sudo chown -R \whoami` /usr/local`
其它
其中官网参考链接中还有一些推荐安装的工具,可以选择性安装之。
②、RN项目配置
进入工程根目录中,执行npm init(中间输入的参数,后期可以直接在json文件中进行更改)
执行npm install react --save初始化react
执行npm install react-native --save初始化react-native
(以上步骤结束后,会在项目中生成node_modules文件夹、package.json文件)
在xcode项目中,配置podfile,增加内容如下:
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket'
#Add any other subspecs you want to use in your project
]
执行pod install刷新pods文件
注意:提交git要一起提交node_modules 文件夹,否则打包找不到文件。
三、webStorm
①、配置
RN开发基于js+原生语言,原生语言iOS的话基于xcode,js则目前选择webStorm。
使用之前,需要设置它使之支持js语法,点击webstorm--preferences,将js language version设置为JSX Harmony即可识别JSX。
QQ20160921-0@2x.png
若使之支持RN语法,需要借助一开源插件:ReactNative-LiveTemplate,根据提示安装
②、使用
使用webStorm打开xcode项目,选择rn相关的文件,开发即可。
使用入门
以上配置结束后,就可以进行正常的开发了。
在项目根目录下(或项目中的其它目录亦可)创建index.ios.js文件(对应package.json中的main)
vim index.ios.js
插入内容(仅做测试)
QQ20160921-0.png
项目引入
导入#import "RCTRootView.h"
其中引入js代码有2种方式
①、方式一:jsbundle导入
运行
$ react-native bundle --entry-file ./index.ios.js --bundle-output ./js/main.jsbundle --platform ios --assets-dest ./bundle --dev false指令,将js文件打包成jsbundle方式。
目录结构.png
组织结构.png
②、方式二:直接导入
综合两种方式实现截图如下:
QQ20160921-3.png
启动rn服务
在终端或者在webstorm终端界面中运行运行$ react-native start,启动本地服务器。(编译js文本为bundle文件)
运行xcode项目
效果展示
QQ20160921-4.png
注意,若出现错误,可能是因为iOS9以后的系统限制http访问的原因,在info.plist中简单设置为:
NSAppTransportSecurity
NSExceptionDomains
localhost
NSTemporaryExceptionAllowsInsecureHTTPLoads