这里只介绍Mac 上的环境搭建,其他环境搭建请参考:
http://facebook.github.io/react-native/docs/getting-started.html 。
上面有所有环境搭建:
1、安装Homebrew
安装Homebrew是为安装Node.js做前提准备。
安装命令:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"```
注意上面的URL必须是最新的URL,最新的URL获取地址是:http://brew.sh/index_zh-cn.html,在安装过程中会出现“Press RETURN to continue or any other key to abort”的一个提示,直接回车键,可能需要输入密码验证,验证完成通过之后,便会继续安装,直到结束,一下为部分效果图:
![18BA02B8-77FD-475F-882D-A0732397C4EC.png](http://upload-images.jianshu.io/upload_images/2310529-992969d036e688b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
注:可以通过下面命令查看Homebrew是否安装成功:
brew -v
2、安装Node.js
下载双击安装即可:
下载地址:
https://nodejs.org/en/
Node.js 需要 4.0 及其以上版本。安装好之后,npm 也有了。
至于Node.js安装之后,关于一个"Hello World"的教程请参考http://www.cnblogs.com/heron/p/4090169.html
注:教程中使用的var申明中‘'’号需要区分 同样不可以是中文,中文应该需要规定编码格式,不然会抛出一个“Uncaught SyntaxError: Unexpected token ILLEGAL”的异常;
3、安装React Native 命令行工具
React Native 命令行工具可以创建和初始化React Native的项目,还有其他打包等功能
npm install -g react-native-cli
如果看到有错误:permission denied, 请在命令前面加上sudo,一般都需要加sudo ,比如:
sudo npm install -g react-native-cli
下面为安装成功的效果图:
![QQ20160718-0@2x.png](http://upload-images.jianshu.io/upload_images/2310529-d21acf5f96959600.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、安装Xcode
Xcode 7.0 或更高版本下载地 址:
https://developer.apple.com/xcode/downloads/
注:一定要是7.0以上版本:
![QQ20160718-1@2x.png](http://upload-images.jianshu.io/upload_images/2310529-3dc42f1be9af07fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5、安装 watchman 和 flow
我们首先来安装watchman,安装watchman的命令是:
brew install watchman
效果如下:
![QQ20160718-0@2x.png](http://upload-images.jianshu.io/upload_images/2310529-0d372a979dd06485.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
接下来我们来安装flow,安装命令是:
brew install flow
效果如下:
![QQ20160718-1@2x.png](http://upload-images.jianshu.io/upload_images/2310529-186f7ba0d5e0c0ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到后面安装的这两个文件都很小,只有几M;
6.初始化一个项目
在某个目录,使用终端命令创建一个项目:
命令如下:
react-native init AwesomeProject
创建项目时候,可能会耗时很久,也有可能会出现一个下载npm包失败的错误,我安装时候出现了一个shasum check failed for的错误,至于这个错误的答案我在这里附上;http://blog.csdn.net/enson16855/article/details/23299787,希望可以帮到。创建项目完成之后,我们大开我们创建的项目目录,我的目录如下:
![QQ20160720-0@2x.png](http://upload-images.jianshu.io/upload_images/2310529-f5f6c9a843bb2b44.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到是分为Android和ios两个的目录,可以直接导入相应的项目进行运行,Android项目是属于Android Studio的项目。当然也可以相应的使用命令运行:
Android:
react-native run-android
IOS:
react-native run-ios
一下为ios的运行效果图:
![QQ20160720-1@2x.png](http://upload-images.jianshu.io/upload_images/2310529-45641f5c41181c8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好了,以上为React Native的环境搭建的全部,有的步骤来自于其他博客,有的详细但没有截图,有的有截图但是不够详细,所以在这里记录下来,遇到的问题也有提到,若遇到的问题可在底部留言,我们共同讨论!