在 TabNavigator 中隐藏 TabBar 项目

Question

如何从 TabNavigator 中隐藏某些 TabBar 项目。是否有某个TabBarOptions选项具有visible这样的键（真/假）？

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

Answer 1

我的解决方案是返回一个自定义选项卡按钮，它是：高度和宽度设置为 0 的视图，工作正常

<Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => (
            <View style={{width:0, height:0}}></View>
        ),
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

更新：正如@Aman Deep 所指出的，你可以只返回 null

<Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => null,
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

Answer 2

尽管有人讨论过它的实现，但单个选项卡没有这样的“可见”选项。

可以仅呈现某些选项卡。您可以通过向 TabNavigator 传递您希望在特定时间显示的特定选项卡来动态呈现 TabNavigator。您无需将参数硬编码到 TabNavigator()，而是将参数设置为表示要呈现的选项卡的对象，然后您可以随着时间的推移对此对象进行更改。

请参阅此处了解此方法的巧妙实现。