1. 程式人生 > >Windows10環境下React Native打包的個人實踐

Windows10環境下React Native打包的個人實踐

參考文件:
ReactNative 中文網
ReactNactive qq群
搭建React Native for Android Windows開發環境
   最近剛剛升級了win10,發現win10環境下開發有不小的問題。主要就是管理員許可權這個非常不友好的設定,導致node.js和Editplus、notepad++都出現了些問題,所以使用cmd 或者是開發工具全最好都去勾選一下管理員許可權,我在用npm命令初始化rn專案時 就因為許可權問題導致一直失敗,原因就是npm的快取目錄設定在本地賬戶\AppData下,即使我給cmd授予了管理器許可權依然沒有作用,又看到說沒有c++環境,於是又跑去裝了visual Studio2015,結果還是各種報錯一直沒法初始化專案。
  我懷疑是我網速的問題,重新安裝了node.js v4.3.1 。這次改為淘寶源來安裝npm,經過折騰現在已經可以正常打包,但是可能是伺服器的原因 現在沒法連上伺服器更新程式碼,還再找原因。

windows 搭建React Native

安裝node.js

安裝 visual Studio

編譯Node.js需要C++環境, 還要安裝python ,否則在init的命令時可能會警告你。

配置環境變數

Node.js

path

;C:\Program Files (x86)\nodejs\

AndroidHome

變數名 :ANDROID_HOME
變數路徑:D:\AndroidStudioSDK
path:;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

參考用具體需要看自己的安裝路徑

安裝npm

1.安裝:npm install -g cnpm --registry=https://registry.npm.taobao.org
2.測試安裝成功:cnpm info connect

這個如果有淘寶源的話安裝還是比較快的,

初始化專案

cd到工作空間
然後
react-native init MyFirstProject 

這個安裝需要較長的時間也是最容易出問題的步驟,如果安裝失敗可以跳過這部分直接去ReactNative.cn去下載純淨版的目錄 :純淨工作目錄。我遇到到的一個主要問題就是緩衝的問題,因為無權緩衝在本地AppData目錄內,所以一直報錯,解決辦法是設定npm的緩衝路徑:

npm congig set cache "D:\cache"

如果沒遇到問題可以省略這個步驟。

執行

首先cd到剛才init的目錄 然後:

//啟動服務
react-native start 

啟動完成服務後需要重新開啟一個cmd視窗,執行

//執行debug到安卓手機上(模擬器也行)使用的是adb
react-native run-android

這個命令需要很長的時間去下載gradle構建專案,構建成功後會自動安裝到手機上,然後晃動手機 選擇 Dev Setting去設定電腦伺服器的ip,設定完成後選擇 reload Js重新載入程式碼 。本地通過android.index.js修改程式碼,完成後再reload js即可看到更新。

安卓打包

1、 首先在工程目錄裡 執行 mkdir android\app\src\main\assets 這目錄是為了儲存稍後的離線包。
2、使用 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 申請一個keyStore
3、設定gradle變數 將 (2)申請到的keystore檔案放到android\app目錄下
編輯 \ android \gradle.properties,新增如下的程式碼(注意:請把其中的** 替代為替換的keystore密碼)

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

4.添加簽名到應用的gradle配置檔案
編輯你工程目錄下的android/app/build.gradle

...
android {
    ...
    defaultConfig { ... }
    拷貝:signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            拷貝:signingConfig signingConfigs.release
        }
    }
}

5、cd 到 專案根目錄 MyFirstProject位置

執行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

這個 命令的意思就是生產 index.android.bunlde 離線包檔案,
位置就在第一步 android\app\src\main\assets目錄內
但是實際根據我的測試 即使不使用此命令簽名apk一樣可以正常使用。
6、cd 到 \android 目錄下 使用gradle命令打簽名包:

gradlew assembleRelease 

打包成功後會在 android\app\build\outputs\apk內 找到app-release.apk 就是簽名apk。
7、使用gradlew installRelease 來安裝簽名包 進行測試。

不執行第5步一樣可以將最新的js程式碼打包到apk中 具體原因有待調查。