想用React Native開(kāi)發(fā)app的朋友等限，在搭建React Native開(kāi)發(fā)環(huán)境的時(shí)候會(huì)遇到很多問(wèn)題，以下是本人搭建React Native開(kāi)發(fā)環(huán)境的一些經(jīng)驗(yàn)和總結(jié)，希望對(duì)大家有所幫助，安裝過(guò)程如下。
1馁痴、安裝android開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具
? ? 下載jdk、androidStudio肺孤，安裝android開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具罗晕，這方面的資料網(wǎng)上有很多，做Android開(kāi)發(fā)的同學(xué)應(yīng)該電腦上都裝好了渠旁。
2攀例、安裝node.js
開(kāi)發(fā)React Native 需要用到Javascript進(jìn)行開(kāi)發(fā)，而node.js 是一個(gè)Javascript運(yùn)行環(huán)境顾腊，可到Node.js中文網(wǎng)http://nodejs.cn/下載粤铭，安裝時(shí)根據(jù)提示安裝即可。檢查是否已經(jīng)正確安裝可在命令行執(zhí)行 node -v 查看node.js版本杂靶，npm -v 查看npm版本梆惯，能輸出node 版本號(hào)和npm版本號(hào)說(shuō)明安裝成功
3、安裝react-native命令行工具
在命令行執(zhí)行? npm install -g react-native-cli 安裝React Native命令行工具吗垮，React Native的命令行工具用于執(zhí)行創(chuàng)建垛吗、初始化、更新項(xiàng)目和運(yùn)行打包等任務(wù)烁登。
4怯屉、創(chuàng)建React Native項(xiàng)目
在你需要存放項(xiàng)目的文件目錄下執(zhí)行 react-native init AwesomeProject 命令，AwesomeProject是你的醒目名稱這個(gè)名字可以隨意自己命名。
5锨络、運(yùn)行react native packager
cmd到項(xiàng)目目錄下執(zhí)行命令： react-native start赌躺，請(qǐng)不要關(guān)閉命令窗口，否則服務(wù)會(huì)斷開(kāi)羡儿。使用瀏覽器訪問(wèn): http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本礼患，如果可以，證明運(yùn)行成功掠归。
6缅叠、連接usb調(diào)試端口
cmd到項(xiàng)目目錄下執(zhí)行命令：adb reverse tcp:8081 tcp:8081，最好使用android5.0版本以上的手機(jī)虏冻。
7肤粱、運(yùn)行項(xiàng)目
cmd到項(xiàng)目目錄下，執(zhí)行命令：react-native run-android兄旬，第一次運(yùn)行項(xiàng)目可能會(huì)出現(xiàn)錯(cuò)誤（屏幕會(huì)紅色）狼犯，如果出現(xiàn)這種情況余寥，查看項(xiàng)目src/main目錄下是否有assets文件夾领铐，React Native 需要將js文件打包成bundle文件放在assets目錄下才能運(yùn)行。如果沒(méi)有assets文件夾宋舷，手動(dòng)新建一個(gè)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/，這個(gè)命令很長(zhǎng)祝蝠，復(fù)制粘貼就行音诈，執(zhí)行完后看assets文件夾下是否生成了bundle文件，成成說(shuō)明項(xiàng)目打包成功了绎狭，再次運(yùn)行項(xiàng)目细溅，就不會(huì)報(bào)錯(cuò)了。
