React-Native如何清除内部导航堆栈？

Question

我是React-native的新手，正在开发一个具有底部标签导航的应用程序。为此，我使用了 react-navigation-material-bottom-tabs ，它可以正常工作就像我有3个屏幕一样，在底部标签导航器中显示Home，Profile和About。但是在 Home 屏幕中，我要实现多个屏幕流程。为此，我使用了 Stack导航器，它也可以正常工作。所以我的应用程序流程就像Home-> Screen1-> Screen2-> Screen3 我面临的问题是，假设我在Screen3上，然后从底部导航切换到个人资料屏幕，然后再次切换到主页屏幕

  

我应该可以在其中看到主屏幕，但当前显示   屏幕3

这是我离开的地方，我该怎么办？ 以下是我的代码

App.js（包含底部导航）

export default BottomTabNavigator = createMaterialBottomTabNavigator(
{
Home: {
  screen: HomeRoutes,
  },
},
Profile: {
  screen: ProfileScreen,
},
About: {
  screen: AboutScreen,
 },
},
{
initialRouteName: 'Home',
},
);

HomeRoutes.js

export default createStackNavigator(
{
  Home:{
     screen: Home,
   },
  Screen1: {
     screen: Screen1,
   },
Screen2: {
    screen: Screen2,
  },
Screen3: {
  screen: Screen3,
   },
},
{
  initialRouteName: 'Home',
},
);

或者当我从主屏幕导航到screen1时，底部标签导航不会显示给用户吗？

Answer 1

BottomTabNavigator和StackNavigator的屏幕名称应该不同。

您可以按以下方式更改此代码。

export default createStackNavigator(
  {
    CHome:{
      screen: Home,
    },
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
  },
  {
    initialRouteName: 'CHome',
  },
);

Answer 2

问题

您的代码很好，就是当您从Home->屏幕3导航时说Profile，导航堆栈具有屏幕3的历史记录，这是堆栈上的最后一条路线，因此当您回到Home时，它将向您显示Screen 3不是屏幕1。

解决方案

一种简单的方法是，在致电this.props.navigation.navigate('Profile')之前，您可以清除堆积的路线，如下所示：

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

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

注意：：不确定所使用的react-navigation版本是什么，因此请检查文档here以获得正确的版本和正确的用法，但这应该可以使您有所了解怎么做的。

希望这会有所帮助！

Answer 3

我认为您想在再次按下主屏幕标签时再次看到主屏幕。然后可以通过在再次按“主页”选项卡时比较当前屏幕上的值来解决问题。

HomeRoute中的最后一个屏幕

import { StackActions } from 'react-navigation';
...
let chk = false
...
 componentDidUpdate(){
    if (!chk){
      chk = true // Change value when rendering screen
    } else {
      //The popToTop action takes you back to the first screen in the stack, dismissing all the others.
      this.props.navigation.dispatch(StackActions.popToTop()); 
      chk = false //Initialization
    }
  }