#react-native #expo
#react-native #expo
Вопрос:
Я создал пользовательский выпадающий компонент, который имеет прозрачный Scrollview с элементами ToucableOpacity. Однако нажатие на них не работает, несмотря на то, что zIndex выводит их поверх всего остального.
На главном экране я создал два элемента: 1 заголовок, содержащий выпадающий список, и 2-й — это тело, которое содержит остальные. Его код приведен ниже:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
Я включил разметку события рендеринга выпадающего элемента. Его код приведен ниже:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Стили для выпадающего списка:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Скриншот приведен в виде. zIndex выводит элементы сверху, но я не могу запустить onPress при непрозрачности Toucable.
Комментарии:
1. Я рассмотрел другой аналогичный вопрос, в котором добавление zIndex к родительскому элементу исправило проблемы. Тем не менее, я добавил zIndex к родительскому, но, похоже, это не работает. Я действительно не понимаю, в чем именно проблема.
2. в Android вместо
zIndex
tryelevation
это будет работать3. Применено повышение высоты 4,5,6 для AnimatedViews, ScrollView и ToucableOpacities. Ничего не произошло.
4. @Rusty, ты уже нашел решение для этого? У меня точно такая же проблема.
5. я также сталкиваюсь с такой же проблемой. Кто-нибудь нашел решение для этого