重置主屏幕的导航堆栈（React Navigation和React Native）

Question

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

我在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

这是我怎么做的：

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }

至少用'Home'替换'Menu'。您可能还希望将this.props.navigation改编为您的实现。

Answer 2

我是这样做的：

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

重要的是key: null。

这会在从子导航器导航到父导航器的同时擦除堆栈。

如果您收到此错误，请执行此操作：

对于动画，我使用

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

我只是自己控制所有的动画。通过<Animatable.View>将它们包装在任何你想要的组件上。

Answer 3

对于最新版本的react-navigation，您应该使用StackActions重置堆栈，这是一段代码：

// import the following
import { NavigationActions, StackActions } from 'react-navigation'

// at some point in your code
resetStack = () => {
 this.props
   .navigation
   .dispatch(StackActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({
         routeName: 'Home',
         params: { someParams: 'parameters goes here...' },
       }),
     ],
   }))
}

Answer 4

要使用Back，您需要找到与路径关联的唯一键。在导航缩减器中，您可以搜索现有状态以使用该路径查找堆栈中的第一个路径，获取其键并将其传递给Back。然后返回将导航到您给出的路径之前的屏幕。

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );

Answer 5

答案是createSwitchNavigator，它不会叠加你的导航。使用主屏幕/堆栈在createSwitchNavigator中添加您的身份验证屏幕/导航器。

这样，当您从主页导航到登录时，不会保留堆栈。

有关它的更多信息https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

Answer 6

在您的StackNavigator和DrawerNavigator中，您使用Home作为键，我认为它必须是唯一的，这就是它创建问题的原因。你可以尝试用DrawerNavigator中的Stack替换Home。

希望这会有所帮助:)

Answer 7

弹出操作会将您带回到堆栈中的上一个屏幕。 n参数允许您指定要弹出的屏幕数量。

n - number - 要弹回的屏幕数。

从'react-navigation'导入{StackActions};

const popAction = StackActions.pop（{n：1，}）;

this.props.navigation.dispatch（popAction）;