1. 程式人生 > >2018.10月,搭建windows下的React Native開發環境

2018.10月,搭建windows下的React Native開發環境

我是根據react native中文網教程https://reactnative.cn/docs/getting-started.html進行搭建

react native必須安裝的依賴有:Node、React Native 命令列工具、Python2 以及 JDK 和 Android Studio。(jdk安裝不做記錄)

雖然你可以使用任何編輯器來開發應用(編寫 js 程式碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

目錄

1.node.js開發環境

2.python開發環境

3.Android 開發環境

4.建立React Native專案,執行測試


(非常重要的一句話)文件原話:

注意 Node 的版本必須高於 8.3,Python 的版本必須為 2.x(不支援 3.x),而 JDK 的版本必須是 1.8(目前不支援 1.9 及更高版本)。安裝完 Node 後建議設定 npm 映象以加速後面的過程(或使用科學上網工具)。

 

1.node.js開發環境

1.下載頁面https://nodejs.org/zh-cn/

2.點選下載好的,無腦next即可完成安裝(注意選擇自己的安裝路徑,預設安裝在C盤

3.在dos視窗輸入node -v檢視node.js的版本(這裡不同配置環境變數,安裝的時候自動配置好了)

 

4.安裝完 Node 後設置 npm 映象以加速後面的過程。

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

5.Yarn、React Native 的命令列工具(react-native-cli)

Yarm是 Facebook 提供的替代 npm 的工具,可以加速 node 模組的下載。React Native 的命令列工具用於執行建立、初始化、更新專案、執行打包服務(packager)等任務。

npm install -g yarn react-native-cli

檢視npm配置命令:npm config list

6.安裝完 yarn 後同理也要設定映象源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之後就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名

 

2.python開發環境

1.python所有版本下載頁面 https://www.python.org/downloads/release

2.點選,也是無腦next,記得選自己的安裝路徑。

3.配置環境變數

  (1) 右鍵點選"計算機",然後點選"屬性"

  (2) 然後點選"高階系統設定"

  (3) 選擇"系統變數"視窗下面的"Path",雙擊即可

  (4) 選擇新建,新增python安裝路徑即可(我的E:\instell\python)

4.python --version檢視版本(注意這裡是兩個--)

3.Android 開發環境

android環境步驟繁多,專門寫了一篇帖子詳細記錄了安裝和配置android studio的步驟:https://blog.csdn.net/Destiny_strive/article/details/83095967

4.建立React Native專案,執行測試

1.cd到你想建立的目錄下:

2.執行 react-native init firstProject ( firstProject 是你的專案名)

構建完成:

可以在對於目錄下檢視:

3.cd到你的新建的專案下執行:react-native run-android,(執行react-native run-android前保證android模擬器已經打開了,或者手機已經連線電腦並且打開了usb除錯)注意第一次執行時需要下載大量編譯依賴,耗時可能數十分鐘。此過程嚴重依賴穩定的翻牆工具,否則將頻繁遭遇連結超時和斷開,導致無法執行。(我沒翻牆的)

 

 

中途會彈出一個node.js的視窗,不要關閉

模擬器載入完成(這裡我修改了初始化專案的文字和顏色):