时间戳

首页 > 解决方案 > 使用堆栈导航的选项卡导航中的不良行为

html - 使用堆栈导航的选项卡导航中的不良行为

问题描述

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

我尝试传递道具“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
  })

标签： htmlreact-nativereact-navigationexpo

解决方案

您在这里有 2 个选择：

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

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

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

然后你可以使用 willBlur 来做pop(1)你的屏幕

推荐阅读