The React-Native startup page is blank

When developing react Native, there will be an obvious blank period when the app starts, which brings bad experience.

1. Install the react – native – splash screen

npm i react-native-splash-screen --save // Download dependencies

npx react-native link react-native-splash-screen
Copy the code

After executing the second command, the following statement is automatically generated in the Android /settings.gradle file:

Will be… \node_modules\ Rn-splash -screen\ Android single slash is changed to double slash

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

2. Perform related configurations on Android

The android/app/SRC/main/Java/com/XXX/MainActivity. Add the code shown in the Java file

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


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

Copy the code

3. Create a directory to save the startup page image and configuration

  1. In the android/app/ SRC /main/res directory, create the launch_screen. XML file and copy the launch_screen.
    
      
  <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>
Copy the code

  1. In the Android /app/ SRC /main/res directory, create a drawable directory and place the image of the launch page in it. Name it launch_screen.png

  2. Add the code to the React Native project’s main entry file, the app.js file

    import SplashScreen from 'react-native-splash-screen';
    class App extends Component {
        constructor(props) {
            super(props)
        }
        componentDidMount() {
            setTimeout(() = > {
                SplashScreen.hide(); // Close the startup screen
            }, 2000);
        }
        render() {
            return (
              <View>
                <Text>Welcome to React Native!</Text>
              </View>); }}Copy the code