1

在我的 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。当我将zIndexon更改Image为 0 时，我可以单击它们，但我需要它为 1，以便其他一些内容在它后面流动。即使我已将zIndex元素设置tabBarOptions为 10，我仍然无法单击它们。我假设选项卡导航器中有一些我无法访问的包装器，它zIndex的值为 0。

有谁知道我该如何解决这个问题？

4

1 回答 1

0

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

<View>
    <TabNavigatorContent/>
    <Image
        source={require('@images/top-0.3.png')}
        style={{zIndex: 1, height: 50, top: 0}}
    />
</View>
于 2020-05-11T21:24:25.453 回答