一. 安裝列表(建議按照順序進(jìn)行)
1. 基本環(huán)境
- jdk8: 記得配置環(huán)境變量
- nodejs: 7.x版本據(jù)中文網(wǎng)說(shuō)在windows中有坑堡掏，建議使用6.x
- python2.x: 必須是2.x
2.Android SDK
這里推薦去react-native中文網(wǎng)查看相關(guān)內(nèi)容,記得配置環(huán)境變量
注：Android SDK Build-Tools 版本必須為23.0.1
3. react-native-cli
首先將npm更新到最新版本 (可不是nodejs喲)
npm i npm
舊版本npm下安裝react-native-cli可能會(huì)出現(xiàn)圖中問(wèn)題
由于內(nèi)容安裝較慢加匈，建議使用nrm切換cnpm下載
nrm use cnpm
切換后安裝,推薦使用facebook官方推薦的yarn
cnpm install -g yarn react-native-cli
二. 運(yùn)行(重要)
1. 創(chuàng)建app應(yīng)用,如果未使用cnpm與yarn速度可能會(huì)有些慢
react-native init helloapp
注：如果npm版本低可能出現(xiàn)invariant模塊找不到的問(wèn)題
2. 測(cè)試
- 將手機(jī)用USB線連接電腦猜憎，開(kāi)啟USB調(diào)試(開(kāi)啟方法針對(duì)個(gè)人手機(jī)型號(hào)google)
- 使用react-native start構(gòu)建項(xiàng)目
- 使用react-native run-android將app安裝到手機(jī)中
三. 問(wèn)題
1. run-android 中的問(wèn)題
-
運(yùn)行該命令后手機(jī)應(yīng)用可能會(huì)顯示 Could not get BatchedBridge, make sure your bundle is packaged correctly的背景
解決方案：首先在app/src/main下創(chuàng)建assets文件夾蹲堂，然后執(zhí)行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
指令過(guò)長(zhǎng)建議寫(xiě)入package.json的scripts中
執(zhí)行后會(huì)發(fā)現(xiàn)assets下多了兩個(gè)文件，meta結(jié)尾可刪除，手機(jī)端之所謂未正常顯示原因就在index.android.bundle上
- 當(dāng)然了那么長(zhǎng)的命令不會(huì)那么容易讓你成功的。好唯。。燥翅。
在執(zhí)行上述命令可能會(huì)發(fā)生如下問(wèn)題
解決方法：進(jìn)入圖中目錄骑篙，找到.babel.json文件修改其權(quán)限
chmod 777 .babel.json
修改權(quán)限后該文件就可讀了
2. react-native start
該命令表示構(gòu)建項(xiàng)目，調(diào)試時(shí)虛擬機(jī)或真機(jī)會(huì)從項(xiàng)目中fetch js文件森书，當(dāng)我們使用虛擬機(jī)(推薦genymotion)進(jìn)行調(diào)試時(shí)靶端，在我們修改代碼后需要reload最新js
注：index.android.js中根組件(register)名一致，否則會(huì)報(bào)錯(cuò)
