ReactNative：元素出现在顶部，但不会触发onPress

Question

我创建了一个下拉列表。它的元素显示在主体的顶部，但是，当我按下它们时，它实际上会触发它们下面的元素的onPress。

你们看到了这个问题：

下拉菜单的代码为：

            <View style={[styles.container]}>
            <TouchableOpacity style={styles.main_container} onPress={this.animate}>
                <Text style={styles.text}>{this.state.selectedCategoryText}</Text>
                <Image style={styles.image}
                    source={require('../../assets/icons/dropdown.png')}
                />
            </TouchableOpacity>
            <View >
                <Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:1, elevation:1}]}>
                    <ScrollView style={{height:60}}>
                        { this.data.map( (item, i)=>
                             <TouchableOpacity 
                                style={{}}
                                disabled={false} 
                                key={i} 
                                onPress={()=>this.selectItem(i)}>
                                    <Text style={styles.item_text}>{item} </Text>
                              </TouchableOpacity>
                             )}
                    </ScrollView>
                </Animated.View>

            </View>
        </View>

我在显示下拉菜单项的动画视图上应用了绝对定位。

animated_container:{
    backgroundColor: colors.secondaryWhiteColor,
    position: 'absolute',
    top: '100%',
    width: '100%', height: 70
}

Answer 1

我设法知道问题的根源，但是我仍然不知道问题到底出在哪里。来自React.Navigation的DrawerNavigator正在做某事。如果我从DrawerNavigator中删除了包含下拉菜单的屏幕，那么它将正常工作。

Answer 2

尝试使用手势处理程序中的可触摸不透明性，而不响应原生