1. 程式人生 > >關於官網配置react native 的步驟與坑

關於官網配置react native 的步驟與坑

安裝JDK

Java的網官下載JDK並安裝。請注意選擇86還是64位版本。

推薦將JDK的倉目錄加入系統PATH環境變數。

安裝Android SDK

可以單獨安裝Android SDK,也可以通過Eclipse ADT或者Android Studio一併安裝。推薦使用Android Studio,以下說明會預設以Android Studio的方式說明。請注意選擇x86還是x64版本。

然後進入SDKManager(可通過Android Studio選單工具-Android-SDK Manager),確保以下專案已經安裝並更新到最新:

  • 工具/ Android SDK工具

  • 工具/ Android SDK平臺工具

  • Tools / Android SDK Build-tools(23.0.1)(這個必須版本嚴格匹配23.0.1)

  • Android 6.0(API 23)/ SDK平臺(1)

  • 附加/ Android支援庫

  • 額外/ Android支援儲存庫

推薦使用騰訊Bugly的映象加速下載。檢視說明

推薦將SDK的平臺工具子目錄加入系統PATH環境變數。

最後,把ANDROID_HOME環境變數設定為你的sdk所在目錄。

安裝git for windows

這裡下載安裝,安裝過程中注意選擇"Run Git from Windows Command Prompt"

安裝的Python

官網下載並安裝python 2.7.x(3.x版本不行)

安裝的node.js

官網下載的node.js的官方5.x的版本或更高版本。

建議設定NPM映象以加速後面的過程(或使用科學上網工具)。

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

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

安裝反應本地命令列工具

npm install -g react-native-cli

建立專案

進入你的工作目錄,執行

react-native init MyProject

並耐心等待數(或數十)分鐘。

此時有坑,會報錯:Cannot find entry file index.android.js in any of the roots,

原文在此

此時先進到專案裡:C:\Users\MAIBENBEN>cd C:\Users\MAIBENBEN\MyProject

不要直接去執行,先執行以下命令去建立assets目錄

C:\Users\MAIBENBEN\MyProject>mkdir android\app\src\main\assets

通過執行(這是一個命令) react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

命令會在assets目錄下生成一個檔案

這時候再執行C:\Users\MAIBENBEN\hello1>react-native run-android

會提示成功:

C:\Users\MAIBENBEN\hello1>react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Loading dependency graph, done.
bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

等待數秒編譯成功(前提是手機連上電腦或者模擬器已經開啟)

此時看模擬器