React Native项目github址:
https://github.com/facebook/react-native
React Native项目官网文档:
http://facebook.github.io/react-native/docs/getting-started.html
1 (三)React Native配置安装
特别声明:facebook官网说当前react native欢迎是需要OS X,不过我也看到了有人通过windows系统配置该环境哈~大家有兴趣可以百度搜索一下。
1.1 Homebrew安装
Homebrew是OS X不可获取的套件管理器,我们可以通过它获取并且安装很多组件,安装方式如下:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然后通过命令行执行brew -v进行检查brew是否已经安装成功。整体截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/67f79241476fe75b139bf956c7d1bde2.png)
1.2 Node.js安装
1.2.1 安装nvm
1. 打开github官网https://github.com/,输入nvm搜索,选择creationix/nvm,打开
![](https://i-blog.csdnimg.cn/blog_migrate/d7730dd3820887419a837e44c4ea76c1.png)
2. 找到Install script,复制
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
![](https://i-blog.csdnimg.cn/blog_migrate/b247df727d56862f778595249f117d4e.png)
3. 打开终端,把第2步复制的添加sudo权限,粘贴到终端里
![](https://i-blog.csdnimg.cn/blog_migrate/24db0e137d3ddfb7cf158508c09e0147.png)
4. 此时nvm虽然安装好了,但仍然不能用,因为还没有添加环境变量,nvm安装好以后会提示添加环境变量到,第三步图中提示自己添加一下的代码便是,如下图,如此nvm就可以用了
![](https://i-blog.csdnimg.cn/blog_migrate/45a8421e3b910938709241ad2885f93d.png)
1.2.2 安装Node.js
第二部分: 安装Node.js,根据官网文档我们直接命令行执行如下命令即可完成完成:
nvm install node && nvm alias default node
安装截图如下:
该会进行安装Node.js最新版本,并且会给我们打个别名,方便使用。通过nvm我们可以安装多个版本的Node.js,并且可以非常轻松的选择不同的版本进行切换使用。
![](https://i-blog.csdnimg.cn/blog_migrate/c495abbaf97cc52a854bc03ada926440.png)
【注意】如果现在采用是Node5.0版本的版本,官网是推荐安装npm 2,该版本比npm 3速度更加快。在安装完Node之后,命令行运行npm install -g npm@2安装即可。
1.2.3 安装watchmam
第三部分:安装watchmam,该用于监控bug文件,并且可以触发指定的操作,安装方式如下:
brew link autoconf
brew link automake
brew install watchman
安装截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a92f7246761ac5aec67f458b69da5759.png)
1.2.4 安装flow
第四部分:安装flow,
flow是一个 JavaScript的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误,官网:http://www.flowtype.org/具体命令为:
brew install flow
安装截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/899f10b1d75d0f25adc708d65f471a5f.png)
1.3 原生开发环境安装:
针对iOS开发,我们只需要安装Xcode7.0或者7.0以后版本,该可以通过AppStore进行下载安装。
针对Android开发,Android环境配置网上非常多了,我相应看这篇文章的朋友电脑上面基本都有Android开发环境的了~针对安装详细(点击进入参考文章)。
1.4 ReactNative安装
现在就是最后一步,也是最激动人心的时刻到了,我们使用命令行运行如下命令安装React Native:
sudo npm install -g react-native-cli
安装截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0d9ab13d8adfc4bc813426f889454c6f.png)
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作,下面我们来进行一个实例演示React Native项目的效果。
2 (四)React Native第一个应用(AwesomeProject)
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作,下面我们来进行一个实例演示React Native项目的效果。ReactNative第一个AwesomeProject,就不是HelloWorld啦。
首先执行如下命令,生成一个工程:
react-native init AwesomeProject
运行截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/af3629835526f6fc6c325db8f304ce90.png)
目录结构如下:
![](https://i-blog.csdnimg.cn/blog_migrate/3b26b11cae2d8abf66fb41f67d0d5b5f.png)
我们仔细看上面的目录,会发现该该生成android和ios两个平台的原生项目,大家有兴趣可以打开android和ios目录看一下,里边就是一个Android Studio和Xcode创建的项目。其中index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。另外还有一个node_modules文件夹,该为Node.js存放和管理npm包得,也包含React Native框架文件。
查看项目部分代码:index.android.js如下:
![](https://i-blog.csdnimg.cn/blog_migrate/d975c54ab89883bb0423ad233b2043f2.png)
2.1 运行iOS应用:
①. 命令行执行cd AwesomeProject,路径切换到项目主目录;
②. 点击ios/AwesomeProkect.xcodeproj进行运行Xocde;
③. 使用编辑器进行打开index.ios.js进行相关修改,然后运行应用即可。
2.2 运行Android应用:
①. 命令行执行cd AwesomeProject,路径切换到项目主目录;
②. 命令行执行react-native run-android进行加载运行android 应用。
③. 同样可以使用编辑器进行打开和修改index.android.js文件,接着通过菜单按钮选择ReloadJS来进行刷新修改;
运行截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/2923a03fc20107fbd06c72f6a3e06a3b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f61b466f3863262ea2f068438e8a0a5c.png)
这些步骤,命令执行完之后,那么我们第一个应用也完美运行啦,具体看如下效果!
![](https://i-blog.csdnimg.cn/blog_migrate/c1447bb9ae1615af4ac71e8cfc94bed3.png)
3 IDE
React Native常用IDE推荐与安装配置
http://blog.csdn.net/u014484863/article/details/51554428
3.1 Nuclide常规安装以及配置
Nuclide是Facebook专门为React开发的IDE,官网推荐。但是Nuclide是在Atom基础上面提供了一系列统一的插件。所以我们需要首先安装Atom。
Nuclide项目官方地址:https://github.com/facebook/nuclide
3.1.1 Atom安装
Atom是一个开源版本的编辑器,非常强大以及完美体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:https://atom.io/去官网下载安装即可。
3.1.2 Nuclide安装(不推荐安装方式)
Atom已经安装成功了,下面开始安装Nuclide,直接打开Atom软件,点击Atom-> Preferences打开Setting,然后点击install,输入nuclide-installer搜索,进行下载即可,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/43bae6a9b8ccd025672c2649d6c336ae.png)
这种方式我们是选择插件下载进行安装,另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):
apm installnuclide
最后重启一下Atom即可。不过这两种方式都不太推荐大家使用,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom会很卡,然后提示找不到Nuclide相关模块。
3.1.3 Nuclide安装(强烈推荐安装方式)
Nuclide项目官方地址:https://github.com/facebook/nuclide,我们知道该项目是Facebook官方推荐的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单:
git clone https://github.com/facebook/nuclide.git
cd nuclide
npm install
apm link
终端安装截图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/b7d5bc40089273682ebc8f289f7f67e1.png)
这样就安装完成,可以开始写ReactNative项目代码了。至于项目初始化以及编译运行方法,大家可以看前一篇文章哦!这里不再赘述。
3.1.4 Nuclide使用
React Native开发之IDE(Atom+Nuclide)安装,运行,调试
http://blog.csdn.net/hello_hwc/article/details/51612139
4 参考文档
Android React Native讲解专题
http://blog.csdn.net/developer_jiangqq
Mac搭建React Native环境遇到的坑
http://www.jianshu.com/p/b97cf4040b82
在Mac上搭建ReactNative开发环境(iOS && Android)