React Native 簡稱 RN 是 FaceBook 釋出的跨平臺開發框架，它的設計理念是：使用 React Native 開發，既擁有 Native 的良好人機互動體驗，又保留了 React 開發效率。

一、為什麼選擇 React Native

在 React Native 釋出的短短几年之內，已經有很多使用 RN 技術開發的 App 上線， 其中就有我們團隊開發4個 App。它的優點非常多。

開發效率高，成本低

通常情況開發一款 App 需要釋出在 Android 和 iOS 兩個平臺，導致的結果就是一個 App 有兩個團隊、兩套程式碼，介面幾乎一樣。

React Native 使用 JSX 語法開發，所謂 JSX，是 JavaScript 的語法擴充套件，讓我們在 JavaScript 中可以編寫類似 HTML 一樣的程式碼。React Native 利用 JavascriptCore 引擎對 JS 檔案進行解析，並利用 Bridge 對映到對應的 Native 方法和 UI 控制元件。相當於使用一套程式碼即可完成之前兩套程式碼完成的工作量，只需根據不同平臺稍作修改即可。

不僅如此，RN 程式碼量甚至比之前一套都少， Debug 超級方便，一邊開發一邊看效果再也不是夢。

快速熱更新

RN 生成的 JS 檔案，只要不涉及原生功能的增減，已經發布的 App 完全不需要重新安裝即可完成新版功能的上線，使用者只需開啟 App 就能體驗到最新的 App，省去了下載重灌的各種麻煩，把 App 的更新做到了和網頁更新一樣的方便快捷。

使用 RN 就能達到既有原生的所有能力，又有類似瀏覽器上的快速更新能力，同時還可以接入各種定製好的網頁，將 App 的自由度提高到一個非常高的地步。

支援混合開發

React Native 允許開發者在 React Native 擅長的領域使用 React Native 開發，而在 React Native 不能實現的領域或者已經有原生程式碼實現好的領域直接使用原生程式碼。React Native 程式碼開發的模組與原生程式碼開發的模組可以雙向通訊、無縫連結。

二、 建立 React Native專案

React Native 環境搭建稍微麻煩一點，不過 React Native 官網把詳細的步驟都已經列出來了，這裡就不再重複介紹了。

英文官網內容是最新的，建議由能力的檢視英文官網，搭建環境方式有兩種，這裡直接選擇 Building Projects With Native Code 方式，如圖所示。

按照官網搭建好 React-Native 專案，請確保電腦上已經滿足下面的這些條件：

• nodejs：RN 的所有庫都是從 npm 上安裝的，請確保電腦上已經安裝了 npm，可以使用npm -v來檢視當前是否已安裝。
• react-native-cli：這個通常用作 RN 的初始化和啟動模擬器等，使用 NPM 可以安裝到電腦上。
• Python2：RN 裡面有些指令碼是使用 Python 寫的。
• JDK 1.8：Android 專案需要使用 JDK 1.8，請在電腦上安裝好。
• Android Studio：除錯以及編譯安卓程式碼需要使用到，請在安裝 Android Studio 之後安裝好 Android SDK 以及模擬器，在安裝好 IED 之後請下載好需要使用到的 Android SDK，下載 SDK 預設是連結國外伺服器，會比較慢，最好把下載地址替換成國內的幾個下載源。
• Xcode（僅 iOS 專案中）：安裝了 Xcode 才能使用 iOS 模擬器，有些和 Android 不一樣的效果可以單獨除錯。
• Git：後面的專案會加入到 Git 中，使用 Git 做版本管理的好處不言而喻。Mac系統上安裝Xcode後自動也會安裝好Git。
• Watchman（僅 Mac 系統用到）：Watchman 用來監聽檔案變動等，Mac 下必須安裝 Watchman。
• WebStorm 或者 VSCode ： 這是主流的 RN 開發工具，本人採用 WebStorm，該軟體和 Android Studio 操作方式幾乎一樣，方便 Android 開發者無縫過度。

建立專案

執行命令

react-native init TShop

可以初始化一個 RN 專案，專案名稱是 TShop ，這一步需要執行一段時間，耐心等待。

下面指令分別是執行 Android 和 iOS 程式

react-native run-android

react-native run-ios

三、 熟悉專案

我們簡單熟悉下 RN 專案結構

TShop
    |-- android
    |-- ios
    |-- node_modules
    |-- index.js
    |-- App.js
    |-- package.json

• android 和 ios 對應的就是原生程式碼，分別可以通過 Android Studio 和 Xcode開啟，目前裡面自動生成一些初始化程式碼，專案用到混合開發的時候會用到。
• node_modules 裡面內容非常多，這是我們專案依賴檔案。
• package.json 是專案說明檔案。裡面可以看到

...
"dependencies": {
  "react": "16.3.1",
  "react-native": "0.55.3"
},
...

這段程式碼說明了當前專案的依賴。

• index.js 是程式的入口檔案，裡面引入了 App.js 檔案 ，並註冊程式。

import { AppRegistry } from 'react-native';
import App from './App'; // 引入了 App.js

// 註冊程式
AppRegistry.registerComponent('TShop', () => App);

• App.js 裡面存放執行的示例程式碼。程式碼片段1-1

// 匯入React 和 RN 控制元件
import React, {Component} from 'react';
import { 
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

// 根據不同的平臺載入不同的程式碼
const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
// ES6 語法
export default class App extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
            </View>
        );
    }
}

// 樣式檔案
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

程式碼片段 1-1

參考程式碼片段1-1 ，App 就是當前程式展示的內容。RN 使用 JSX 語法，其實就是對 JS 語法進行了擴充套件，內建了一大堆標籤。

這裡面的寫法有點類似於網頁寫法， render() 函式是用來渲染介面的，<View> 控制元件巢狀著三個<Text/> 控制元件，預設垂直排列，每個控制元件的樣式又來源於下面的 styles 常量，styles裡的寫法類似於 CSS 。

我們修改下 render() 函式，讓裡面顯示的內容變化下，看看效果。

export default class App extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    這是 React Native 基礎程式碼
                </Text>

            </View>
        );
    }
}
// 樣式檔案
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 30, // 字型大小
        textAlign: 'center', // 文字居中對齊
        color: 'red', // 字型顏色改成紅色
    }
});

程式碼片段1-2

我們只保留了一個 <Text>控制元件，文字顏色改成紅色。執行react-native run-ios 或者 react-native run-android 執行程式。

如果已經通過上面指令執行過一次，如果沒修過 Android 或 iOS 原生程式碼，可以通過熱載入的方式直接更新程式：

• Android 模擬器雙擊 R，
• iOS 模擬器點選 command + R即可。

調出模擬選單方式：

• Android 模擬器 command/ctrl+ M
• iOS 模擬器 command+D

執行結果如圖所示：

佈局檢查

在 Android 模擬器上執行可以開啟 Android Studio 中自帶的佈局檢查工具， Tools -> Layout Inspector 檢視當前佈局。 如下圖， 可以發現 RN中定義的 Text 元件在 Android 中轉換成了 ReactTextView 控制元件，而這個控制元件繼續 Android 中的 TextView。 可以證明 RN 把 JSX 轉換成了原生控制元件，提高了執行效率。

檢視程式碼

如果你已經從 GitHub 上克隆了這個程式的 Git 倉庫，那麼可以執行 git checkout 1a 簽出程式的這個版本。 需要執行 npm install 或 yarn install

大家關注我的公眾號—— 於連林 公眾號ID: likedev，回覆RN 即可檢視視訊地址。視訊每週都會更新，大家保持關注。

讀者討論群

對內容，程式碼有疑問的讀者，可以加入討論群：274328657 交流，加群務必備註：RN學習。