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

Question

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

我应该可以在那里看到主屏幕，但目前它显示 屏幕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 选项卡时比较当前屏幕上的值来解决问题。

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
    }
  }

Answer 3

问题

您的代码很好，事情是当您从 Home -> Screen 3 导航到配置文件时，导航堆栈具有 Screen 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 以了解正确的版本和正确的用法，但这应该让您了解如何操作它。

希望对您有所帮助！