React-native初體驗 => 移動App開發環境配置 => 使用Android “模擬器” Genymotion => ReactNative快速打包

一.移動App開發環境配置

1.安裝最新版本的java jdk

在這裏插入圖片描述

1.修改環境變量,新增JAVA_HOME的系統環境變量,值爲C:\Program Files\Java\jdk1.8.0_161,也就是安裝JDK的根目錄

在這裏插入圖片描述

2.修改系統環境變量Path,在Path之後新增;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

在這裏插入圖片描述

3.新建系統環境變量CLASSPATH,值爲.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

在這裏插入圖片描述

4.保存所有的系統環境變量,同時退出系統環境變量配置窗口,然後運行cmd命令行工具,輸入javac,如果能出現javac的命令選項,就表示配置成功!

在這裏插入圖片描述
在這裏插入圖片描述

二.安裝Node.js環境

注意:需要安裝最新的長期穩定版本,不要實驗版本;安裝完畢之後的node.js會自動配置到全局系統環境變量中

安裝完畢後,可以輸入node -v查看node版本號;
在這裏插入圖片描述

三.安裝C++環境

注意:大多數情況下操作系統自帶C++環境,不需要手動安裝C++環境;

如果運行報錯,則需要手動安裝visual studio中的C++環境;

四.安裝Git環境

Git安裝完畢後,會自動配置到系統環境變量中;

可以通過運行git --version來檢查是否正確安裝和配置了Git的環境變量;
在這裏插入圖片描述

五.安裝Yarn包管理工具

在這裏插入圖片描述

六.安裝Python環境

注意:安裝Python時候,只能安裝2.×的版本,注意勾選安裝界面上的Add Python to path,這樣才能自動將Python安裝到系統環境變量中;

安裝完畢之後,可以在命令行中運行python,檢查是否成功安裝了python。
在這裏插入圖片描述

7.配置安卓環境

  1. 安裝installer_r24.3.4-windows.exe,最好手動選擇安裝到C盤下的android目錄
    在這裏插入圖片描述
  2. 打開安裝的目錄,將android-23、android-24、android-25、android-26、android-28右鍵 x 解壓(提取到當前位置)後,放到platforms文件夾下
    在這裏插入圖片描述
    在這裏插入圖片描述
  3. 右鍵 x 解壓platform-tools,將解壓得到的文件夾,放到和SDK Manager.exe平級的目錄中
    在這裏插入圖片描述
    在這裏插入圖片描述
  4. 在安裝目錄中新建文件夾build-tools,右鍵 x 解壓 build-tools_r23.0.1-windows.zip(react-native必須依賴這個)、build-tools_r26.0.0-windows.rar(weex必須依賴這個)、build-tools_r28.0.3-windows.rar,並將解壓出來的文件夾,拷貝到build-tools文件夾下
    在這裏插入圖片描述
    在這裏插入圖片描述
  5. 在安裝目錄中,新建extras文件夾,在extras文件夾下新建android文件夾;右鍵 x 解壓m2responsitory文件夾和support文件夾,放到新建的extras -> android文件夾下
    在這裏插入圖片描述
    在這裏插入圖片描述
  6. 配置安裝環境變量:在系統環境變量中新建ANDROID_HOME,值爲android SDK Manager的安裝路徑C:\Android,緊接着,在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
    在這裏插入圖片描述
    在這裏插入圖片描述

八.安裝使用Android “模擬器” Genymotion

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

九.ReactNative快速打包

  1. Yarn 和 React Native的命令行工具(react-native-cli)
  • Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。
  • React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。

npm install -g react-native-cli

  • 安裝完yarn後同理也要設置鏡像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
  1. 運行react-native init AwesomeProject創建React-Native項目
react-native init AwesomeProject

在這裏插入圖片描述
3. 運行cd AwesomeProject切換到項目根目錄中,運行adb devices來確保有設備連接到了電腦上

cd AwesomeProject
adb devices

在這裏插入圖片描述
4. 運行react-native run-android打包編譯安卓項目,並部署到模擬器或開發機中

react-native run-android
  1. 運行上一條命令之前,要確保有設備連接到了電腦上,可以運行adb devices查看當前接入的設備列表;如果無法檢查到設備列表,請先確保手機開啓了開發者模式,同時要電腦上要安裝手機的驅動程序;
adb devices

在這裏插入圖片描述
6. 注意:首次打包時候,會聯網下載gradle相關的文件,需要等待很長時間,大家可以直接從http://www.androiddevtools.cn/手動下載對應版本的gradle文件,並手動拷貝解壓到C:\Users\自己的用戶名.gradle\wrapper\dists目錄下;
7. 注意:接下來,如果是第一次打包,會從https://jcenter.bintray.com下載好多的依賴項,此時需要耐心等待,如果中間出現了長時間卡頓,大家需要Ctrl+C停止打包,並重新運行react-native run-android
在這裏插入圖片描述
最後:關於RN項目中每個文件的作用
在這裏插入圖片描述
感謝解決問題
Android平臺app打包時遇到的問題:從Could not resolve com.android.tools.build:gradle:3.0.0.說起

源文件待整理上傳
鏈接:https://pan.baidu.com/s/1Zeq8gcctjJVp8GZ5m7V1Gw
提取碼:y5dj

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章