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

我有一个简单的

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

const bookingstack=createStackNavigator({
通勤：{
屏幕：通勤，
导航选项：{
标题：“通勤”，
标题：null，
}
},
门票：{
屏幕：门票，
导航选项：{
标题：“门票”，
标题：null，
tabBarVisible:错误
}
}
});
export const MainNav=createBottomTabNavigator({
当前：{
屏幕：当前，
导航选项：{
标题：“当前”，
tabBarIcon:（{tintColor}）=>(
)
}
},
预订栈：{
屏幕：BookingStack，
导航选项：{
标题：“通勤”，
tabBarIcon:（{tintColor}）=>(
)
}
}
}

我在

react导航

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

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

const ChildMainNav=createBottomTabNavigator({
当前：{
屏幕：当前，
导航选项：{
标题：“当前”，
tabBarIcon:（{tintColor}）=>(
)
}
},
通勤：{
屏幕：通勤，
导航选项：{
标题：“通勤”，
tabBarIcon:（{tintColor}）=>(
)
}
}
}
export const MainNav=createStackNavigator({
儿童导航：{
屏幕：ChildMainNav，
导航选项：{
标题：空
}
},
//重叠屏幕
门票：{
屏幕：门票，
导航选项：{
标题：“门票”，
标题：null，
tabBarVisible:错误
}
}
});

我们的想法是将选项卡导航器添加到Stack navigator中，并在该堆栈中添加您希望具有不同的

导航选项的任何其他屏幕，以重叠选项卡中的选项

根据：

选项卡导航器包含堆栈，您希望在特定屏幕上隐藏选项卡栏

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

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

const ChildMainNav=createBottomTabNavigator({
当前：{
屏幕：当前，
导航选项：{
标题：“当前”，
tabBarIcon:（{tintColor}）=>(
)
}
},
通勤：{
屏幕：通勤，
导航选项：{
标题：“通勤”，
tabBarIcon:（{tintColor}）=>(
)
}
}
}
export const MainNav=createStackNavigator({
儿童导航：{
屏幕：ChildMainNav，
导航选项：{
标题：空
}
},
//重叠屏幕
门票：{
屏幕：门票，
导航选项：{
标题：“门票”，
标题：null，
tabBarVisible:错误
}
}
});

我们的想法是将选项卡导航器添加到Stack navigator中，并在该堆栈中添加您希望具有不同的
导航选项的任何其他屏幕，以重叠选项卡中的选项

根据：

选项卡导航器包含堆栈，您希望在特定屏幕上隐藏选项卡栏

如导航文件所示：

如果我们想在从提要主页导航到详细信息屏幕时隐藏选项卡栏而不移动导航器，我们不能在
navigationOptions
的
DetailsScreen
中设置
tabbar可见：false
配置，因为这些选项将只应用于
FeedStack
ing：

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

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

       return {
         tabBarVisible,
   }; };

如导航文件所示：

如果我们想在从提要主页导航到详细信息屏幕时隐藏选项卡栏而不移动导航器，我们不能在
navigationOptions
的
DetailsScreen
中设置
tabbar可见：false
配置，因为这些选项将只应用于
FeedStack
ing：

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

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

       return {
         tabBarVisible,
   }; };