如何在标签栏下扩展标签屏幕答案

【问题标题】：How to extend tab screen under tab bar如何在标签栏下扩展标签屏幕
【发布时间】：2019-10-23 21:23:22
【问题描述】：

是否可以将标签视图（图像）一直延伸到屏幕顶部并让标签栏覆盖它？标签栏的backgroundColor 是"transparent"。使用来自React Navigation v3 的createMaterialTopTabNavigator。在早期版本中似乎有类似displayUnderTabBar 选项的内容，但我似乎无法在任何地方的文档中找到它。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您所做的是为选项卡创建一个自定义组件并将其绝对定位在屏幕上。

<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
  {...}
</Tab.Navigator>

查看自定义 tabBar 组件的示例here。

在上面的例子中，将定位绝对置顶。但是请注意，如果您这样做，则需要将 TouchableOpacity 更改为 TouchableWithoutFeedback，因为此问题 question 中指出了问题。

【讨论】：

【解决方案2】：

为此，需要将以下样式应用于传递给createMaterialTopTabNavigator 的自定义标签栏组件：

style={{
    ...
    position: "absolute",
    zIndex: 1,
    width: '100%'
    ...
}}>

【讨论】：