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

NiZerin發表於2020-02-09
React NativeWindowsMac

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 官網去下載安裝，下載地址為https://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 官網去下載安裝，地址為https://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 --globalnpm 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 --globalyarn 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，並確保已經安裝了下圖打勾的選項。

VYrWJ1.png

接下來在 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 firstProjectreact-native run-android

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

VYrRiR.png

這時我們可以通過連續兩次按下鍵盤的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標準入門》，電子書地址為http://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” 就顯示在介面中。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

By: Laravel-China 寧澤林
MyBlog: nizer.in

相關文章