Question

我正在启动一个应用程序，此刻我有两个视图，一个叫Splash，另一个叫Home。碰巧当启动画面结束时，它会带我进入主视图，但是在此视图中，用户向后按下按钮，应用程序会再次向我显示启动画面。有办法避免这种情况吗？这个想法是在主视图中无法回滚该应用程序。

MainStackNavigator.js

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import Splash from '../views/Splash/Splash';
import Home from '../views/Home/Home';

const Stack = createStackNavigator()

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Splash' component={Splash} options={{ headerShown: false}} />
        <Stack.Screen name='Home' component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MainStackNavigator

Splash.js

import React, { Component } from 'react'
import { View, ImageBackground, Image } from 'react-native'

// import SplashContext from '../../state/splashContext'

var bg = require('../../../assets/img/bg.png');
var logo = require('../../../assets/img/logo.png')

export default class Splash extends Component {  
 
    constructor(props) {
        super(props);
        setTimeout(() => {
            this.props.navigation.navigate("Home");    
        }, 500)    
    }    
    render() {
        return (
            <ImageBackground
                source={bg}
                style={{ height: '100%', width: '100%' }}>
                <View
                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={logo}
                        style={{ height: 100, width: 100 }}
                    >
                    </Image>
                </View>
            </ImageBackground>    
        );
    }    
}

Home.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'   

export default class Splash extends Component {
    render() {
        return (
            <View
                style={{ flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center' }}
            >
                <Text
                    style={{ fontSize: 30 }}
                >Homse</Text>
            </View>    
        );
    }    
}

App.js

import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator'
const App: () => React$Node = () => {
  return (
   <MainStackNavigator></MainStackNavigator>
  );
};

export default App;

Answer 1

使用“导航”将转到下一页，将其添加到堆栈导航器中。相反，您想用主页替换当前页面（初始屏幕）。这可以使用 replace函数

this.props.navigation.replace("Home");

请参见https://reactnavigation.org/docs/navigation-prop/

Answer 2

您可以使用模式在信息加载时在同一屏幕上显示启动画面，而不用使用两个不同的视图。在视图状态下将一个“正在加载”变量初始化为“ true”。该变量将是模态的“可见性”布尔值。加载完所有内容后，将“ loading”变量更改为“ false”。

下面是带有“ useState”钩子的示例：

const [isLoading, setIsLoading] = useState(true);
const loadInfo = async () => {
   /*do your stuff*/
   /*after stuff's done*/
   setIsLoading(false);
};
if (isLoading) {
    return (
        <MySplashScreenModal/>
    );
} else {
    return (
        <MyHomeScreen/>
    );
}

使用模式的主要原因是因为您可以用它覆盖整个屏幕，包括状态栏。

Answer 3

我将此插件用于我的android和ios应用程序的初始屏幕，并且运行良好且流畅。我推荐大家

React native bootsplash for splash screen

启动画面反应本机

3 个答案: