Question

我有一个简单的createBottomTabNavigator，其中一个标签页是createStackNavigator，在此stack内，我有一个屏幕，希望它覆盖标签栏。我尝试在此屏幕上使用tabBarVisible: false，但那里没有运气。

代码：

const BookingsStack = createStackNavigator({
  Commutes: {
    screen: Commutes,
    navigationOptions: {
      title: "Commutes",
      header: null,
    }
  },
  Tickets: {
    screen: Tickets,
    navigationOptions: {
      title: "Tickets",
      header: null,
      tabBarVisible: false
    }
  }
});

export const MainNav = createBottomTabNavigator({
  Current: {
    screen: Current,
    navigationOptions: {
      title: "Current",
      tabBarIcon: ({ tintColor }) => (
        <IconIO name="ios-bus" size={scale(20)} color={tintColor} />
      )
    }
  },
  BookingsStack: {
    screen: BookingsStack,
    navigationOptions: {
      title: "Commutes",
      tabBarIcon: ({ tintColor }) => (
        <IconSL name="layers" size={scale(20)} color={tintColor} />
      )
    }
  }
}

Answer 1

如导航文档中所述：

如果我们想从Feed主页导航到详细信息屏幕时隐藏标签栏，而无需重新排列导航器，则无法在tabBarVisible: false的{{1}}中设置navigationOptions配置，因为这些选项仅适用于DetailsScreen。相反，我们可以执行以下操作：

FeedStack

Answer 2

我在react-navigation文档中找到了一个解决方案-实现如下所示：

const ChildMainNav = createBottomTabNavigator({
  Current: {
    screen: Current,
    navigationOptions: {
      title: "Current",
      tabBarIcon: ({ tintColor }) => (
        <IconIO name="ios-bus" size={scale(20)} color={tintColor} />
      )
    }
  },
  Commutes: {
    screen: Commutes,
    navigationOptions: {
      title: "Commutes",
      tabBarIcon: ({ tintColor }) => (
        <IconSL name="layers" size={scale(20)} color={tintColor} />
      )
    }
  }
}

export const MainNav = createStackNavigator({
  ChildMainNav: {
    screen: ChildMainNav,
    navigationOptions: {
      header: null
    }
  },

  // overlap screens
  Tickets: {
    screen: Tickets,
    navigationOptions: {
      title: "Tickets",
      header: null,
      tabBarVisible: false
    }
  }
});

想法是将“选项卡”导航器添加到“堆栈”导航器中，并在此堆栈中添加您想要具有不同的navigationOptions的其他屏幕以与“选项卡”中的屏幕重叠。

Link to docs下的：

标签导航器包含一个堆栈，您想在特定屏幕上隐藏标签栏

如何在stackNavigator内部的屏幕中隐藏底部栏

2 个答案: