一.环境配置
1.安装Homebrew
Homebrew
是Mac系统的包管理器用于安装Node.js
和一些其他必需的工具软件。/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注:在Max OS X 10.11(El Capitan)版本中,homebrew
在安装软件时可能会碰到/usr/local
目录不可写的权限问题。可以使用下面的命令修复:
|
|
2.安装Node.js
使用HomeBrew
来安装Node.js
。注:React Native目前需要NodeJS 5.0
或更高版本。本文发布时Homebrew
默认安装的是最新版本,一般都满足要求。brew install node
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!(这一步不是必须的)yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:
|
|
3.安装Yarn、React Native的命令行工具(react-native-cli)
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源:yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied
这样的权限报错,那么请参照上文的homebrew
译注,修复/usr/local
目录的所有权:
sudo chown -R whoami
/usr/local
3.Xcode设置
React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。
4.推荐安装Watchman
Watchman
是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。brew install watchman
5.安装Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。brew install flow
二.通过React Native命令来安装测试
1.新建一个目录存放React Native命令行创建的iOS工程,打开终端cd到该目录下执行以下命令:react-native init AwesomeProject
AwesomeProject为项目名称
2.cd进去该项目目录下执行以下命令:react-native run-ios
便会发现模拟器弹出,项目运行起来了。也可以直接打开工程运行项目。
3.用WebStorm打开该工程目录,修改index.ios.js,然后在iOS模拟器中按下com+R便可以刷新APP查看最新修改了。注意:由于React Native使用的语言是JSX,在WebStorm里面一开始是没有代码提示的,不过这里有个插件,安装一下就好了:
JSX代码提示插件
三.在现有的工程中嵌入React Native安装测试
上一部分介绍了怎样通过React Native来创建项目工程,这一部分将介绍如何在现有的项目工程中嵌入React Native。注:在此之前应该新建一个文件夹用于存放项目,然后再进去这个文件夹新建名为ios的文件夹,然后把你现有的项目工程拷贝到ios文件夹里面。
1.安装cocoaPods
打开终端安装就好了,这个用的太多了,不详解了。不会的可以自行百度。
2.添加package.json文件
在终端进入到名为iOS所在的文件夹里面执行以下命令:vim package.json
再编辑这个文件,一般包含以下内容:
|
|
这个文件就相当于iOS里面的info.plist配置文件。此处的"name": "NumberTileGame",NumberTileGame替换成自己的iOS工程名
3.安装node_modeules
在刚刚的目录下执行以下命令:npm install
此步会根据上面的package.json
文件安装node_modules
4.创建index.ios.js (rn的入口函数)
同样的在刚刚目录下执行以下命令:touch index.ios.js
编写内容:
|
|
注意:node_modeules,package.json,ios,index.ios.js这四个文件应该是在同一目录下。
5.安装React Native库
使用rn开发App并不是所有的rn框架都必须使用,而Subspecs为我们提供了选择,通过Subspecs列表我们可以进行框架选择。说白了,就是Subspecs就是菜单,吃哪些菜点哪些菜。
例如想要用到AppRegistry
, StyleSheet
, View
和其他的rn核心包,需要导入Core subspec;Text组件需要导入RCTText
subspec
; Image
组件需要导入RCTImage subspec
。这些配置需要在下面的Podfile中设置
node_modules/react-native/React.podspec
。此文件中声明了react-native框架的各种包。
先进入ios文件夹,再进入工程文件夹里面,执行:pod init
命令执行完后会在(ios/)目录下创建Podfile文件,所需要的react-native依赖库在这里配置,初始内容如下:
|
|
对Podfile进行修改,根据需要的组件进行配置。如下:
|
|
最后执行命令安装:pod install
6.修改iOS代码
打开工程,在你想要用React Native展示的上一个VC里面引入#import <RCTRootView.h>
新建一个VC用于展示,我这里新建了一个CLWebVC。
代码如下:(点击按钮跳转到React Native页面)
|
|
最后编译项目,可能会出现以下2个错误:
(1)RCTScrollView.m 报错Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?
解决办法:@implementation RCTCustomScrollView
{
__weak UIView *_dockedHeaderView;
RCTRefreshControl *_refreshControl; // 加入此行
}
(2)会报以下错误:
|
|
解决办法:
导入 libc++.tbd
依赖包即可。
至此项目便运行起来了!
参考资料:
官网报错解决方法
官网环境配置步骤
嵌入到现有项目步骤