前言

學習本系列內容需要具備一定 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下載安裝
- 打開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

github 下載的項目運行不了

其實這是因爲下載的項目自動忽略了node文件夾內所有的內容，因爲如果電腦內裝的版本和作者使用的版本不同，那麼也會運行不了，既然這樣乾脆就不託管，由下載項目的用戶自己進行配置，那怎麼配置呢？這邊我們來講下：
打開終端，進入我們下載的項目根目錄下：
```
cd 下載的項目根目錄路徑
```
接着,安裝npm包就可以了：

  npm install

等到安裝完畢後，我們就可以運行項目了。

WebStom設置React Native代碼提示

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

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

黑森林工作室

發佈了80 篇原創文章 · 獲贊 249 · 訪問量 18萬+

私信關注

React Native環境配置和簡單使用

前言

瞭解 React Native

React Native 開發注意事項

React Native 開發環境配置

正式安裝 React Native

安裝 iOS 和 Android 開發環境

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

工程目錄結構分析

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

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

如何查看和修改代碼

管理 React Native 版本

github 下載的項目運行不了

WebStom設置React Native代碼提示

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

CoreLocation 定位

HTML5快速入門（三）—— 標籤綜合運用

swift 2.2 語法（下）

Touch ID使用

HTML5快速入門（四）—— JavaScript

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結