splash screen react native

Question

I'm starting an app and I have two views at the moment, one called Splash and the other called Home. It happens that when the splash is over it leads me to the Home view, but in this view the user presses the button backwards, the app shows me the splash again. Is there a way to avoid this? the idea is that being in the Home view there is no way to roll back the application.

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

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

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

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