Show splash screen before show main screen in react native without using 3rd party library

前端 未结 5 1294
忘掉有多难
忘掉有多难 2021-01-31 10:47

I am beginner in react native so may be my question seems silly to all experts.

but I am struggling with a basic feature that i want to implement that i want to start my

相关标签:
5条回答
  • 2021-01-31 11:22

    You can always do it the native way:

    Fisrt you need images for displaying your splashscreen on different devices:

    • LDPI:
      • Portrait: 200x320px
      • Landscape: 320x200px
    • MDPI:
      • Portrait: 320x480px
      • Landscape: 480x320px
    • HDPI:
      • Portrait: 480x800px
      • Landscape: 800x480px
    • XHDPI:
      • Portrait: 720px1280px
      • Landscape: 1280x720px
    • XXHDPI:
      • Portrait: 960px1600px
      • Landscape: 1600x960px
    • XXXHDPI:
      • Portrait: 1280px1920px
      • Landscape: 1920x1280px

    They need to be png format, then put them on android/app/src/main/res/drawable and create a folder named with the resolution of each image. Ex: drawable/drawable-hdpi.

    Then in the drawable folder you have to create a file named background_splash.xml and put something like this:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item>
            <bitmap
                android:gravity="fill"
                android:src="@drawable/screen"/>
        </item>
    </selector>
    

    After that you have to add a new style in android/app/res/values/styles.xml

    <resources>
    
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
        </style>
    
        <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
            <item name="android:windowBackground">@drawable/background_splash</item>
        </style>
    
    </resources>
    

    Update your AndroidManifest.xml file adding a new activity called SplashActivity and add android:theme="@style/SplashTheme". Now create a empty activity with the name MainActibity. Your AndroidManifest.xml should look something like this:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.exampleapp"
        android:versionCode="1"
        android:versionName="1.0">
    
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    
        <uses-sdk
            android:minSdkVersion="23"
            android:targetSdkVersion="26" />
    
        <application
          android:name=".MainApplication"
          android:allowBackup="true"
          android:label="@string/app_name"
          android:icon="@mipmap/ic_launcher"
          android:theme="@style/AppTheme">
            <activity
                android:name=".SplashActivity"
                android:label="@string/app_name"
                android:theme="@style/SplashTheme">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
            <activity android:name=".MainActivity" 
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustResize"
                android:exported=”true”
            />
          <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        </application>
    
    </manifest>
    

    Now we need to tell SplashActivity to go to the MainActivity, which represents our actual application. To do that you need to create a new Java class named SplashActivity.

    package com.exampleapp; // change to the name of your app.
    
    import android.content.Intent;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    
    public class SplashActivity extends AppCompatActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            Intent intent = new Intent(this, MainActivity.class);
            startActivity(intent);
            finish();
        }
    }
    

    And now you should see a splashscreen.

    https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

    0 讨论(0)
  • 2021-01-31 11:37

    You may try this example.There is no need stacknavigator in splash screen.

    constructor(props){
        super(props);
        this.state = {
            timePassed: false,
        };
    }
    
    componentDidMount() {
        setTimeout( () => {
            this.setTimePassed();
        },1000);
    }
    
    setTimePassed() {
        this.setState({timePassed: true});
    }
    
    render() {
        if (!this.state.timePassed) {
            return <SplashScreen/>;
        } else {
            return <Login/>;
        }
    }
    
    0 讨论(0)
  • 2021-01-31 11:44

    Just Follow this Simple Code.

    App.js

    import { createStackNavigator,createAppContainer } from "react- 
    navigation";
    import Splash from "./Controller/Splash";
    import Login from "./Controller/Login";
    import Register from "./Controller/Register";
    
     const Navigator = createStackNavigator ({
     main: { screen: Splash },
     LoginScreen: { screen : Login },
     });
    
    const AppNavigator = createAppContainer(Navigator);
    
      export default class App extends Component {
      render() {
      return <AppNavigator />;
      }
     }
    

    Splash.js

    import React, { Component } from "react";
    import {View, Text } from "react-native";
    
    export class Splash extends Component {
    
     componentDidMount() {
        setTimeout(() => {
           this.load();
              }, 4000);
        }
    
       load = () => {
            this.props.navigation.push("LoginScreen");
        };
    
        render() {
            return (
         <View >
           <Text style={styles.myText}>Splash Screen</Text>
      </View>
      );
     }
    }
     export default Splash;
    

    Hope this Helps :)

    0 讨论(0)
  • 2021-01-31 11:45

    The correct way to make a Splash Screen in react is to modify root routes. Firstable you need to create the image for your app. You can do this really fast by uploading your image in the site https://apetools.webprofusion.com/app/#/ where it will create a bundle file with all the images for iOs, windows & android and put them in folders for each device. You need to copy those folders to the route of each device, in case you have any folder created, replace it. Route {device}/app/src/main/res/{folder-name}

    In the drawable folder in route {device}/app/src/main/res/drawable you'll have icon.png & screen.png and create a file named

    splash_background.xml in this file add the next text

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
        <bitmap
          android:gravity="fill"
          android:src="@drawable/screen"
        />
      </item>
    </selector>
    

    In the route {device}/app/src/main/java/com/{name-of-project} add a file named SplashActivity.java

    In this file SplashActivity.java add the next:

    package com.prework;
    import android.content.Intent;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    
    public class SplashActivity extends AppCompatActivity {
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
      }
    }
    

    In the route {device}/app/src/main/res/values/styles.xml change it as follow:

    <resources>
    
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
        </style>
        <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
            <item name="android:windowBackground">@drawable/splash_background</item>
        </style>
    
    </resources>
    

    And in the route {device}/app/src/main/res/AndroidManifest.xml change it as follow

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.prework">
    
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    
        <application
          android:name=".MainApplication"
          android:label="@string/app_name"
          android:icon="@drawable/icon"
          android:allowBackup="false"
          android:theme="@style/AppTheme">
    
          <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
          </activity>
    
          <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustResize">
          </activity>
    
          <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        </application>
    
    </manifest>
    

    Now rebuild your app by running in the command line react-native run-android

    0 讨论(0)
  • 2021-01-31 11:46

    That's how I do it:

    1. Create a component for your splash screen and place it at the bottom of your App.js, something like:

      return (
         <>
            <SafeAreaView style={{ flex: 1 }}>
               <StatusBar/>
               <Navigator/>
            </SafeAreaView>
      
            <SplashScreen/>
         </>
      )
      
    2. Your <SplashScreen /> can be something like:

      import React, { useEffect, useState } from 'react'
      import { Image, StatusBar, Text, Animated } from 'react-native'
      
      const SplashScreen = ({ }) => {
         const [done, setdone] = useState(false)
         const animationOpacity = React.useRef(new Animated.Value(1)).current
         const animationScale = React.useRef(new Animated.Value(1)).current
      
         if (done) return null
      
         function hideAnimation() {
              Animated.parallel([
                  Animated.timing(animationOpacity, {
                     toValue: 0,
                     delay: 1000,
                     duration: 400,
                     useNativeDriver: true
                 }),
                 Animated.timing(animationScale, {
                     toValue: 10,
                     delay: 1000,
                     duration: 400,
                     useNativeDriver: true
                 })
              ]).start(() => setdone(true))
          }
      
          hideAnimation()
      
          return (
              <Animated.View style={{
                  backgroundColor: 'black',
                  ...StyleSheet.absoluteFill,
                  justifyContent: 'center',
                  alignItems: 'center',
                  opacity: animationOpacity,
              }}>
      
                  <StatusBar
                      backgroundColor={COLOR.PRIMARY}
                      barStyle='light-content'
                  />
      
                  <Animated.View 
                      style={{
                          justifyContent: 'center',
                          alignItems: 'center',
                          opacity: animationOpacity,
                          transform: [{ scale: animationScale }]
                      }}
                  >
                      <Image /> // some image or icon
                      <Text>Some text</Text>
                  </Animated.View>
      
              </Animated.View>
          )
      }
      
      export default SplashScreen
      
    3. Adjust the Animation params, backgroundColor, Image, Text according to your needs.

    0 讨论(0)
提交回复
热议问题