React Native環境配置和簡單使用

# 前言

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

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

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

瞭解 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下載安裝
  • 打開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包地址
  • 方式二：npm info react-native
    
  • 方式三：項目中查看當前 npm 包版本
    
• 升級或降級 npm 包的版本
  • 命令行：npm install --save [email protected]
• 更新項目 templates 文件（新的npm包會包含更新運行在 react-native init 命令生成的一些動態文件，比如 init 創建項目的時候會生成 iOS 和 Android 的子項目，我們可以通過下麵的命令獲取最新代碼）
  • 命令行：react-native upgrade

WebStom設置React Native代碼提示

從 gitHub 上下載xml插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

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