React Navigation Tabs not Clickable with absolute position

问题

I have 2 screen in react native and I wanna make the tabs navigator transparent, it works but the navigator not clickable after adding position: absolute, if I'm not using the absolute the background turning white (can't transparent)

this is my tabBarOptions

tabBarOptions: {
        showIcon: true,
        showLabel: true,
        activeTintColor: 'orange',
        inactiveTintColor: '#fff',
        style: {
            width: '100%',
            height: 60,
            backgroundColor: 'transparent',
            borderTopWidth: 0,
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 10,
        },
        tabStyle: {
            paddingTop: 20,
        },
    },

when I clicked the Create Order tab nothing happen, but if I comment the position: absolute it's perfectly work.

回答1:

Add "zIndex=1" in tab bar style

style: {
            width: '100%',
            height: 60,
            backgroundColor: 'transparent',
            borderTopWidth: 0,
            position: 'absolute',
            zIndex: 1,
            left: 0,
            right: 0,
            bottom: 10,
        },

来源：https://stackoverflow.com/questions/56161371/react-navigation-tabs-not-clickable-with-absolute-position