React导航。因为标签栏后面有图像，所以不能点击标签页。

Question

在我的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. 当我改变 zIndex 在...上 Image 为0，那么我就可以点击它们，但我需要它为1，以便其他一些内容在它后面流动。尽管我已经将 zIndex 的要素 tabBarOptions 到10，我还是无法点击它们。我猜想在标签导航器里有一些我无法访问的包装，有一个叫 zIndex 的0。

有谁知道我可以如何处理这个问题？

Answer 1

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

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