開始前的話語:
1、由於andriod studio不易下載,並且佔用內存大,運行的AVD模擬器非常遲鈍。所以本文采用genymotion模擬器搭建,它更加輕量,運行更流暢。
2、由於很多學習react的用戶,都是在windows電腦上開發,完了順便學習下react-native,所以本文是用於搭建android環境的(mac電腦沒錢買,但不好意思說)
開發環境要求:
Node 的版本必須高於 8.3,
Python 的版本必須爲 2.x(不支持 3.x),
而 JDK 的版本必須是 1.8(目前不支持 1.9 及更高版本)
android版本爲9(由於最新的react native默認爲9,其實其他版本也行,但要改配置,比較麻煩)
一、環境搭建
1、jdk下載及其環境變量配置
如果學過java,則忽略本步驟。如果小白,則繼續閱讀
點擊JDK官網,下載對應版本的jdk,然後雙擊安裝。然後一路“下一步”。
默認會安裝在C盤 C:Program FilesJavajdk1.8.0_201 路徑下
配置環境變量
桌面-->我的電腦-->右鍵——>屬性
點擊"高級系統設置"
點擊"環境變量"
編輯用戶變量Path
新建,將剛纔安裝的jdk路徑複製到輸入框中。最後別忘了,點擊“確定”關閉對話框。
然後打開cmd,輸入
>java -version
如果出現版本號,則說明jdk配置完畢。
2、python下載及其環境變量配置
進入Python官網下載對應版本,然後雙擊安裝,默認一路“下一步”
類似jdk環境變量,將python的安裝路徑,配置到環境變量中。
3、SDK下載
雖然我們不需要android studio來開發react-native,但是在啓動react時,如果啓動的是android,則還是要sdk包的支持和編譯。才能將app安裝到genymotion模擬器中運行。
我們只需要下載sdk manage來管理sdk包,可以不用任何翻牆和代理,即可下載。速度還很快
這是我的sdk manage的百度網盤地址:
鏈接:https://pan.baidu.com/s/1uUmz...
提取碼:m3fl
下載完,雙擊安裝,一路"下一步"。
然後配置sdk的環境變量,但是需要注意,不是加入到path中,而是新建個名爲ANDROID_HOME的變量,
然後將剛纔sdk安裝的路徑設置到變量值中
然後,進入到sdk安裝目錄,找到s
並雙擊打開。
找到android 9,展開
勾選這兩個,然後點擊右下角install packages,稍微等待會,即可看到這兩個包後面的"not installed"變成了"installed"
二、Genymotion模擬器下載
genymotion官網
下載前,必須要註冊賬號,並登陸。
登陸成功後,點擊右上角紅色的"Download"
由於我們是個人用戶,所以往頁面下方拉,會看到"Get Genymotion personal version",點擊進入下載。
下載上方的包含有VirtualBox的版本。
下載成功並安裝。
啓動桌面上的"Genymotion"快捷方式,打開genymotion.
進入setting
首先登陸
配置ADB中的sdk爲剛纔安裝sdk的目錄。然後關閉
選擇android 9版本的模擬器,並安裝
模擬器安裝成功後,start啓動
出現如下的頁面,即可表明啓動成功。
三、react native項目創建
首先安裝react-native-cli
>npm install -g yarn react-native-cli
然後使用init,創建項目,官網實例名爲AwesomeProject,咱們也用這個吧。
react-native init AwesomeProject
進入AwesomeProject項目
cd AwesomeProject
react-native run-android
即可在模擬器上看到react-native中的內容
使用vscode打開AwesomeProject項目,打開App.js,在render中稍微修改文字,並打開genymotion模擬器,雙擊鍵盤R鍵(自己辦公桌的鍵盤,不是genymotion模擬器的軟鍵盤),即可刷新模擬器上的頁面。
同時,在android的outputs文件夾下,可以編譯好的apk,但是這個apk是沒有經過數字證書認證的,無法發佈到應用商店的。
四、採用數字證書編譯App
使用管理員權限打開cmd命令行工具,然後進入到jdk的bin目錄:
C:Program FilesJavajdk1.8.0_201bin 目錄
然後再控制檯輸入如下命令:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然後會提示你輸入祕鑰密碼,地區,行政區,國家等等,完成後。在bin目錄下會有個
my-release-key.keystore文件
將次祕鑰文件複製到react native項目的androiud/app下
修改gradle.properties文件,加入如下代碼:
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
注意**部分要用你剛纔申請祕鑰時輸入的密碼替換
進入android/app/build.gradle中,編輯文件,新增紅色部分。
然後進入到android目錄下,輸入命令。
gradlew assembleRelease
即可使用數字證書來打包app,成功後,會在apk下多出來一個realese文件夾(如果沒有,點擊右上角刷新)
爲了確保發佈到應用商店的apk沒有問題,我們還得把這個apk在genymotion模擬器上運行下,來簡單測試下
輸入命令
>react-native run-android --variant=release
即可在模擬器上,看到有個app被安裝上了。