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

問題描述

相信大家都知道HBuilder編輯器軟件吧，它有個(gè)功能就是可以將自己寫的移動(dòng)端項(xiàng)目打包成App項(xiàng)目，但是它是將我們自己寫的代碼提交到HBuilder的服務(wù)器端，很多大企業(yè)是不會(huì)將自己的源代碼提交到別的服務(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)境變量，同時(shí)退出系統(tǒng)環(huán)境變量配置窗口，然后運(yùn)行cmd命令行工具，輸入javac，如果能出現(xiàn)javac的命令選項(xiàng)，就表示配置成功！

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

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

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

大多數(shù)情況下操作系統(tǒng)自帶C++環(huán)境，不需要手動(dòng)安裝C++環(huán)境；
如果運(yùn)行報(bào)錯(cuò)，則需要手動(dòng)安裝visual studio中的C++環(huán)境；

安裝Git環(huán)境

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

安裝Python環(huán)境

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

配置安卓環(huán)境

1. 安裝installer_r24.3.4-windows.exe，最好手動(dòng)選擇安裝到C盤下的android目錄
2. 打開安裝根目錄，將android-25、android-23(react-native必須依賴這個(gè))解壓后，放到platforms文件夾下
3. 解壓platform-tools，放到platform-tools文件夾下
4. 【這一步直接忽略即可！】tools文件夾不解壓覆蓋也行；解壓tools，放到安裝根目錄中
5. 解壓build-tools_r23.0.1-windows.zip(react-native必須依賴這個(gè))、build-tools_r23.0.2-windows.zip(weex必須依賴這個(gè))和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不能正常識(shí)別！

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)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(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. 運(yùn)行react-native init myProject創(chuàng)建React-Native項(xiàng)目

• 我在創(chuàng)建項(xiàng)目的時(shí)候有報(bào)錯(cuò)，報(bào)錯(cuò)如下：

  
  
  image

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

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

》 到這步如果有報(bào)錯(cuò)時(shí)：

參考這篇文章： 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