Question

我想在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。

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

打开应用程序
显示启动画面一秒钟。
如果未登录则进入登录屏幕，否则直接从启动屏幕进入“欢迎屏幕”

Answer 1

对于本机用户，不需要为启动屏幕创建文件。

只需遵循波纹管软件包进行启动屏幕，我建议您这是一个非常好的库，有很多用户，是的，我始终喜欢此库用于启动屏幕。

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

react-native-splash-screen

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

Answer 2

我建议您阅读Spencer Cali Cali的中篇文章。它涵盖了逐步为RN应用添加启动屏幕。 How to Add a Splash Screen to a React Native App (iOS and Android)

Answer 3

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

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

在这种情况下，您看起来会显示认证流程的加载屏幕。

使用这种方式。 React Navigation Auth flows

此流程如下。

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

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

开心！

如果您要使用启动屏幕而不是加载屏幕，建议使用rn-toolbox。

如何添加启动画面？

3 个答案: