前言

• 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習

• 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝

• 文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至 簡書 檢視 也希望喜歡的朋友可以點贊，謝謝

更新公告：

更新內容：
- 新增 github 下載的專案執行不了 這小節（之前忘記寫了，抱歉）

瞭解 React Native

• 大家都知道，開發原生 App 的成本很高，但是目前基於原生開發仍然是必需的，隨著 HTML5 的出現，我們可以使用 Web 開發，雖然能夠實現在所有有瀏覽器的平臺上使用並且支援試試熱部署，但是在體驗方面仍無法超越原生 App ，那麼有沒有成本較低，又比較好的解決方案呢？答案就是 Native 相對於 Web，Native 有下面幾點優點

  • Native 的原生控制元件有更好的體驗（目前認為最大的優勢）
  • Native 有更好的手勢識別
  • Native 有更合適的執行緒模型（Web Worker 也可以解決這部分問題，但是在圖形解碼、文字渲染上仍然沒辦法多執行緒渲染，這樣就會影響 Web 展示的流暢性）
  • Native 的流暢度目前和原生的保持在同一層次（在優化好的前提下）

• React Native 是 Facebook 在 F8 大會開源的，在不到一年的時間內成為手機端必不可少的開發模式，像國內Pad版的QQ空間、淘寶等都是使用 React Native 開發的，其中做得比較好的當屬淘寶

• React Native 設計理念就是即擁有 Native 的使用者體驗，又保留 React 的開發效率
• 開發者可以靈活使用 HTML 和 CSS佈局，使用 React 語法構建元件，實現 H5, iOS, Android 多端的程式碼複用，大概結構如下圖

React Native 開發注意事項

• 目前React Native 在 iOS 上僅僅支援 iOS7 及以上作業系統，Android 僅支援 Android4.1 及以上作業系統，github下載地址 官方文件
• React Native 的版本更新速度特別快，如果沒有比較好的 JavaScript 基礎，下列的建議還是必要參考的
  
  • 對於部分複雜的應用，考慮原生 + React Native 混合開發方式

React Native 開發環境配置

• 在安裝 React Native 之前我們需要先配置一下所需的開發環境，具體詳細見下面

• 環境要求

  • 安裝 Homebrew（ Homebrew 是 OSX 的套件管理器，我們可以通過它獲取並安裝很多需要的元件
    
    • 安裝方式：開啟 Mac 的終端 → 貼上命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    • 驗證是否安裝成功：開啟 Mac終端 → 貼上命令 brew -v，出現類似下列提示表示安裝成功

  

• 安裝 WatchMan（該外掛用於監控bug檔案和檔案變化，並且可以出發指定的操作）

  • 安裝方式：開啟Mac的終端 → 貼上命令 brew install watchman
  • 驗證是否安裝成功：待看到類似以下的提示表示安裝成功

  

• 安裝 Flow（flow 是一個 JavaScript 的靜態型別檢查器，方便找出程式碼中可能存在的型別錯誤）安不安裝看個人，推薦安裝

  • 安裝方式：開啟Mac的終端 → 貼上命令 brew install flow
  • 注意事項：（如果提示 command not found,需要在命令前加上sudo獲得最高許可權） - 驗證是否安裝成功：待看到類似以下的提示表示安裝成功

  

• 安裝 npm 和 Node.js

  • Node.js 最好安裝4.0及更高版本，Node 內包含了 npm，所以直接下載Node.js安裝
  • 下載方式：選擇各自系統版本下載

  

正式安裝 React Native

• 安裝 React Native

  • 安裝方式：開啟Mac的終端 → 貼上命令 npm install -g react-native-cli
  • 注意事項：（如果提示command not found或者出現一大堆error提示的,在確保已經安裝npm的情況下需要在命令前加上 sudo 獲得最高許可權）

  

• 驗證是否安裝成功：

  

安裝 iOS 和 Android 開發環境

• iOS需求：Xcode7及以上更高版本

• Android 需求

  • 下載安裝最新版Android studio
    
    • 方式一：可以安裝 Android studio 省略下面的步驟（推薦）
    • 建議提前修改下 hosts，要不稍後下載sdk特別慢
      
      • 命令列：sudo sudo vi /etc/hosts/ → 新增203.208.46.146 dl.google.com
        45 203.208.46.146 dl-ssl.google.com → :wq 儲存退出
  • 方式二：(比較麻煩，需要配置)
    
    • 安裝 Android SDK
      
      • 安裝方式：brew install android-sdk
      • 驗證是否安裝成功：

  

• 定義 Android_HOME 環境變數

  • 確保 Android_HOME 環境變數指向已經安裝的 Android SDK 目錄（路徑~/.bashrc,~/.bash_profile或者終端所用的其它配置檔案中增加下面的內容）
    
    
    

      # 如果你是通過Homebrew安裝SDK的，則加入下列路徑
      export ANDROID_HOME=/usr/local/opt/android-sdk
      # 否則加入下列路徑
      export ANDROID_HOME=~/Library/Android/sdk
  

• 設定SDK

  • 開啟Android SDK Manager（Mac使用者在終端下輸入 android）→ 選中以下專案
    
    
    

      Android SDK Build-tools version 23.0.1（這個必須版本嚴格匹配23.0.1）        
      Android 6.0 (API 23)
      Local Maven repository for Support Libraries(之前叫做Android Support Repository)
  

• 具體設定看下面的動態圖（這邊我就只安裝常用的）
  

• 安裝 Genymotion（Genymotion 是第三方模擬器，比起Google官方的模擬器更易設定且效能更好。但是，它只針對個人使用者免費）

  • 開啟Genymotion，如果沒有安裝VirtuaIBox，會提示安裝
    
  • 建立一個模擬器並啟動
  • 按下Mac快捷鍵 cmd + M 可以開啟開發者選單（在安裝並啟動了React Native應用後可用）

測試 React Native 等各項功能是否正常

• 生成新工程

  • 開啟 Mac 的 終端 → 貼上命令 react-native init 專案名稱(這邊我們就用react-native init TestRN)，成功後會出現以下提示
    
    

  • 注意事項：這邊需要注意的是，速度快慢和網路情況有關（React-Native命令列需要從npm官方源下載程式碼會遇上麻煩，可以將npm倉庫源替換成國內映象）

    • 方式：開啟 Mac 的終端 → 貼上下面命令
      
      • npm config set registry https://registry.npm.taobao.org
      • npm config set disturl https://npm.taobao.org/dist

工程目錄結構分析

• 現在我們的新工程(TestRN)已經配置好了，那麼生成的檔案都在哪裡呢？不知道上面的圖中有沒有發現，其實已經提示我們路徑就是如下圖示記出來的位置
  

• 開啟我們的TestRN，我們可以看到預設生成了 iOS 和 Android 兩個平臺的原生專案

• 除了這些之外，還有 index.ios.js 和 index.android.js （這就是入口），node_modules資料夾是為Node.js存放和管理npm包資源，也包含React Native框架檔案
  

在 iOS 上執行第一個 React Native 應用

• 使用 Xcode 開啟我們 iOS 資料夾中的工程

• 執行工程檔案（不管 iOS 還是 Android，在開發階段都需要在系統上啟動一個HTTP服務 —— Debug Server，預設執行在8081埠，APP通過它載入js）

• 注意事項：這個視窗不要關閉
  

• 執行效果

  

在 Android 上執行第一個 React Native 應用

• 方式一：如果是安裝了 Android studio 的朋友可以直接使用它執行

• 方式二：命令列開啟專案主目錄（我這邊路徑為/Users/yeshaojian/TestRN）:cd /Users/yeshaojian/TestRN → 命令列：react-native run-android → 第一次執行的話會下載一些必要的 SDK，時間比較久，所以只能耐心等待

• 注意事項：這個視窗不要關閉
  

• 執行效果

如何檢視和修改程式碼

• 我習慣使用 WebStrom 這個 HTML 開發神器，這邊就以這款神器為例

• 目錄結構
  

• 這邊就以 iOS 為例，我們點選index.ios.js就可以檢視程式碼了，接下來看看大概部分

  

  

  

  

• 修改程式碼（我們將 Welcome to React Native! 修改成 hello Word！）

    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        hello Word！
                    </Text>
                    <Text style={styles.instructions}>
                    To get started, edit index.ios.js
                    </Text>
                    <Text style={styles.instructions}>
                    Press Cmd+R to reload,{'\n'}
                    Cmd+D or shake for dev menu
                    </Text>
                </View>
            );
        }
    }

• 在模擬器上使用 cmd + R 就可以重新整理了

  

管理 React Native 版本

• 因為 React Native 經常更新，我們開發中也經常需要控制它的版本庫，來做到適配各種條件下的開發，那麼如何檢視和控制版本，在網上搜了一些資料整理後感覺下面的方式還是比較方便的分享給大家

• 檢視本地的 React Native 版本

  • 命令列：react-native --version
    

• 更新本地的 React Native 的版本

  • 命令列：npm update -g react-native-cli

• 查詢 react-native 的 npm 包最新版本

  • 方式二：npm info react-native
    
  • 方式三：專案中檢視當前 npm 包版本
    

• 升級或降級 npm 包的版本

  • 命令列：npm install --save [email protected]

• 更新專案 templates 檔案（新的npm包會包含更新執行在 react-native init 命令生成的一些動態檔案，比如 init 建立專案的時候會生成 iOS 和 Android 的子專案，我們可以通過下面的命令獲取最新程式碼）

  • 命令列：react-native upgrade

github 下載的專案執行不了

• 其實這是因為下載的專案自動忽略了node資料夾內所有的內容，因為如果電腦內裝的版本和作者使用的版本不同，那麼也會執行不了，既然這樣乾脆就不託管，由下載專案的使用者自己進行配置，那怎麼配置呢？這邊我們來講下：

• 開啟終端，進入我們下載的專案根目錄下：

  cd 下載的專案根目錄路徑

• 接著,安裝npm包就可以了：

  npm install

• 等到安裝完畢後，我們就可以執行專案了。

WebStom設定React Native程式碼提示

• 安裝
  
  • 將ReactNative.xml複製到 ~/Library/Preferences/WebStorm10/templates(就是webStorm的安裝的目錄) → 如果沒有 templates資料夾，我們可以自己新建一個，然後重啟 WebStrom