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

xiaoyanger發表於2019-03-04

前言

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/

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

下載完成後直接安裝，安裝完成後建議設定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入口檔案。