在不使用第 3 方库的情况下在 React Native 中显示主屏幕之前显示启动画面

Question

我是 React Native 的初学者，所以也许我的问题对所有专家来说都很愚蠢。

但我正在努力实现一个我想实现的基本功能，我想用启动画面启动我的应用程序，几秒钟后我想显示登录屏幕或主屏幕。

我检查了一些示例，但没有找到任何包含完整代码的示例，所以不知道如何在我的应用程序中使用这些代码片段。

我已尝试根据文档应用一些代码，但我的代码出现错误，请查看并帮助我。

下面是我的代码：

Index.android.js


    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator
    } from 'react-native';
    import Splash from './Splash';
    import Login from './Login';
    
    export default class DigitalReceipt extends Component {
      render() {
        return (
           {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
        );
      }
      renderScene(route, navigator) {
        var routeId = route.id;
        if (routeId === 'Splash') {
          return (
            
          );
        }
        if (routeId === 'Login') {
          return (
            
          );
        }
        return this.noRoute(navigator);
      
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    AppRegistry.registerComponent('DigitalReceipt', () => DigitalReceipt);

Splash.js


    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Login from './Login';
    
    class Splash extends Component{
        componentWillMount() {
            var navigator = this.props.navigator;
            setTimeout(() => {
                navigate('Login')
            }, 1000);
          }
          
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                     
                         
                        Digital Receipt  
                    
                    
                        Powered by React Native  
                     
                
            );
        }
    }
    const SplashApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        },
        subtitle:{
            color: '#2ea9d3',
            fontWeight: '200',
            paddingBottom: 20
        },
        titleWrapper:{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
    
        logo:{
            width: 96,
            height: 96
        }
    });
    
    AppRegistry.registerComponent('SplashApp', () => SplashApp);

Login.js


    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Splash from './Splash';
    
    class Login extends Component{
        static navigationOptions = {
            title: 'Welcome',
          };
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                    
                        Login Screen  
                     
                
            );
        }
        
    }
    const LoginApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        }
    });
    AppRegistry.registerComponent('LoginApp', () => LoginApp);

请帮助我，如果您发现任何代码中的愚蠢错误，我们深表歉意。

谢谢

Answer 1

您可以试试这个例子。启动画面中不需要stacknavigator

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/>;
    }
}

Answer 2

你总是可以用原生的方式来做：

首先，您需要在不同设备上显示启动画面的图像：

低密度脂蛋白：
- 纵向：200x320px
- 横向：320x200px
MDPI：
- 纵向：320x480px
- 横向：480x320px
HDPI：
- 纵向：480x800px
- 横向：800x480px
XHDPI:
- 纵向：720px1280px
- 横向：1280x720px
XXHDPI:
- 纵向：960px1600px
- 横向：1600x960px
XXXHDPI：
- 纵向：1280px1920px
- 横向：1920x1280px

它们需要是 png 格式，然后将它们放在 android/app/src/main/res/drawable 上并创建一个以每个图像的分辨率命名的文件夹。例如：drawable/drawable-hdpi.

然后在 drawable 文件夹中，您必须创建一个名为 background_splash.xml 的文件，并放入如下内容：

<?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>

之后您必须在 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>

更新您的 AndroidManifest.xml 文件，添加一个名为 SplashActivity 的新 activity 并添加 android:theme="@style/SplashTheme"。现在创建一个名为 MainActibity 的空 activity。您的 AndroidManifest.xml 应如下所示：

<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>

现在我们需要告诉 SplashActivity 转到 MainActivity，它代表我们的实际应用程序。为此，您需要创建一个名为 SplashActivity.

的新 Java class

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();
    }
}

现在您应该会看到启动画面。

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

Answer 3

在react中制作启动画面的正确方法是修改根路由。首先，您需要为您的应用创建图像。您可以通过在站点 https://apetools.webprofusion.com/app/#/ 上传您的图像来非常快速地完成此操作，它将创建一个包含 iOs、windows 和 android 的所有图像的捆绑文件并将它们放入在每个设备的文件夹中。您需要将这些文件夹复制到每个设备的路径，如果您创建了任何文件夹，请替换它。路线 {device}/app/src/main/res/{folder-name}

在路线 {device}/app/src/main/res/drawable 的可绘制文件夹中，您将拥有 icon.png & screen.png 并创建一个名为

的文件

splash_background.xml 在此文件中添加下一个文本

<?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>

在路由 {device}/app/src/main/java/com/{name-of-project} 中添加一个名为 SplashActivity.java

的文件

在此文件中 SplashActivity.java 添加下一个：

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();
  }
}

在路由{device}/app/src/main/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/splash_background</item>
    </style>

</resources>

然后在路由中{device}/app/src/main/res/AndroidManifest.xml修改如下

<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>

现在通过运行在命令行 react-native run-android

中重建您的应用程序

Answer 4

只需遵循这个简单的代码。

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;

希望对您有所帮助:)

Answer 5

我就是这样做的：

为启动画面创建一个组件并将其放在 App.js 的底部，例如：

return (
   <>
      <SafeAreaView style={{ flex: 1 }}>
         <StatusBar/>
         <Navigator/>
      </SafeAreaView>

      <SplashScreen/>
   </>
)

您的 <SplashScreen /> 可以是这样的：

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

根据需要调整Animation params, backgroundColor, Image, Text。

Answer 6

function App() {
  const [isloading, setisloading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setisloading(!isloading);
    }, 3000);
  }, []);

  return (
    <AuthContextProvider>
      <Provider theme={theme}>
        <NavigationContainer>
          {isloading ? <Loading /> : <Select />}
        </NavigationContainer>
      </Provider>
    </AuthContextProvider>
  );
}

想做什么就做什么<Loading />

在不使用第 3 方库的情况下在 React Native 中显示主屏幕之前显示启动画面

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

splash-screen

react-native

react-navigation