React Navigation：如何避免返回操作回到启动屏？

我明白你的问题啦——启动屏跳转后主栈，用户按返回键居然又回到启动屏，这确实很影响体验！问题出在默认的导航栈会把启动屏保留在栈里，所以返回时会回溯到它。这里有两种靠谱的解决办法，你可以根据自己的情况选：

方法一：跳转时重置导航栈（推荐，适合用导航栈管理启动屏的情况） #

在你的Splashscreen组件里，不要用普通的navigate跳转，而是用reset操作直接替换整个导航栈，把启动屏从栈里彻底移除。这样主屏幕就成了栈的第一个页面，返回时就直接退出应用了。

具体代码示例：

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

class Splashscreen extends Component {
  componentDidMount() {
    // 设置你需要的启动时长，比如3秒
    setTimeout(() => {
      this.props.navigation.reset({
        index: 0,
        routes: [{ name: 'Mainscreen' }] // 这里填你主栈的路由名称
      });
    }, 3000);
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>启动中...</Text>
      </View>
    );
  }
}

export default Splashscreen;

方法二：让启动屏脱离导航栈（更彻底的方式） #

如果不需要把启动屏纳入导航栈管理，你可以在App的根组件里直接控制渲染逻辑：先显示启动屏，计时结束后直接切换到主导航栈。这样启动屏根本不在导航栈里，自然不会出现返回的问题。

示例代码（App.js）：

import React, { Component } from 'react';
import Splashscreen from './Splashscreen';
import { Root } from './Root'; // 你的主导航栈组件

class App extends Component {
  state = {
    isSplashActive: true
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ isSplashActive: false });
    }, 3000);
  }

  render() {
    return this.state.isSplashActive ? <Splashscreen /> : <Root />;
  }
}

export default App;

这时候你的Root导航栈就不需要包含Splashscreen路由了，直接配置主页面即可：

const NewsStack = StackNavigator({ /* 你的主页面路由 */ });
export const Root = StackNavigator({
  Mainscreen: { screen: NewsStack }
});

两种方法都能解决你的问题，第一种适合需要在启动屏里用导航相关功能的场景，第二种更轻量直接。你可以试试哪种更适配你的项目~

内容的提问来源于stack exchange，提问作者Jude Fernandes