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相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，便可關注。