Это две нажимаемые кнопки - «Закрыть» и «Звезда».
«Звезда» должна быть скрыта ScrollView.
Проблема в том, что когда я делаю 'zIndex: -1' для кнопки 'Звезда', она становится неактивной.
Чтобы прояснить ситуацию, вот 10-секундное видео:
YouTube
Я также пробовал любой другой способ заставить его работать, но могу найти решение (
render() {
return (
<View style={{ backgroundColor: 'tomato' }}>
<Animated.ScrollView
contentInset={{
top: 450,
}}
contentOffset={{
y: -HEADER_MAX_HEIGHT,
}}
>
<ArticleText animation={{}} />
</Animated.ScrollView>
<View />
<TouchableOpacity style={styles.closeButton}>
<Icon
onPress={() => console.log('pressed')}
name='close'
containerStyle={{ padding: 5, backgroundColor: '#4f4f4f', borderRadius: 40 }}
color='#ffff'
size={30}
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.starIcon]}
onPress={() => console.log('pressed')}
>
<Icon
name='star'
color='#808080'
size={25}
/>
</TouchableOpacity>
</View>
);
}
}
.... styles {
starIcon: {
position: 'absolute',
zIndex: -1,
top: 180,
right: 20,
backgroundColor: '#fff',
width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center',
},
closeButton: {
zIndex: 1,
position: 'absolute',
top: 30,
right: 10,
backgroundColor: 'black',
width: 40,
height: 40,
borderRadius: 20,
},
}