React Native簡介

React Native是Facebook 在2015 大會上推出的基於 JavaScript 的開源框架。React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。開發者只需學習一種語言就能輕易為任何平臺高效地編寫程式碼。React Native著力於提高多平臺開發的開發效率 —— 僅需學習一次，編寫任何平臺(Learn once, write anywhere)

開發環境配置

安裝Homebrew

Homebrew：Mac系統的包管理器，用於安裝NodeJS和一些其他必需的工具軟體。

開啟終端輸入

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

如果遇到相關許可權問題。執行下面命令修復

sudo chown -R `whoami` /usr/local

安裝Node.js

brew install node

設定npm映象

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

Yarn、React Native的命令列工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務等任務。

npm install -g yarn react-native-cli

安裝完yarn後同理也要設定映象源：

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

如果遇到相關許可權問題。執行下面命令修復

sudo chown -R `whoami` /usr/local

安裝Android Studio 和Genymotion、Git

React Native目前需要Android Studio2.0或更高版本。
Java Development Kit [JDK] 1.8或更高版本
配置ANDROID_HOME環境變數
export ANDROID_HOME=~/Library/Android/sdk
將Android SDK的Tools目錄新增到PATH變數中
這個就不多說了，給出我的mac的環境變數配置

Watchman

Watchman是由Facebook提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的效能

brew install watchman

Flow

Flow是一個靜態的JS型別檢查工具

brew install flow

安裝React Native開發工具WebStorm

還有其他很多開發工具，建議使用WebStorm，WebStorm和Android studio有很多相似的地方，上手會很快，網上有破解版，自行破解安裝

測試安裝

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

或者用開發工具直接新建React Native應用

注：以上內容來自React Native中文網，安裝過程中可能會出現各種各樣的問題，不要著急，一步一步來，遇到問題找google或者直接百度。

在Android模擬器上及Xcode模擬器上的執行截圖

執行過程中可能會出現8081埠被佔用的情況
在終端中輸入

//檢視8081端口占用情況：lsof -i tcp:8081
//去除佔用：kill pid（具體數字）

Android模擬器：

iOS裝置：