У меня есть какой-то компонент 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 моего компонента
Я наконец понял, что проблема не в Zindex, это проблема непрозрачности, и используйте для этого плагин, этот плагин создает пользовательскую анимацию