React-Native從搭建環境到 發佈 APP 指北

開始前的話語:

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 路徑下

配置環境變量
桌面-->我的電腦-->右鍵——>屬性
clipboard.png

點擊"高級系統設置"
clipboard.png

點擊"環境變量"
clipboard.png

編輯用戶變量Path
clipboard.png

新建,將剛纔安裝的jdk路徑複製到輸入框中。最後別忘了,點擊“確定”關閉對話框。
clipboard.png

然後打開cmd,輸入

>java -version

如果出現版本號,則說明jdk配置完畢。
clipboard.png

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的變量,
clipboard.png
然後將剛纔sdk安裝的路徑設置到變量值中
clipboard.png

然後,進入到sdk安裝目錄,找到s
並雙擊打開。
clipboard.png

找到android 9,展開
clipboard.png

勾選這兩個,然後點擊右下角install packages,稍微等待會,即可看到這兩個包後面的"not installed"變成了"installed"
clipboard.png

二、Genymotion模擬器下載

genymotion官網
下載前,必須要註冊賬號,並登陸。

登陸成功後,點擊右上角紅色的"Download"
clipboard.png

由於我們是個人用戶,所以往頁面下方拉,會看到"Get Genymotion personal version",點擊進入下載。
clipboard.png

下載上方的包含有VirtualBox的版本。
clipboard.png

下載成功並安裝。

啓動桌面上的"Genymotion"快捷方式,打開genymotion.

進入setting
clipboard.png

首先登陸
clipboard.png

配置ADB中的sdk爲剛纔安裝sdk的目錄。然後關閉
clipboard.png

選擇android 9版本的模擬器,並安裝
clipboard.png

clipboard.png

模擬器安裝成功後,start啓動
clipboard.png

出現如下的頁面,即可表明啓動成功。
clipboard.png

三、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模擬器的軟鍵盤),即可刷新模擬器上的頁面。
clipboard.png

同時,在android的outputs文件夾下,可以編譯好的apk,但是這個apk是沒有經過數字證書認證的,無法發佈到應用商店的。
clipboard.png

四、採用數字證書編譯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

clipboard.png

然後會提示你輸入祕鑰密碼,地區,行政區,國家等等,完成後。在bin目錄下會有個
my-release-key.keystore文件

將次祕鑰文件複製到react native項目的androiud/app下
clipboard.png

修改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=*****

注意**部分要用你剛纔申請祕鑰時輸入的密碼替換
clipboard.png

進入android/app/build.gradle中,編輯文件,新增紅色部分。
clipboard.png

然後進入到android目錄下,輸入命令。

gradlew assembleRelease

即可使用數字證書來打包app,成功後,會在apk下多出來一個realese文件夾(如果沒有,點擊右上角刷新)
clipboard.png

爲了確保發佈到應用商店的apk沒有問題,我們還得把這個apk在genymotion模擬器上運行下,來簡單測試下
輸入命令

>react-native run-android --variant=release

即可在模擬器上,看到有個app被安裝上了。

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