關於官網配置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
等待數秒編譯成功(前提是手機連上電腦或者模擬器已經開啟)
此時看模擬器