使用堆栈导航的选项卡导航中的不良行为答案

【问题标题】：Bad behaviour in Tabs Navigation With Stack Navigation使用堆栈导航的选项卡导航中的不良行为
【发布时间】：2019-07-17 18:13:55
【问题描述】：

我正在设置一个带有堆栈导航的选项卡，当我尝试更改组件时出现意外行为。当我浏览选项卡时，我想打开堆栈导航的第一个组件。请查看此video，以便您了解我的意思。

我尝试传递道具“initialRouteName”但不起作用。这是我的代码：

const familyStackNavigator = createStackNavigator({
  main: { screen: parentFamilyScreen },
  resume: { screen: ResumeChildScreen }
},
{
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'main',
});

const parentAppStack = createMaterialBottomTabNavigator({
  family: {
    screen: familyStackNavigator,
    navigationOptions: {
      tabBarIcon: FirstTabIcon,
      title: 'Familia'
    }
  },
  bag: {
    screen: parentBagScreen,
    navigationOptions: {
      tabBarIcon: SecondTabIcon,
      title: 'Bolsillo'
    }
  },
  {
    initialRouteName: 'family',
    activeColor: '#ED0F21',
    inactiveColor: '#333333',
    barStyle: { backgroundColor: 'white' },
    labeled: true
  })

【问题讨论】：

我相信这个答案会有所帮助：stackoverflow.com/a/48056079/3832047.

标签： html react-native react-navigation expo

【解决方案1】：

你有两个选择：

要么将您的bottomTabNavigator 隐藏在嵌套屏幕内以防止其导航，要么使用react-navigation 的导航事件。

这些是文档https://reactnavigation.org/docs/en/navigation-events.html 用于在渲染中声明它们

这些是文档https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle 用于在屏幕内添加事件监听器

然后您可以使用 willBlur 对您的屏幕进行pop(1)

【讨论】：