React Native——搭建開發環境、建立Hello World

前言

React Native(簡稱RN)從誕生以來，就受到了廣大開發者的追捧。相比於Native開發，RN開發更爲靈活，並且支持跨平臺（Android和iOS同時支持），也更方便熱更新，最重要的是它基本上可以達到與Native App同樣的渲染和體驗效果。雖然RN目前還有許多功能不夠完善，同時也存在一些兼容性問題，做爲Native開發者，咱們仍是能夠經過混合開發（RN+原生開發）的模式來規避這些坑，這樣也能兼具RN和原生開發的共同優點。

準備

對於前端工程師來講，學習RN要容易得多，可是對於原生開發者來講，學習成本仍是相對較大：

首先，你須要有必定的JavaScript基礎，對於沒有js基礎的同窗，想直接就從RN開始，那估計是至關痛苦的。
其次，React做爲RN的核心，在開始學習RN以前，至少要對React相關的基礎知識有所瞭解。

若是徹底沒有接觸過前端，想學習RN的話，建議仍是能夠先學習一下html/css、js等基礎知識，再開始React、RN的學習，這樣可能前期花費的時間和精力比較多，可是後期就要輕鬆不少，不用在學習RN的中途還要去惡補一些前端的基礎知識。

搭建開發環境

由於我使用的是Windows系統，因此下面就介紹下如何在Windows系統下搭建RN開發環境。

參考ReactNative中文網，首先咱們須要裝Python2和Node，考慮到可能chocolatey國外網站可能訪問較慢，咱們就直接衝Python官網下載Python2，下載地址：www.python.org/downloads/

下載Python2

選擇2.7.13版本，注意不要選Python2以上的版本，目前RN還不支持。而後在Node.js中文網下載最新的Node.js的msi安裝包，注意根據本身的系統位數選擇。下載地址：nodejs.cn/download/

下載Node.js

下載完成後直接安裝，安裝完成後建議設置npm鏡像以加速後面的過程：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global複製代碼

安裝Yarn、RN的命令行工具（react-native-cli），Yarn是Facebook提供的替代npm的工具，能夠加速node模塊的下載。React Native的命令行工具用於執行建立、初始化、更新項目、運行打包服務（packager）等任務。

npm install -g yarn react-native-cli複製代碼

安裝完yarn後也要設置鏡像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global複製代碼

安裝開發工具

我是作安卓開發，已經有了AndroidStudio開發工具，AndroidStudio安裝和android-sdk的配置我就不介紹了，須要注意的是android-sdk路徑的環境變量ANDROID_HOME必需要配置，若是以前沒有的須要加上。

RN的開發工具備不少，像是Atom、Sublime、WebStorm等前端開發工具都能進行RN的開發。因爲筆者長期使用AndroidStudio，因此我就用WebStrom了，由於它們都是由JetBrains出品，操做界面、快捷鍵、插件都是一致的，不須要進行二次學習。

WebStrom下載地址：www.jetbrains.com/webstorm/do…
下載安裝後，只有30天的無償使用，須要破解的話，網上有不少方式。

建立HelloWorld

打開WebStorm，點擊Create New Project建立一個新的RN工程：

選擇左側的React Native標籤，location選項爲你的工程目錄和工程名稱HelloWorld，Node interpreter和React Native選項爲默認的就行。

點擊create後，就開始構建工程了，第一次構建過程當中要去下載RN的依賴包，可能時間比較長，耐心等待。構建完成後，能夠看到RN項目的工程目錄結構：

其中有幾個比較關鍵的文件：

• -test-，爲測試文件，裏面存放一些測試用的js文件。
• android，就是一個原生的android工程項目，能夠用androidStudio打開進行原生開發。
• ios，就是一個原生的ios工程項目，能夠用xcode打開進行原生開發。
• node_module，下載的依賴庫都存放在裏面，包括React和React Native，至關於* AndroidStudio的External Libraries。
• package.json，RN工程的遠程依賴，一般是在根目錄經過命令行npm install xxxxxx --savet添加一個庫，添加完成後，會把依賴信息自動寫在package.json裏面，至關於AndroidStudio的build.gradle。
• index.android.js，這是android的React Native入口文件。
• index.ios.js，這是ios的React Native入口文件。

點擊WebStorm右上角的下拉按鈕，選擇Android：

界面上就會出現運行和調試按鈕了：

鏈接到真機，點擊執行。執行的過程當中會添加react和react-native的依賴。同時若是默認的gradle版本是你沒有使用過的話，也會自動去下載，因此耐心等待。固然最好是在執行以前經過AdnroidStudio打開RN工程下的android項目，將gradle版本修改到本地已有的版本。

運行時，在真機上可能遇到白屏狀況，須要開啓懸浮窗權限。也極有可能會出現下圖左邊的錯誤，點擊RELOAD後，又會出現右邊的fix方案：

通常的最有可能的仍是最後一種狀況，便是運行設備（真機或模擬器）與packager server沒在同一個ip，就不能用localhost了。

搖一搖手機，出現對話框：

點擊Dev Settings，進入設置界面，點擊Debug server hoset &port for device，彈出對話框，輸入本身電腦所在的局域網的ip:8081

點擊肯定後，回到主界面，搖一搖手機，再次點擊對話框中的reload，就運行成功了：

參考：
React Native 中文網
從Android到React Native開發（1、入門）