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

Question

是否可以将选项卡视图（图像）一直扩展到屏幕顶部并在其上覆盖选项卡栏？标签栏的backgroundColor是"transparent"。使用React Navigation v3中的createMaterialTopTabNavigator。早期版本中的displayUnderTabBar选项似乎有些地方，但我似乎在任何地方的文档中都找不到。

Answer 1

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

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

Answer 2

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

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

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

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