React-Native startup page

This article will introduce in detail how the APP sets the name, icon and startup page from the two ends of Androidand respectively.IOS

First, we go to the icon factory to upload an 1024x1024icon, and then generate icons of all sizes with one click, and download them for use at both ends.

IOS side

setting name

In Xcode, click on your project to modify Display Namethe name of the APP on the right side

settings icon

Open the icon group folder downloaded above, and drag the entire directory into the directory of the project iosto replace the original file.AppIcon.appiconsetios/rn(工程名)/Images.xcassets

Go back to Xcode and you can see that icons of all sizes have been set successfully

Re-run the project to see the icon.

If re-running the project icon still does not take effect, please confirm Copy Bundle Resourceswhether there isImages.xcassets

Set startup page

First install react-native-splash-screen

yarn add react-native-splash-screen

Then enter iosthe directory and executepod install

Open the project with Xcode, AppDelegate.mimport RNSplashScreen.hthe file in the file, and add the display code.

#import "RNSplashScreen.h" // 导入

[RNSplashScreen show]; // 显示启动屏

Then create a startup map container

image.png

The same is still going to the icon factory to make a startup image

image.png

iosDrag the under directory in the downloaded startup image folder LaunchImage.launchimageinto ios/rn(工程名)/Images.xcassetsto replace the original file.

image.png

then view App Icons and Launch Imagesitems

image.png

We need to Launch Screen Fileleave empty, so that the default will not be LaunchScreen.storyboardused

So we need to Build Settingssearch in Asset Catalog Launch Image Set Nameand then create the startup page name

image.png

Then modify infoit inLaunch screen interface file base nameLaunchImage

image.png

The latter Valueis changed toLaunchImage

image.png

Finally, set how long to close the startup map in the home page in RN

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

export default class Home extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide();
    }, 3000);
  }
  render() {
    return (
      <View style={styles.content}>
        <Text style={
   
   {fontFamily: 'FZSJ-LIANGWZDQS'}}>
          智者一切求自己，愚者一切求他人。
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Restart to see the effect

LaunchImage.png

Android side

setting name

modify android/app/src/main/res/values/strings.xmlfile

<resources>
    <string name="app_name">自动驾驶</string>
</resources>

settings icon

Open the icon group folder downloaded above, and drag androidthe 6 folders under the directory into android/app/src/main/resthe directory to replace them. and change both the and android/app/src/main/AndroidManifest.xmlof the file to the name of the iconiconroundIcon

image.png

Recompile and run to see the effect

Set startup page

androidDrag the 6 folders under the directory in the downloaded startup image folder into android/app/src/main/resthe directory.

image.png

android/settings.gradleAdd these two lines of code to the file

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

image.png

Then android/app/build.gradleimport in the filereact-native-splash-screen

implementation project(':react-native-splash-screen')

image.png

Then android/app/src/main/java/com.rn(项目名)/MainActivity.javaimport the Android package in the file

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);  // 显示
  super.onCreate(savedInstanceState);
}

image.png

android/app/src/main/java/com.rn(项目名)/MainApplication.javaIntroduce in the file

 import org.devio.rn.splashscreen.SplashScreenReactPackage;

image.png

android/app/src/main/resCreate a folder under and create a file layoutunder that folderlaunch_screen.xml

<?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/screen">
</LinearLayout>

Create a file under android/app/src/main/res/valuesthe foldercolor.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

In android/app/src/main/res/values/styles.xmlthe file add

<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>

image.png

Recompile to see the effect

Author: Infinity 369
Link: https://www.jianshu.com/p/ce7ee8efd42c

React-Native startup page

Guess you like