React Native環(huán)境配置與快速打包

問題描述

相信大家都知道HBuilder編輯器軟件吧击纬，它有個功能就是可以將自己寫的移動端項目打包成App項目绢彤，但是它是將我們自己寫的代碼提交到HBuilder的服務(wù)器端蝗锥，很多大企業(yè)是不會將自己的源代碼提交到別的服務(wù)器來打包的蔬螟，所以就有必要自己來配置打包環(huán)境并且打包代碼了像吻。

安裝最新版本的java jdk

1. 修改環(huán)境變量堕汞，新增JAVA_HOME的系統(tǒng)環(huán)境變量勺爱，值為C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安裝JDK的根目錄
2. 修改系統(tǒng)環(huán)境變量Path讯检，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
3. 新建系統(tǒng)環(huán)境變量CLASSPATH琐鲁，值為.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
4. 保存所有的系統(tǒng)環(huán)境變量，同時退出系統(tǒng)環(huán)境變量配置窗口人灼，然后運行cmd命令行工具围段，輸入javac，如果能出現(xiàn)javac的命令選項投放，就表示配置成功奈泪！

安裝Node.js環(huán)境

注意：需要安裝最新的長期穩(wěn)定版本，不要實驗版本灸芳；安裝完畢之后的node.js會自動配置到全局系統(tǒng)環(huán)境變量中
安裝完畢后涝桅，可以輸入node -v查看node版本號；

安裝C++環(huán)境

大多數(shù)情況下操作系統(tǒng)自帶C++環(huán)境烙样，不需要手動安裝C++環(huán)境冯遂；
如果運行報錯，則需要手動安裝visual studio中的C++環(huán)境谒获；

安裝Git環(huán)境

Git安裝完畢后蛤肌，會自動配置到系統(tǒng)環(huán)境變量中；
可以通過運行git --version來檢查是否正確安裝和配置了Git的環(huán)境變量批狱；

安裝Python環(huán)境

1. 注意：安裝Python時候裸准，只能安裝2.×的版本，注意勾選安裝界面上的Add Python to path赔硫，這樣才能自動將Python安裝到系統(tǒng)環(huán)境變量中炒俱；
2. 安裝完畢之后，可以在命令行中運行python爪膊，檢查是否成功安裝了python向胡。

配置安卓環(huán)境

1. 安裝installer_r24.3.4-windows.exe，最好手動選擇安裝到C盤下的android目錄
2. 打開安裝根目錄惊完，將android-25僵芹、android-23(react-native必須依賴這個)解壓后，放到platforms文件夾下
3. 解壓platform-tools小槐，放到platform-tools文件夾下
4. 【這一步直接忽略即可拇派！】tools文件夾不解壓覆蓋也行荷辕；解壓tools，放到安裝根目錄中
5. 解壓build-tools_r23.0.1-windows.zip(react-native必須依賴這個)件豌、build-tools_r23.0.2-windows.zip(weex必須依賴這個)和build-tools_r23.0.3-windows.zip疮方，并將解壓出來的文件夾，分別改名為版本號23.0.1茧彤、23.0.2和23.0.3骡显；在安裝目錄中新建文件夾build-tools，并將改名為版本號之后的文件夾曾掂，放到新創(chuàng)建出來的build-tools文件夾下
6. 在安裝根目錄中惫谤，新建extras文件夾，在extras文件夾下新建android文件夾珠洗；解壓m2responsitory文件夾和support文件夾溜歪，放到新建的extras -> android文件夾下
7. 配置安裝環(huán)境變量：在系統(tǒng)環(huán)境變量中新建ANDROID_HOME，值為android SDK Manager的安裝路徑C:\Users\user\AppData\Local\Android\android-sdk许蓖，緊接著蝴猪，在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

ReactNative快速打包

1. 安裝完node后建議設(shè)置npm鏡像以加速后面的過程（或使用科學(xué)上網(wǎng)工具）。注意：不要使用cnpm膊爪！cnpm安裝的模塊路徑比較奇怪自阱，packager不能正常識別！

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

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

2. Yarn米酬、React Native的命令行工具（react-native-cli）

• Yarn是Facebook提供的替代npm的工具沛豌，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建淮逻、初始化琼懊、更新項目阁簸、運行打包服務(wù)（packager）等任務(wù)爬早。

  npm install -g yarn react-native-cli

• 安裝完yarn后同理也要設(shè)置鏡像源：

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

3. 運行react-native init myProject創(chuàng)建React-Native項目

• 我在創(chuàng)建項目的時候有報錯，報錯如下：

  
  
  image

這里出現(xiàn)類似錯誤的解決方案：將上面第一步和第二步重新運行一遍即可解決問題

4. 運行cd AwesomeProject切換到項目根目錄中启妹，運行adb devices來確保有設(shè)備連接到了電腦上
5. 運行react-native run-android打包編譯安卓項目筛严，并部署到模擬器或開發(fā)機中
6. 運行上一條命令之前，要確保有設(shè)備連接到了電腦上饶米，可以運行adb devices查看當(dāng)前接入的設(shè)備列表桨啃，adb connect 127.0.0.1:62001(62001是夜神模擬器的默認端口)

》 到這步如果有報錯時：

參考這篇文章： http://www.open-open.com/lib/view/open1477469117948.html

來自：http://blog.csdn.net/coder_nice/article/details/52933187

安裝包下載地址：https://github.com/Goorln/react-native-packages.git