javascript - 如何在 stackNavigator react 导航内的屏幕中隐藏底部栏

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 主页导航到详细信息屏幕时隐藏标签栏而不需要随机排列导航器，则无法在 navigationOptions 中设置 tabBarVisible: false 配置在 DetailsS​​creen 上，因为这些选项仅适用于 FeedStack。相反，我们可以执行以下操作:

 const FeedStack = createStackNavigator({   FeedHome: FeedScreen,  
     Details: DetailsScreen, });

     FeedStack.navigationOptions = ({ navigation }) => {   let
    tabBarVisible = true;   if (navigation.state.index > 0) {
         tabBarVisible = false;   }

       return {
         tabBarVisible,
   }; };