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

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目录下

<resources>
    <string name="app_name">你的APP名称</string>
</resources>

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 为启动的图片名 )

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

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<Props> {    
    componentDidMount() {                   //只需添加componentDidMount(){}就行
        setTimeout(() => {
            SplashScreen.hide();      //关闭启动屏幕
        }, 2000);
    }
	componentWillUnmount() {
    this.timer && clearTimeout(this.timer);         //清除计时器
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

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

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

猜你喜欢