React Native探索（一）環境搭建與Hello World（Windows/Mac）

前言

目前關於React Native的教程很多，官方文件寫的也不錯，但是感覺大部分教程寫的不是很清楚，導致我各種碰壁。因此我來寫一個簡潔的教程。本篇文章基於React Native 0.43，只適用於用Windows/Mac平臺的Android開發者。

1.配置React Native

首先我們要先來安裝一些軟體，如下所示。
Chocolatey/Homebrew
Windows平臺安裝Chocolatey：
Chocolatey是一個Windows上的命令列包管理器，安裝了Chocolatey就可以通過命令列來安裝一些我們需要軟體。我們開啟cmd命令列程式使用如下命令即可。

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient)
.DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin複製程式碼

Mac平臺安裝Homebrew：
在Mac上則需要安裝Homebrew，它和Chocolatey的作用是一樣的，在終端輸入如下命令即可。

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

我的Mac系統版本是10.11.6，安裝過程中會提示按下return鍵，這時按下return鍵會提示輸入系統密碼，輸入密碼後會顯示安裝成功。
Python 2
Windows平臺安裝Python 2：
安裝完Chocolatey就可以在命令列程式使用Chocolatey來安裝Python 2。

choco install python2複製程式碼

Mac系統中自帶Python的執行環境，因此不需要安裝Python 2。
當然我們也可以直接Python官網去下載安裝，下載地址為www.python.org/downloads/。
這裡我的Windows平臺的Python版本為2.7.10。

Node.js
Windows平臺安裝Node.js：

choco install nodejs.install複製程式碼

Mac平臺安裝Node.js：

brew install node複製程式碼

同樣的也可以去Node.js官網去下載安裝，地址為nodejs.org/en/。
這裡我的Windows平臺的Node.js版本為7.8.0。Windows平臺關掉cmd命令提示符視窗，開啟Node.js command prompt（Node.js命令提示符視窗），輸入如下語句來設定npm映象以加速後面的過程，Mac平臺在終端輸入即可：

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和react-native-cli，Yarn是Facebook提供的替代npm的工具，可以加速node模組的下載。react-native-cli則用於執行React Native的建立、初始化、更新專案、執行打包服務（packager）等任務。在Windows或者Mac平臺輸入如下語句來安裝它們。

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複製程式碼

2.配置Android Studio

這裡假設你是一個Android開發者並且已經安裝了Android Studio，我們要確保SDK安裝正確，開啟Android Studio的SDK Manager，在SDK Platforms視窗中勾選Show Package Details，並確保已經安裝了下圖打勾的選項。

接下來在SDK Tools視窗中勾選Show Package Details，在Android SDK Build Tools列表中勾選23.0.1，勾選最底部的Android Support Repository。

3.使用React Native建立並執行專案

接下來我們建立和執行專案，在Windows或者Mac平臺的命令提示符視窗進入需要儲存React Native專案的檔案目錄，輸入如下語句來建立專案：

react-native init firstProject複製程式碼

這時會在儲存檔案中生成名為firstProject的專案檔案，我們用Android Studio載入firstProject檔案中android檔案。
接下來執行SDK的模擬器，這裡我的模擬器為Android 6.0版本的Nexus6。最後輸入如下命令來將React Native專案執行到模擬器中：

cd firstProject
react-native run-android複製程式碼

這時模擬器執行效果如下圖所示。

這時我們可以通過連續兩次按下鍵盤的R鍵來重新整理介面來檢視你的最新修改。通過搖動手機（真機）或者按下menu鍵(CTRL+M/⌘+M)來進入React Native的開發者選項。
關於模擬器這裡建議使用Genymotion，它所佔用的記憶體要遠小於SDK自帶的模擬器。

4.Hello World

我們將index.android.js 檔案的程式碼清空並加入如下程式碼。

import React, { Component } from 'react';//1
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {//2
  render() {
    return (
      <Text>Hello world</Text>//3
    );
  }
}
AppRegistry.registerComponent('firstProject', () => HelloWorldApp);//4複製程式碼

這段程式碼是ES6編寫的，ES6是JavaScript語言的下一代標準。不瞭解的同學可以買一本阮一峰的《ES 6標準入門》，電子書地址為es6.ruanyifeng.com/。
在註釋1處做了兩件事，一是為react元件指定預設的輸出，並命名為React，二是從react元件中匯入Component 變數。
註釋2處定義了HelloWorldApp 元件並繼承自Component ，接著在render方法中return了註釋3處的內容，這是一種在JavaScript中嵌入XML結構的語法，叫做JSX，JSX編寫的內容會顯示在介面中。註釋4處用AppRegistry模組來告知React Native哪一個元件被註冊為整個應用的根容器。
接著我們連續兩次按下鍵盤的R鍵來重新整理介面，這樣"Hello world"就顯示在介面中。

參考資料
搭建開發環境
React Native開發錯誤警告處理總結
React Native學習筆記2：Android環境搭建
《ES 6標準入門（第二版）》

---

歡迎關注我的微信公眾號，第一時間獲得部落格更新提醒，以及更多成體系的Android相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，即可關注。