反应导航5.x

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'})
                    ]
                  }));
  }

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

Answer 2

反应导航5.x

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

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

在Snack中可用

Answer 3

我是这样做的：

 while (n>0)
 {
    a=n%10;
    n=n/10;
    r=r*10+a;
 }

重要的部分是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'包装在一起，将它们放在任何组件上。

Answer 4

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

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

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

Answer 6

要使用Back，您需要找到与路径关联的唯一键。在您的导航减速器中，您可以搜索现有状态以使用该路径查找堆栈中的第一个路径，获取其键和＆amp;把它传递给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 7

NavigationActions.reset()似乎是更可取的解决方案。我在执行操作时遇到的一个问题是选项卡按钮。即使我在组件中明确将其关闭，选项卡仍然会显示。如果我使用navigation.navigate（）而不是通过reset()进行此操作，那么它将很好。

SomeComponentScreen.navigationOptions = {
  header: null
};

对此烦恼的解决方法对我有用，是连续调用多个navigate语句。

      navigation.goBack();   // this would pop current item in stack
      navigation.navigate({
        routeName: 'SomeOtherComponent'
      });

Answer 8

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

因此，当您从家中导航以登录时，堆栈不会保留。

更多信息 assignment

Answer 9

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

希望这会有所帮助：）

Answer 10

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

n-数字-弹出的屏幕数。

从“反应导航”导入{StackActions};

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

this.props.navigation.dispatch（popAction）;

Answer 11

只需混合上面给出的两个解决方案，它就可以正常工作，基本上我们必须使用StackActions和key：null。不使用StackActions，就会抛出一些错误

import { NavigationActions, StackActions } from 'react-navigation';
const resetHandler = () => {
        props.navigation.dispatch(StackActions.reset({
            index: 0,
            key: null,
            actions: [NavigationActions.navigate({ routeName: 'PatientDetails' })]
        }))
    };

Answer 12

到目前为止，该方法还可以正常运行：

import { NavigationActions, StackActions } from 'react-navigation'

resetStack = () => {
        const navigateAction = NavigationActions.navigate({
            routeName: 'Home',

            params: {},

            action: NavigationActions.navigate({ routeName: 'Home' }),
        });

        props.navigation.dispatch(navigateAction);
    }

在文档中找到此处：https://reactnavigation.org/docs/en/navigation-actions.html#reset

Answer 13

在React Navigation版本5.x中

您可以在此版本中使用import { StackActions } from '@react-navigation/native'; navigation.dispatch( StackActions.replace('Home', { test: 'Test Params' }) )

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function SplashScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{fontSize:25,marginBottom:25}} >SPLASH SCREEN!</Text>
      <Button
        title="Replace (RESET) with Home"
        onPress={() =>
          navigation.dispatch(
            StackActions.replace('Home', { test: 'Test Params' })
          )
        }
      />
      <View style={{margin:10}}/>
      <Button
        title="Push Home on the stack"
        onPress={() =>
          navigation.dispatch(StackActions.push('Home', { test: 'Test Params' }))
        }
      />
    </View>
  );
}

function HomeScreen({ navigation, route }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{fontSize:25,marginBottom:25}}>Home Screen!</Text>

      <Text style={{margin:10}}>{route.params.test}</Text>

      <Button
        title="Push same screen on the stack"
        onPress={() => navigation.dispatch(StackActions.pop(1))} 
      /> 
      <View style={{margin:10}}/>
      <Button
        title="Pop one screen from stack" 
        onPress={() =>
          navigation.dispatch(StackActions.push('Home', { test: 'Test Params' }))
        }
      />
      <View style={{margin:10}}/>
      <Button
        title="Pop to top" 
        onPress={() => navigation.dispatch(StackActions.popToTop())}
      />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() { 
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Splash" component={SplashScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

‌

完整示例：（在Snack中提供）

28GB

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

13 个答案:

反应导航5.x

在React Navigation版本5.x中

完整示例：（在Snack中提供）