1. 程式人生 > >react-native打包Android應用

react-native打包Android應用

  做好的App,首要的第一件事當然就是拿來分(zhuang)享(bi)了,也就是說要做得有模有樣,能釋出到app市場上,能真正安裝到手機上 ,這樣才有成就感。
  既然要這樣的話,那麼自然就不是‘搖晃手機’那麼簡單了。
  因為我只親自做過Android應用上的打包,IOS暫時還沒做過,所以就不多說了。

1. 製作App圖示

  RN的預設圖示,就是一個android機器人大頭貼,這看起來一點都不酷,既然想要酷,那就只有我們動手了。

  android平臺上的圖示沒有IOS那麼多規矩,所以比較簡單。

  第一步,找一張你認為覺得酷的圖片,為了更好的效果,建議解析度要高、寬高比最好保持為1

  第二步,根據這張圖片,匯出最起碼4種尺寸的圖示
  至於為什麼要4種,請看專案目錄 project\android\app\src\main\res,在這個資料夾裡,以mipmap-開頭的資料夾一共有四個,也就是對應4種大小的圖示,尺寸分別為h:72x72 m:48x48 xh:96x96 xxh:144x144,想要一個好的效果的話,你所需要匯出的4張圖示,尺寸就必須嚴格依照這四種。

  第一步只能靠自己發揮想象了,第二步的圖示匯出就需要藉助工具了,事實上如果真的是為了好的效果,第一步就應該動用一些什麼工具的,比如PS之類,但這畢竟不是程式設計師擅長的活,而且我們的重點也不是這個,效果達到了就好,能省事就省事。

  圖示匯出的方法也很多,比如使用PS工具,到 這個,或者 這個 網站上看一看,基本可以滿足要求。

  但這未免還是有些麻煩,簡單起見的話,完全可以在線上傳、匯出,簡單勝利,百度一下即可,這種網站很多,無需註冊、無需認證,一鍵上傳下載,一分鐘綽綽有餘,有的甚至可以一次性幫你匯出幾十種尺寸的圖示。

  拿到了圖示之後,想要將圖示應用到手頭的app上,方法有兩種。

  第一種在專案的R.java檔案裡面設定,這裡不太推薦,如果不懂java的話,改錯了什麼東西可不好辦。

  第二種就簡單了,直接到這個project\android\app\src\main\res資料夾中,依次開啟那四個以mipmap-

開頭的資料夾,將裡面原先的大頭貼刪除,然後將你自己的四張圖片依次放進去。
  這裡需要注意的是,圖片的尺寸要對應,然後替換完圖片之後,將圖片的名字改成和原先一樣的,也就是ic_launcher.jpg

  到了這裡,圖示的事情,就算是解決了

2. 打包APK

  關於如何打包apk,有兩種方法。

  第一是使用Android Studio,不過網上關於如何使用Android Studio打包RN應用,大多數都存在一個致命的問題,那就是Android Studio的版本不一致,RN官網上對於Android Studio的要求是2.0版本以上,這個版本的操作步驟,顯然和大部分網上所說的那些Android Studio的版本,最起碼在如何打包RN應用這方面,有不小的出入。

  不過好在還有第二條路,不用開IDE,直接命令列走起。
  關於這種方法,其實RN官網上已經說得很清楚了,不過因為是英文,所以有些英文基礎不太好的人,可能會看得不太清楚,這裡我就根據我的實踐來說一下吧

2.1 Android簽名檔案生成

  做過Android開發的人,對於這一步肯定很熟悉了,想要你的app能夠以釋出版本的身份,用正常的方式安裝到手機中,甚至是釋出到app市場上,那麼這一步很關鍵。

  1. 既然能夠開發RN,那說明相應的Java環境肯定是裝好了,如果你在配置Java環境的時候,一路預設安裝,那麼直接進入C:\Program Files\Java\jdkx.x.x_x\bin
    如果你將Java的根目錄設定到了憋得地方,那也沒關係,同樣是到你的Java安裝目錄下找到\jdkx.x.x_x\bin這個資料夾,其中jdkx.x.x_x代表JDK的版本好,如果你當初沒有對這個資料夾重新命名的話,那麼這個資料夾的名字就像這樣:\jdk1.8.0,總之是jdk開頭,後面的數字可能不一樣,這個沒關係

  2. 進入到了’\jdkx.x.x_x\bin’之後,在這個目錄中開啟控制檯,輸入keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
    其中my-release-key這個名字可以自己取名,同時my-key-alias也是自己取名,其中第二個名稱alias引數後邊的別名,在後面你在為應用簽名的時候需要用到,所以暫時記錄一下這個別名
    這裡需要提醒下,當你按照控制檯指示輸入金鑰的時候,你已經確信自己已經按下了按鍵,但是控制檯上的游標卻沒有往後移,並沒有顯示你剛才輸入的字母,不要急不要怕,其實你已經輸入了,只是沒有顯示出來讓你看到而已,只要你確信自己真的輸入了就行,繼續往下輸,別管它有沒有顯示,輸完按回車,你就會看到控制檯讓你再輸一遍剛才的金鑰了,就把剛才輸入的金鑰再輸一遍,只要兩遍輸得都一樣,肯定會讓你過的
    接下來控制檯又會繼續輸入一些問題,用來確認你的身份, 以及生成金鑰證書所用,如果你只是自己玩玩的話,沒想過要真的釋出到app市場上,那麼隨便輸,別客氣,想叫什麼名字就叫什麼名字,拉風一點的最好。

    敲完之後,如果一切正常,你將看到控制檯輸出:
    正在為以下物件生成 2,048 位RSA金鑰對和自簽名證書 (SHA256withRSA) (有效期為 10,000 天):
    ........
    輸入 <my-key-alias> 的金鑰口令
    (如果和金鑰庫口令相同, 按回車):
    [正在儲存my-release-key.keystore]

  然後你可以看到,在你當前目錄下,多出了一個以keystore結尾的檔案,比如我這裡是my-release-key.keystore,那就是剛才所生成的金鑰證書.

  這就表明,簽名算是弄好了。

2.2 Setting up gradle variables

  1. 替換證書

在你的專案根目錄下,進入/android/app這個資料夾,將剛才生成my-release-key.keystore剪下到這個目錄裡來


  1. 修改檔案
在你的專案下,進入/anddriod資料夾,裡面有個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=*****

其中,將兩個*****替換成你之前在控制檯中輸入的金鑰口令

2.3 Adding signing config to your app’s gradle config

在你的專案根目錄下,開啟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
        }
    }
}
...

其中,只有:

signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }

還有

signingConfig signingConfigs.release

  這兩段才是真正你所需要新增進去的內容。

2.4 編譯釋出版本的App

  之前測試所生成的app,app名字的後半段都是帶有debug,這表明App是測試版本的,而只有經過了打包步驟後,才會生成真正的release版本App

在你的專案根目錄,進入/android資料夾,開啟控制檯,輸入:
gradlew assembleRelease

  這一步就是編譯生成釋出版本的App,時間可能比較久,如果你發現控制檯長時間不動,先別急著按Ctrl+C,再耐心等一下,
反正我是等了15分鐘的。。。

  當你看到BUILD SUCCESSFUL這句話的時候,恭喜你,終於編譯好了。

2.5 測試

  到了這裡,其實整個打包過程就完成了,開啟android\app\build\outputs\apk資料夾,你會發現裡面多出了一個名字以release作為後半段的apk檔案,這就是最終打包出來的apk了。
  不過,照例還是需要測試一番的。

還是在你的專案根目錄,進入/android資料夾,開啟控制檯,輸入:
gradlew installRelease

  這會將釋出版本的app安裝到你的手機上,安裝完成後,需要你自己在手機上點開,然後就能體驗你的app在真實發布環境下的表現了。

2.6 開啟檔案混淆功能

  使用git init下來的RN框架中,可能包含了一些你在專案中並不需要的部分,所以這一步可以幫你剝離掉那些你並不需要的檔案程式碼,壓縮最終APK的體積。
  這一步很簡單,開啟android/app/build.gradle檔案,在裡面將def enableProguardInReleaseBuilds = false
  改成
def enableProguardInReleaseBuilds = true

  不過RN官網上說,這一步可能會出些問題,所以做完這一步後,儘可能對App做一個徹底的測試。

相關推薦

react-native打包Android應用

  做好的App,首要的第一件事當然就是拿來分(zhuang)享(bi)了,也就是說要做得有模有樣,能釋出到app市場上,能真正安裝到手機上 ,這樣才有成就感。   既然要這樣的話,那麼自然就不是‘搖晃手機’那麼簡單了。   因為我只親自做過Androi

React-NativeAndroid應用開發踩坑紀 (一)————windows環境下配置

歡迎轉載,轉載註明出處: 我不只是看客 自從在公司中被老大安利了移動開發的未來 React-Native之後開始關注相關,想嘗試相關app開發。正好畢業準備畢設,腦子一熱就選擇了RN來開發一款app……題目上交就不能改了,現在好後悔。。。但硬著頭皮上吧 ,廢

React-Native打包釋出(Android

前言:一下搞原生app一下搞rn,搞rn的時候吧想著自己原生都還這麼水,搞原生的時候吧覺得自己rn不敲就忘了,都有點力不從心了哈,不過還是加油吧~~~!!!http://blog.csdn.net/vv_bug/article/details/60581405 下面說一

react-native修改android包名-上傳應用市場

➢ 安卓以包名作為應用的唯一id 假設包名為com.hourglasstime,需要修改以下幾個地方。 ➢ 兩個java檔案 1.androidApp\android\app\src\main\java\com\hourglasstime\MainActivity.java

Android React Native植入原生應用小記

一、React Native教程介紹 二、植入流程: 0、準備工作及一些提示性: 本人系統為Win10系統,安裝了visual studio2015,node.js4.1版本,curl,ssl,python2.7,Android Studio2.1版本及buildToo

Android React NativeAndroid Studio中執行bundleReleaseJsAndAssets 打包失敗的解決方法

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output C:\Users\Administrator\Desktop

使用Ant打包Android應用具體解釋

owin 即使 data- height val lai evel 右鍵 null   計劃寫個完整的使用Ant打包Android應用的系列文章。三篇文章。首篇具體介紹採用Ant打包Android應用的流程。列出部分定制問題及其解決方法,第二篇介紹我理解的Ant打包的

react-native run-android Starting: Intent Error type 3 Error: Activity class does not exist

gradle 問題 exist native pack details .net 容易 安卓 使用”react-native run-android”命令運行android應用時,如果常常出現如下錯誤: Starting the app (/home/xxx/soft/

React-Native系列Android——Native與Javascript通信原理(一)

from 直接 最新 一點 明顯 rem 負責 receive esp React-Native最核心的是Native與Javascript之間的通信,並且是雙向通信

react-native run-android時 SDK location not found.報錯

not 自動創建 per 解決 not found -a 原因 and 報錯 報錯 原因 缺少local.properties文件(SDK location) 解決 方法一:在android Studio中打開項目android目錄,會自動創建local.properti

windows上react-native run-android時Exception in thread "main" java.lang.IllegalArgumentException: MALFORMED報錯

andro 重新 ive div alt 刪除 ima 用戶 文件夾 報錯如圖 解決 在C:\Users\{用戶名}\.gradle\wrapper\dists路徑下,刪除所有文件夾,重新run-android ps:網上搜了說是說是java解壓縮編碼格式問題什麽的,感覺

react-native修改android包名

oid dap 導致 activity androi ack adl ... objective 安卓以包名作為應用的唯一id。 假設包名為com.oc.objective,以下地方需要修改。 兩個java文件 android/app/src/main/java/com/

使用WebStorm開發React Native除錯Android專案

React-Native自帶的列印log的命令 android : react-native log-android ios : react-native log-ios android studio除錯習慣了,然後在webstorm除錯react-native找到了一個除錯外掛:r

windows下配置React-NativeAndroid)開發環境總結

首先配置環境我們需要用到以下工具: node.js react-native-cli Android Studio JDK(1.8以上) SDK python 1.安裝node.js和react-native-cli命令列工具

配置android開發環境、安裝Android studio、Android sdk(配置react nativeAndroid環境)

配置react native的Android環境的步驟比較多,所以單獨提取出來記錄: 提示:如果是想搭建android開發環境安裝Android studio,本記錄貼也適用的 1. 安裝 Android Studio,配置sdk 2.建立一個android專案並執行測試

React Native打包時,報錯 java.lang.NullPointerException (no error message)

FAILURE: Build failed with an exception. what went wrong? java.lang.NullPointerException (no error message)   This Problem created when the

react native 呼叫Android原生方法

來源:https://www.youtube.com/watch?v=WmJpHHmOKM8  教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaking Down Bridging in React Native by Peggy R

React Native獲取Android手機串號(IMEI碼)

因為專案需要獲取手機imei,所以百度查了下,方法大概如下:  1.在專案根目錄下:      npm install --save react-native-imei 2.然後修改android app src androidMaini

react native 編寫android原生模組

1、android studio 開啟RN專案   2、建立類檔案,繼承ReactContextBaseJavaModule,編寫js要呼叫的方法         3、建立包管理類,實現ReactPackage介面 &

React-native 關於 android真機 出現連不上服務器

行程 找到你 解決辦法 快的 連不上 二維 掃描 顯示 到你 我們都知道使用RN開發移動端應用時,我們要在手機端運行程序,可以下載 expo 這個軟件進行掃描二維碼連接到開發的APP上 有時會有突然連不上之前連上過的應用,出現如下畫面 首先保證你的電腦和你的手機在同