工具

xcode+cocoapods+RN+webStorm

一、xcode+cocoapods

新创建一个以cocoapods管理的xcode项目

二、RN

①、软件安装--只在首次安装配置即可

参考连接:rn环境搭建

1. 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`

2. Node#
   使用Homebrew来安装Node.js.
   React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本，完全满足要求。
   brew install node

3. 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`

4. 其它

其中官网参考链接中还有一些推荐安装的工具，可以选择性安装之。

②、RN项目配置

1. 进入工程根目录中，执行npm init（中间输入的参数，后期可以直接在json文件中进行更改）

2. 执行npm install react --save初始化react

3. 执行npm install react-native --save初始化react-native

（以上步骤结束后，会在项目中生成node_modules文件夹、package.json文件）

4. 在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
]

5. 执行pod install刷新pods文件

注意：提交git要一起提交node_modules 文件夹，否则打包找不到文件。

三、webStorm

①、配置

参考：RN之IDE选择和配置

1. RN开发基于js+原生语言，原生语言iOS的话基于xcode，js则目前选择webStorm。
   使用之前，需要设置它使之支持js语法，点击webstorm--preferences，将js language version设置为JSX Harmony即可识别JSX。
   

   QQ20160921-0@2x.png

2. 若使之支持RN语法，需要借助一开源插件：ReactNative-LiveTemplate,根据提示安装

②、使用

使用webStorm打开xcode项目，选择rn相关的文件，开发即可。

使用入门

以上配置结束后，就可以进行正常的开发了。

1. 在项目根目录下（或项目中的其它目录亦可）创建index.ios.js文件(对应package.json中的main)

vim index.ios.js

2. 插入内容（仅做测试）

   
   QQ20160921-0.png

3. 项目引入

1. 导入#import "RCTRootView.h"

2. 其中引入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方式。

常用于生产环境:(命令亦可：curl http://localhost:8081/index.ios.bundle -o main.jsbundle )

目录结构.png
组织结构.png

②、方式二：直接导入

综合两种方式实现截图如下：

4. 启动rn服务
5. 在终端或者在webstorm终端界面中运行运行$ react-native start,启动本地服务器。(编译js文本为bundle文件)
6. 运行xcode项目
7. 效果展示

注意，若出现错误，可能是因为iOS9以后的系统限制http访问的原因，在info.plist中简单设置为：

<key>NSAppTransportSecurity</key>
<dict> 
  <key>NSExceptionDomains</key> 
  <dict>
       <key>localhost</key> 
    <dict>
       <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
      <true/>
     </dict>
   </dict>
</dict>