touchableopacity реагирует на родной z индекс - PullRequest
0 голосов
/ 18 января 2019

У меня есть какой-то компонент TouchableOpacity, который перекрывается, и при нажатии одного из них кажется, что zindex уменьшает эту TouchableOpacity, как можно увеличить 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 моего компонента

1 Ответ

0 голосов
/ 21 января 2019

Я наконец понял, что проблема не в Zindex, это проблема непрозрачности, и используйте для этого плагин, этот плагин создает пользовательскую анимацию

...