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目录,然后重新打包