React native React本机绝对定位组件元素onPress事件不起作用
我创建了一个自定义下拉组件,它有一个带有不透明元素的透明滚动视图。然而,尽管zIndex让它们在所有其他东西上都显得最重要,但对它们的压力并没有起作用 在主屏幕中,我创建了两个元素,一个是包含下拉列表的标题,另一个是包含其余内容的主体。其代码如下:React native React本机绝对定位组件元素onPress事件不起作用,react-native,expo,React Native,Expo,我创建了一个自定义下拉组件,它有一个带有不透明元素的透明滚动视图。然而,尽管zIndex让它们在所有其他东西上都显得最重要,但对它们的压力并没有起作用 在主屏幕中,我创建了两个元素,一个是包含下拉列表的标题,另一个是包含其余内容的主体。其代码如下: <View style={styles.body, {zIndex:0}}> <View style={[styles.header,{zIndex:1}]}>
<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>
截图如下所示。zIndex使元素显示在顶部,但我无法触发onPress上的不透明度
我已经研究了其他类似的问题,将zIndex添加到父元素中解决了问题。然而,我已经将zIndex添加到parent中,但它似乎不起作用。我真的不明白到底是什么问题。在安卓系统中,不使用
zIndex
tryelevation
而是将elevation 4、5、6应用于动画视图、ScrollView和ToucableOpacity。什么也没发生。@Rusty,你找到解决办法了吗?我有着完全相同的问题,我也面临着同样的问题。有人找到解决办法了吗
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
}