javascript - 重置主屏幕的导航堆栈(React Navigation 和 React Native)

Question

我对 React Navigation 的导航有问题和 native react 。这是关于重置导航并返回主屏幕。

我在 DrawerNavigator 内部构建了一个 StackNavigator，主屏幕和其他屏幕之间的导航正常。但问题是，导航堆栈不断增长。我不确定如何从堆栈中删除屏幕。

例如，当从主屏幕进入设置屏幕，然后进入进入屏幕，最后再次进入主屏幕时，主屏幕在堆栈中有两次。使用后退按钮我不会退出应用程序，而是会再次进入输入屏幕。

当再次选择主页按钮时，重置堆栈会很好，但我不知道该怎么做。 Here有人试图帮助其他人解决类似问题，但解决方案对我不起作用。

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

这是抽屉屏幕的一个简单例子

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

我希望你能帮助我。这是导航的重要组成部分，如果有解决方案那就太好了!

Answer 1

React Navigation 5.x , 6.x

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

可用在 Snack