rn源码ios_RN入门配置-iOS客户端

工具

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