环境配置：React Native 开发环境配置 For Android

   <p style="text-align: center;"><img src="https://simg.open-open.com/show/06dc03fe058f4dd358c2e5265e91bc61.jpg"></p>    <p>（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，不要耽误大家宝贵时间）</p>    <p>React Native 是非死book开源的一个项目，非死book希望可以用写 Web App 的方式去写 Native App。它可以让我们用JS和React来开发应用，使用React Native可以通吃Android 和 IOS ,以及Web,仅仅需要一份业务逻辑代码就可以来创建我们的应用。</p>    <h2><strong>起源</strong></h2>    <p>React Native 是由 React 衍生出来的，而 React 起源于 非死book 的内部项目，因为非死book对市场上所有 JavaScript MVC 框架，都不太满意，就决定自己写一套，用来架设自己的 Instagram 的网站。等做出来以后，发现这套东西很不错，而且好用，就在2013年5月开源了。</p>    <p>而衍生的 React Native 项目，希望用写 Web App 的方式去写 Native App。这样同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机上。非死book最早发布的关于React Native是针对IOS的，而React Native for Android是在去年也就是2015年9月15日开源发布的。现阶段React Native的体验虽然已经很不错了，只能说很接近原生应用，但是还是不能达到Native App的体验。所以它很火，将来的事，我们将来说，但是目前已经非常火了，多门技术，多条路。我们也应该学学了。</p>    <h2><strong>环境搭建</strong></h2>    <p>因为我用的是macbook，所以这次环境搭建是根据mac电脑来说的，不过大家放心，针对windows电脑的环境搭建，我会分享给大家一篇文章或者视频的，不会忘了你们的。</p>    <h3><strong>Homebrew安装</strong></h3>    <p>Homebrew是一款自由及开放源代码的软件包管理系统，用以简化Mac OS X系统上的软件安装过程，Homebrew以Ruby语言写成，针对于Mac OS X操作系统自带Ruby的版本。默认安装在/usr/local，由一个核心git版本库构成，以使用户能更新Homebrew。是 OS X 不可或缺的套件管理器。</p>    <p>安装之前，你可以先检查一下电脑上是否已经安装了Homebrew，检查方式如下：</p>    <p>在终端执行下列命令：</p>    <pre>  brew -v</pre>    <p>如果已经安装了，就像下图一样，显示版本号。</p>    <p><img src="https://simg.open-open.com/show/6d49bedc9e95e150093a15600cfcdf1d.jpg"></p>    <p>如果没有安装，那就可以用下面这种方式，进行安装，在终端上直接输入下面的命令即可：</p>    <pre>  ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</pre>    <h3><strong>Node.js的安装</strong></h3>    <p>Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。我们都知道React Native是需要使用js开发的，所以Node.js是必不可少的安装。</p>    <p>安装Node.js也很简单，如下：</p>    <pre>  nvm install node && nvm alias default node</pre>    <p>可能你发现了，在Terminal终端上使用的命令是nvm，如果你没有安装nvm是会提示command not found的，所以我们还得先安装nvm。</p>    <p>nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。安装方式如下：</p>    <p>我们可以通过Homebrew安装：</p>    <pre>  brew install nvm</pre>    <p>或者通过这里的方式安装，地址：https://github.com/creationix/nvm#installation</p>    <p>安装完了nvm，我们这里最好配置一下环境变量到.bash_profile文件，因为如果不配置的话，容易出现这个错误 <strong>nvm command not found</strong> 。</p>    <p>配置方式如下：</p>    <pre>  export NVM_DIR="/Users/loonggg/.nvm"  [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm</pre>    <p>检查是否安装好了node和nvm我们可以通过如下方式：</p>    <pre>  bogon:~ loonggg$ node -v  v5.10.1  bogon:~ loonggg$ npm -v  3.8.3</pre>    <h3><strong>安装watchman 和 flow</strong></h3>    <ul>     <li> <p>Watchman 是 非死book 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。</p> </li>     <li> <p>flow是一个Javascript静态类型检查器。Flow为Javascript添加了静态类型检查，以提高开发效率和代码质量。</p> </li>    </ul>    <p>安装方式如下：</p>    <pre>  brew install watchman  brew install flow</pre>    <h3><strong>安装React Native</strong></h3>    <p>我们使用npm进行安装，如下：</p>    <pre>  npm install -g react-native-cli</pre>    <p>安装完React Native之后，要想运行或者初始化一个项目，然后运行到模拟器或者真机，我们需要搭建一个Android或者ios开发环境，我这里只介绍android，相信想学习React Native的同学，电脑上都基本上有了Android的开发环境。但是可能会有坑，有一个大坑就是得配置SDK的环境变量：ANDROID_HOME。</p>    <p>SDK环境变量的配置</p>    <ol>     <li> <p>启动Terminal终端工具</p> </li>     <li> <p>输入cd ~/ 进入当前用户的home目录</p> </li>     <li> <p>创建：</p> <pre>  touch .bash_profile</pre> </li>     <li> <p>打开并编辑：</p> <pre>  open .bash_profile</pre> </li>     <li> <p>在文件中写入以下内容：export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools</p> <p>友情提示：上述路径，请换成自己电脑上的SDK所在路径</p> </li>     <li> <p>执行如下命令：</p> <pre>  source .bash_profile</pre> </li>     <li> <p>验证：输入adb回车。如果未显示command not found，说明此命令有效，环境便亮设置完成。</p> </li>    </ol>    <h3><strong>创建我们的第一个React Native应用</strong></h3>    <p>初始化项目</p>    <pre>  react-native init AwesomeProject</pre>    <p>上面的AwesomeProject这个项目名字，你可以自己随意定义，自己命名，没有限制。</p>    <h3><strong>运行项目</strong></h3>    <ul>     <li> <p>切换到AwesomeProject的主目录</p> </li>     <li> <p>运行项目命令</p> <pre>  react-native run-android</pre> </li>     <li> <p>我们使用编辑器打开和修改index.android.js文件，调出模拟器菜单键，选择重新载入 js 即可看到变化。</p> <p>启动后，模拟器效果图：</p> </li>    </ul>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/de91ee34710fd9da6b8e671813bdfd67.jpg"></p>    <p>到这里我们就把环境配置讲完了，关于windows上的安装，我会给大家发篇资料或者视频的，在公众号对话框里回复关键字：“ <strong>RN环境配置</strong> ”获取windows版的环境配置。</p>    <p> </p>    <p> </p>    <p> </p>    <p> </p>    <p>来自：http://mp.weixin.qq.com/s?__biz=MjM5NDkxMTgyNw==&mid=2653058212&idx=1&sn=2bc90e53add30551b484ec3860dfc1c0&scene=0#wechat_redirect</p>    <p> </p>