touchableopacity反应本机z索引

Question

我有一些重叠的TouchableOpacity组件，当按下其中一个时，似乎降低了这个TouchableOpacity的zindex，如何才能增加zindex或其他解决方案以在顶部显示按下的TouchableOpacity？

 <View style={modalStyle.row}>
                        <TouchableOpacity activeOpacity={0.5} style={[modalStyle.btnText, { backgroundColor: Colors.title }]}>
                            <Text style={ { fontSize: 13,  color: '#fff'}}>30,000 </Text>
                        </TouchableOpacity>

                        <TouchableOpacity activeOpacity={0.5} style={[modalStyle.btnText, { backgroundColor: Colors.title }]}>
                            <Text style={ {fontSize: 13,  color: '#fff'}}>50,000 </Text>
                        </TouchableOpacity>

                        <TouchableOpacity activeOpacity={0.5} style={[modalStyle.btnText, { backgroundColor: Colors.title }]}>
                            <Text style={ { fontSize: 13, color: '#fff'}}>100,000 </Text>
                        </TouchableOpacity>
                    </View>

 btnText: {
                fontFamily: 'System', // r
                paddingHorizontal: 10,
                paddingVertical: 7,
                color: '#fff',
                position : 'relative',
                borderRadius: 25,
                textAlign: 'center',
                justifyContent: 'center',
                alignItems:'center',
                width:'35%',
            },
            row: {
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                justifyContent: 'space-around',
                marginTop: 10,
                width:'85%'
                //height:100,
            }

gif of my component

Answer 1

我终于意识到问题不在于Zindex，而是不透明性的问题，并使用插件，该插件创建了自定义动画react-native-material-ripple