手记

React Native Mac环境搭建

这里只介绍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的环境搭建的全部,有的步骤来自于其他博客,有的详细但没有截图,有的有截图但是不够详



作者:罗罗罗罗罗sky
链接:https://www.jianshu.com/p/9f4453243294


0人推荐
随时随地看视频
慕课网APP