反应本地绝对定位组件元素onPress事件不起作用

时间:2019-03-27 07:15:45

标签: react-native expo

我创建了一个自定义下拉组件,该组件具有带ToucableOpacity元素的透明Scrollview。但是,即使zIndex使它们出现在其他所有事物之上,它们上的onPress也无法正常工作。

在主屏幕中,我创建了两个元素,第一个标头包含Dropdown,第二个标头是包含其余内容的主体。其代码如下:

     <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>

我包括了Dropdown元素的render事件标记。其代码如下:

       <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使元素显示在顶部,但是我无法触发ToPressable的不透明性。

enter image description here

0 个答案:

没有答案