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

Question

我在React Navigation和React Native 的导航方面遇到了问题.它是关于重置导航并返回主屏幕.

我在DrawerNavigator中构建了一个StackNavigator,主屏幕和其他屏幕之间的导航工作正常.但问题是,导航堆栈的增长和增长.我不知道如何从堆栈中删除屏幕.

例如,当从主屏幕进入设置屏幕,然后进入输入屏幕并最后再次进入主屏幕时,主屏幕在堆栈中是两次.使用后退按钮我不会离开应用程序,但再次进入输入屏幕.

再次选择主页按钮时,堆栈的重置会很好,但我不知道如何执行此操作.这里有人试图帮助其他有类似问题的人,但解决方案对我不起作用.

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

反应导航 5.x

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

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

有零食

Answer 2

这是我怎么做的:

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

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

Answer 3

我是这样做的:

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 4

我在使用@react-navigation Bashirpour's Answer时发现了这种方法。然而，在尝试已经有导航的功能组件时，props这是一种编写重置堆栈操作的巧妙方法：

props.navigation.reset({
     index: 0,
     routes: [{ name: 'Dashboard' }]
})

Answer 5

对于最新版本的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 6

在 React 导航版本 5.x 中

\n

StackActions.replace您可以在这个版本中使用

\n

import { StackActions } from \'@react-navigation/native\';\n\n\nnavigation.dispatch(\n    StackActions.replace(\'Home\', { test: \'Test Params\' })\n)\n

\n

\xe2\x80\x8c

\n

完整示例：（以零食形式提供）

\n

import * as React from \'react\';\nimport { View, Button, Text } from \'react-native\';\nimport { NavigationContainer, StackActions } from \'@react-navigation/native\';\nimport { createStackNavigator } from \'@react-navigation/stack\';\n\nfunction SplashScreen({ navigation }) {\n  return (\n    <View style={{ flex: 1, alignItems: \'center\', justifyContent: \'center\' }}>\n      <Text style={{fontSize:25,marginBottom:25}} >SPLASH SCREEN!</Text>\n      <Button\n        title="Replace (RESET) with Home"\n        onPress={() =>\n          navigation.dispatch(\n            StackActions.replace(\'Home\', { test: \'Test Params\' })\n          )\n        }\n      />\n      <View style={{margin:10}}/>\n      <Button\n        title="Push Home on the stack"\n        onPress={() =>\n          navigation.dispatch(StackActions.push(\'Home\', { test: \'Test Params\' }))\n        }\n      />\n    </View>\n  );\n}\n\nfunction HomeScreen({ navigation, route }) {\n  return (\n    <View style={{ flex: 1, alignItems: \'center\', justifyContent: \'center\' }}>\n      <Text style={{fontSize:25,marginBottom:25}}>Home Screen!</Text>\n\n      <Text style={{margin:10}}>{route.params.test}</Text>\n\n      <Button\n        title="Push same screen on the stack"\n        onPress={() => navigation.dispatch(StackActions.pop(1))} \n      /> \n      <View style={{margin:10}}/>\n      <Button\n        title="Pop one screen from stack" \n        onPress={() =>\n          navigation.dispatch(StackActions.push(\'Home\', { test: \'Test Params\' }))\n        }\n      />\n      <View style={{margin:10}}/>\n      <Button\n        title="Pop to top" \n        onPress={() => navigation.dispatch(StackActions.popToTop())}\n      />\n    </View>\n  );\n}\n\nconst Stack = createStackNavigator();\n\nexport default function App() { \n  return (\n    <NavigationContainer>\n      <Stack.Navigator>\n        <Stack.Screen name="Splash" component={SplashScreen} />\n        <Stack.Screen name="Home" component={HomeScreen} />\n      </Stack.Navigator>\n    </NavigationContainer>\n  );\n}\n\n

\n