javascript - 闪屏 react 原生

Question

我正在启动一个应用程序，目前我有两个 View ，一个称为 Splash，另一个称为 Home。碰巧当启动画面结束时，它会将我带到主视图，但在此 View 中，用户向后按下按钮，应用程序会再次向我显示启动画面。有没有办法避免这种情况？这个想法是在主页 View 中没有办法回滚应用程序。
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

飞溅.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>    
        );
    }    
}

主页.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>    
        );
    }    
}

应用程序.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/