React Native 环境配置

(一)React Native介绍

        React Native  For Android是伟大的互联网公司Facebook与2015年9月15日发布的，该可以让我们广大开发者使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验，所以这边fackbook更加强调的是learn once,write everywhere，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。

React Native项目github地址:https://github.com/facebook/react-native

React Native项目官网文档:http://facebook.github.io/react-native/docs/getting-started.html

(二)React Native配置安装

   2.1.Homebrew安装

    Homebrew是 Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

     注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

   2.2.使用Homebrew来安装node.js

brew install node

    安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。 

npm config set registry https://registry.npm.taobao.org --global 

npm config set disturl https://npm.taobao.org/dist --global

   2.3.安装watchmam(该用于监控bug文件，并且可以触发指定的操作)

brew install watchman

  2.4. Flow安装（是一个静态的JS类型检查工具）

brew install flow

  2.5.原生开发环境安装:

   针对iOS开发，我们只需要安装Xcode 7.0或者7.0以后版本，该可以通过App Store进行下载安装

   2.6.Yarn、React Native的命令行工具（react-native-cli）

    Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运 行打包服务（packager）等任务。   

npm install -g yarn react-native-cli

    如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：    

sudo chown -R `whoami` /usr/local

(三)React Native第一个应用(AwesomeProject)

   经过以上的三个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。React Native第一个AwesomeProject，就不是HelloWorld啦。

首先执行如下命令,生成一个工程:

react-native init AwesomeProject

3.1.运行iOS 应用:

①.命令行执行cd AwesomeProject,路径切换到项目主目录

②.点击ios/AwesomeProkect.xcodeproj进行运行Xocde

③.使用编辑器进行打开index.ios.js进行相关修改，然后运行应用即可。

3.2.运行Android应用:

①.命令行执行cd AwesomeProject,路径切换到项目主目录

②.命令行执行react-native run-android进行加载运行android 应用。

③.同样可以使用编辑器进行打开和修改index.android.js文件，接着通过菜单按钮选择Reload JS来进行刷新修改

恭喜！你已经成功运行并修改了你的第一个React Native应用。