如何添加启动画面？答案

【问题标题】：How to add splashscreen?如何添加启动画面？
【发布时间】：2019-01-25 10:09:14
【问题描述】：

我想在 HomeScreen 出现之前向我的代码添加启动画面。

这是我的新 Splashscreen.js 文件

import React from 'react';
import { StatusBar, View, Text, ActivityIndicator } from 'react-native';
import HomeScreen from './screens/HomeScreen.js';

export default class SplashScreen extends React.Component {

    render() {
        return(

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content" />
                <Text style={{ color: 'white', fontSize: 18}}>WELCOME</Text>
                <ActivityIndicator color={'white'} />
            </View>,

        );
    }
}

这是我的新 App.js 文件

  import React, {Component} from 'react';
import { Keyboard, Alert } from 'react-native';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import HomeScreen from './screens/HomeScreen.js';

/** Importing navigator */
import AppDrawerNavigator from './drawerNavigator';

/** Redux **/
import { createStore } from 'redux';

import { Provider } from 'react-redux';
import SplashScreen from './screens/SplashScreen.js';

const initialState = {
    username: null,
    password: null,
};



const reducer = (state=initialState, action) => {
    if(action.type) {
        console.log('NEW',action.name);
    }
    return {state, username: action.name, password: action.pass};
}

const store = createStore(reducer);

class App3 extends React.Component {

    componentWillMount() {
        this.state = {
            view: <SplashScreen />
        };

        setTimeout(() => {
            this.setState({
                view: <HomeScreen />
            })
        }, 2000)
    }

    render() {
      return (
        // this.state.view,
        <Provider store = {store}>
            <AppContainer />
        </Provider>

      );
    }
}

export default App3;



const AppStackNavigator = createStackNavigator(
  {

    Home: {
        screen: HomeScreen
    },
    Welcome: {
        screen: AppDrawerNavigator
    }
  },
  {
    initialRouteName: 'Home',
    headerMode: "none",
  }
);

const AppContainer = createAppContainer(AppStackNavigator);

如果您想查看我的其他屏幕和文件，可以查看此link。

我想在不影响现有功能的情况下将我创建的启动画面文件添加到现有代码中。我想实现以下目标：

打开应用程序
显示启动画面一秒钟。
如果之前未登录，则转到登录屏幕，否则直接从启动屏幕转到欢迎屏幕

【问题讨论】：

标签： react-native react-redux react-navigation

【解决方案1】：

我建议您看一下 Spencer Cali 的中篇文章。它包括逐步为 RN 应用程序添加启动画面。 How to Add a Splash Screen to a React Native App (iOS and Android)

【讨论】：

我已经检查过了，但这涉及更改 java 文件和所有内容。我想通过创建一个简单的初始屏幕来使其变得简单，首先将其导航到登录屏幕（在我的情况下为主屏幕），然后在登录按钮上单击导航到 WelcomeScreen。
如果您使用的是 react-native-navigation。我会建议一个处理它的 npm 包。但是，使用 react-naviation 设置它的正确方法是按照中篇文章中描述的说明进行操作。它们可能听起来很长，但它们真的很简单，你会确信它永远存在。

【解决方案2】：

对于 react-native 你不需要为启动画面创建文件。

只需按照下面的启动屏幕包进行操作，我建议你这是一个非常好的库，有很多用户，是的，我总是更喜欢这个库用于启动屏幕。

您只需要为初始屏幕创建图像，无论您想在初始时向用户显示什么。

react-native-splash-screen

您可以在此处找到所有详细信息并逐步进行操作，这将对您有所帮助。它总是对我有帮助！

【讨论】：

【解决方案3】：

启动画面和加载画面不同。当应用程序从终止状态打开时显示启动屏幕。

之后，一些应用程序会显示用于处理后台逻辑的加载屏幕，例如检查用户登录、获取数据等。

在您的情况下，您希望显示身份验证流程的加载屏幕。

使用这种方式。 React Navigation Auth flows

这个流程如下。

显示加载屏幕并检查用户身份
根据验证结果导航到另一个屏幕。

if (loggedIn) { this.props.navigation.navigate('SignUpScreen') } 
else { this.props.navigation.navigate('HomeScreen') }

快乐！

如果你想使用闪屏而不是加载屏幕，我建议使用rn-toolbox。

【讨论】：