React Navigation：由于标签栏后面的图像，无法单击标签答案

【问题标题】：React Navigation: Can't click tabs because of Image behind tab barReact Navigation：由于标签栏后面的图像，无法单击标签
【发布时间】：2020-08-27 12:34:26
【问题描述】：

在我的 React Native 项目中，我有一个使用 createMaterialTopTabNavigator 创建的顶部选项卡导航器。我在标签栏后面有一个图像。代码如下所示：

const TabNavigatorOuter = createMaterialTopTabNavigator(
    {
        a: {screen: a},
        b: {screen: b},
        c: {screen: c},
        d: {screen: d},
    },
    {
        tabBarOptions: {
            style: {
                backgroundColor: 'transparent',
                borderTopWidth: 0,
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                zIndex: 10
            },
            tabStyle: {
                zIndex: 10
            },
            labelStyle: {
                zIndex: 10
            },
        }
    }
)

const TabNavigatorContent = createAppContainer(TabNavigatorOuter);

<View>
    <Image
        source={require('@images/top-0.3.png')}
        style={{zIndex: 1, height: 50, top: 0}}
    />
    <TabNavigatorContent/>
</View>

这是这样的：

问题：

我无法按下任何按钮 a、b、c 或 d。当我将 Image 上的 zIndex 更改为 0 时，我可以单击它们，但我需要将其设置为 1，以便其他一些内容在其后面流动。即使我将tabBarOptions 的元素上的zIndex 设置为10，我仍然无法单击它们。我假设选项卡导航器中有一些我无法访问的包装器，其 zIndex 为 0。

有人知道我该如何处理吗？

【问题讨论】：

将 z-index 添加到 TabNavigatorComponent :)
我认为你应该像这样 tabBarOptions: { style:{zIndex:-10}}

标签： reactjs react-native react-navigation tabnavigator react-native-tabnavigator

【解决方案1】：

你试过了吗？组件的顺序很重要，虽然我不确定在这种情况下它是否能解决你的问题

<View>
    <TabNavigatorContent/>
    <Image
        source={require('@images/top-0.3.png')}
        style={{zIndex: 1, height: 50, top: 0}}
    />
</View>

【讨论】：