React Native打包Apk，修改app图标，名称，启动页

您所在的位置：网站首页 › 修改安卓安装包名 › React Native打包Apk，修改app图标，名称，启动页

React Native打包Apk，修改app图标，名称，启动页

2024-07-04 02:17| 来源: 网络整理| 查看: 265

React Native打包APK

环境安装必备: 一、安装java环境 1、https://www.oracle.com/technetwork/java/javase/downloads/index.html官网下载（不要下载最新版） 2、配置环境变量 (1)新建->变量名"JAVA_HOME"，变量值"C:\Java\jdk1.8.0_05"（即JDK的安装路径） (2)编辑->变量名"Path"，在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin” 3、确认环境配置是否成功在cmd控制台分别输入java；javac；java -version 命令

二、安装Android sdk 1、https://www.androiddevtools.cn/下载安装 2、安装sdk

三、安装react-native环境

$ npm install -g react-native-cli $ react-native init firstRN //创建react-native项目，firstRN为项目名，项目名称可随意取

四、开始打包apk 1、生成签名密钥

使用keytool命令生成一个私有密钥，进入Java环境的JDK的bin目录中（比如C:\Program Files\Java\jdkx.x.x_x\bin），执行以下命令

(1)使用此命令则直接将my-release-key.keystore文件生成在react-native项目目录的android/app文件夹下，执行此命令无需操作下面第2步

$ keytool -genkey -v -keystore react-native项目绝对路径/android/app/my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 例如：keytool -genkey -v -keystore E:\TSBrowserDownloads\tworn\android\app\my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

(2)使用此命令创建则需执行下面第2步

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

注意：若java环境装在C盘的话，进入cmd执行此命令时需以管理员身份运行。java没有装在C盘则不需要。执行这条命令后，会要求输入密钥库(keystore)和对应密钥的密码，然后设置一下发行相关的信息。最后它会在bin目录下生成一个 my-release-key.keystore的密钥库文件，密钥库里应该已经生成了一个单独的密钥，有效期为10000天。

2、将my-release-key.keystore文件复制到项目目录的android/app文件夹下

3、编辑项目目录/android/gradle.properties（项目配置，只对所在项目有效）或是项目目录下的android/.gradle/gradle.properties（全局配置，对所有项目有效）。如果没有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=*****

切记：检查密码前后千万不要有空格，否则打包失败

4、编辑项目目录下的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、在android文件下新建文件local.properties，在此文件下添加内容sdk.dir=C:\Sdk（路径为你安装的sdk的目录）

注意：如果有local.properties文件就不用再新建，sdk.dir=C:\Sdk 文件一定要存在

6、修改app名称

进入：android/app/src/main/res/valuse/strings.xml目录下

你的APP名称

7、修改app图标

进入：android/app/src/main/res/目录下，有类似mipmap-hdpi,mipmap-mdpi,mipmap-xhdpi,mipmap-xxhdpi,mipmap-xxxhdpi

等文件，这些文件下分别存有png格式的图片，图片大小分别为：72x72，48x48，96x96，144x144，192x192格式

注意：原始图片必须为png格式，否则报错

8、修改app启动页

第一步：安装下载插件

1、npm i react-native-splash-screen --save 2、react-native link react-native-splash-screen // 自动链接了，就不用手动配置了

3、执行完上面两条命令，在android/settings.gradle文件下会自动下面语句，请将下面的路径中’…\node_modules\rn-splash-screen\android’单斜线改为双斜线表示。

include ':rn-splash-screen' project(':rn-splash-screen').projectDir = new File(rootProject.projectDir, '..\\node_modules\\rn-splash-screen\\android')

第二步：在android中进行相关配置

1、在android/app/src/main/java/com/xxx/MainActivity.java 文件中添加所示的代码

package xxxx; import android.os.Bundle; // 添加第一处 import com.facebook.react.ReactActivity; import org.devio.rn.splashscreen.SplashScreen; // 添加第二处 public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected void onCreate(Bundle savedInstanceState) { // 添加第三处 SplashScreen.show(this); super.onCreate(savedInstanceState); } //第三处 @Override protected String getMainComponentName() { return "xxx"; } }

2、android/app/src/main/res目录中,新建layout目录,在layout目录下,创建launch_screen.xml文件, 复制以下内容（其中 launch_screen 为启动的图片名 )

3、在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片, 命名为launch_screen.png

4、打开React-native项目的主入口文件，也就是React-native项目/App.js文件中添加，表示启动页2S后关闭，进入app主页

import SplashScreen from 'react-native-splash-screen'; export default class App extends Component { componentDidMount() { //只需添加componentDidMount(){}就行 setTimeout(() => { SplashScreen.hide(); //关闭启动屏幕 }, 2000); } componentWillUnmount() { this.timer && clearTimeout(this.timer); //清除计时器 } render() { return ( Welcome to React Native! To get started, edit App.js {instructions} ); } }

第三步：配置完成，启动页页正常显示了

9、终端cd 到android目录下执行命令

$ gradlew assembleRelease

注意：在macOS和Linux系统中使用命令$ ./gradlew assembleRelease

10、等一下终端执行后显示BUILD SUCCESSFUL.

成功打好了.在项目的android/app/build/outputs/apk/release下可见刚才打好的apk包

注意：如果之前打包过此项目，在此次打包过程出现报错，请删除android/app文件下的build目录，然后重新打包

【本文地址】

React Native打包Apk，修改app图标，名称，启动页

React Native打包Apk，修改app图标，名称，启动页

今日新闻

推荐新闻