React Native APK package
Install the necessary environment:
First, install the java environment
1, https://www.oracle.com/technetwork/java/javase/downloads/index.html official website to download (not to download the latest version)
2, configure the environment variables
(1) New -> variable name "JAVA_HOME", variable value "C: \ Java \ jdk1.8.0_05" ( ie JDK installation)
(2) edit -> variable name "path", at the end of the original face value of the variable plus "; % JAVA_HOME% \ bin;% JAVA_HOME% \ jre \ bin "
3, make sure the environment is configured successfully
enter cmd in java console respectively; javac; java -version command
Second, the installation sdk the Android
. 1, https://www.androiddevtools.cn/ download and install
2, mounting sdk
Third, the installation react-native environment
$ npm install -g react-native-cli
$ react-native init firstRN //创建react-native项目，firstRN为项目名，项目名称可随意取
Fourth, start packing APK
1, generating a signature key
Use the keytool command to generate a private key, enter the Java environment JDK bin directory
(such as C: \ Program Files \ Java \ jdkx.x.x_x \ bin), execute the following command
(1) Use this command directly to my-release-key.keystore file generated in android react-native project directory / app folder, this command is executed without operating step 2 below
$ 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) Use this command to create a need to perform the following step 2
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Note: If the java environment installed in C drive, then enter the need to run as an administrator cmd execute this command. java is not installed in the C drive is not required. After executing this command,
you will be asked to enter a password keystore (keystore) and the corresponding key, and then set about issue-related information. Finally, it will generate a directory in the bin
my-release-key.keystore key database file, the key Curry should have generated a separate key, valid for 10,000 days.
2. Copy the my-release-key.keystore file to the project directory of android / app folder
3, edit the project directory /android/gradle.properties (project configuration, where the only effective project) android or under the project directory / .gradle / gradle.properties (global configuration, valid for all items)
. If you do not gradle.properties file you create your own, add the following code (note the password which is the first step to set command ****)
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
Remember: Do not check the password before and after the spaces, otherwise Packaging Failure
4, android under the Edit project directory / app / build.gradle file, add the following signature configuration (... to maintain the original without modification section)
...
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, the new file local.properties under android file, add content sdk.dir In this file = C: \ Sdk (sdk path for your installation directory)
Note: If you have local.properties file will not need to create a new, sdk.dir = C: \ Sdk file must exist
6, modify the app name
Enter: android / app / src / main / res / valuse / strings.xml directory
<resources>
<string name="app_name">你的APP名称</string>
</resources>
7, modify app icons
Enter: android / app / src / the main / res / directory, similar mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi
And other documents, these files are there pictures png format, image size are: 72x72,48x48,96x96,144x144,192x192 format
Note: The original images must be in png format, otherwise an error
8, modify app start page
Step 1: Install the plug-Download
1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen // 自动链接了，就不用手动配置了
3, after executing the above two commands in android / settings.gradle following statement document automatically, following the path set
in '... \ node_modules \ rn-splash -screen \ android' to double slash represents a single slash .
include ':rn-splash-screen'
project(':rn-splash-screen').projectDir = new File(rootProject.projectDir, '..\\node_modules\\rn-splash-screen\\android')
Step 2: Perform configuration on the android
1, add the code shown in android / app / src / main / java / com / xxx / MainActivity.java file
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 directory, the new directory layout in layout directory, create launch_screen.xml file,
copy the following (which launch_screen to start the picture name)
<?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, the android / app / src / main / res directory, the new drawable-xhdpi and drawable-xxhdpi directory in which to put the startup page picture,
named launch_screen.png
4, open the main entrance React-native project file, which is added React-native project /App.js file means closed after 2S launch page, enter the app home page
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>
);
}
}
The third step: the configuration is complete, start the normal display Page
9, a terminal to android cd directory Run
$ gradlew assembleRelease
Note: Use the command $ ./gradlew assembleRelease in macOS and Linux systems
10, after the wait terminal display BUILD SUCCESSFUL performed.
Success lay in android project under / app / build / outputs / apk / release visible just lay apk package
Note: If this package through before the project, an error occurs in the packaging process, please delete the build directory of android / app file and then re-packaged