Блог

Я создал пользовательский выпадающий компонент, который имеет прозрачный 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.