RN入门配置-iOS客户端

2016-09-21 本文已影响4436人 PanPan1127

工具

xcode+cocoapods+RN+webStorm

一、xcode+cocoapods

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

二、RN

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

参考连接: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之IDE选择和配置

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方式。

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

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

②、方式二：直接导入

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

QQ20160921-3.png

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

QQ20160921-4.png

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

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