Flatlist 项目在模态框内不可点击
Posted
技术标签:
【中文标题】Flatlist 项目在模态框内不可点击【英文标题】:Flatlist Item Not Clickable Inside Modal 【发布时间】:2020-11-08 10:55:15 【问题描述】:在我的反应原生应用程序中,我有一个模态
在这个 Modal 里面我有一个 FlatList
<Modal animationType="slide" transparent=false visible=this.state.typeVisible>
<View style=styles.modalView>
<View style=styles.modal_header>
<Text style=styles.modal_header_text>Select Type</Text>
<Ionicons name="ios-close" size=48 style=styles.modal_header_close onPress=this.toggleType />
</View>
<View style=styles.modal_list_container>
<FlatList
keyExtractor=item => item.key
data=[ key: "Call Out" , key: "Call" , key: "Delivery" , key: "Dealt By Caller" ]
renderItem=( item ) => (
//this.handleType(item.key)
<TouchableWithoutFeedback
onPress=() => alert("Working!!")
>
<View>
<Text style=styles.modal_list_item>item.key</Text>
</View>
</TouchableWithoutFeedback>
)
/>
</View>
</View>
</Modal>
在 IOS 上,FlatList 中的每个项目都是可点击的,并且 onPress 将触发“Working!!”警告。
但是 onPress 不适用于 android。如果我将 Flatlist 放在 Modal 之外,onPress 将触发警报。
谁能告诉我在尝试让它在 Android 上的 Modal 中运行时我可能做错了什么?
Ps:我也尝试过用 TouchableOpacity 代替 TouchableWithoutFeedback 但无济于事
谢谢
【问题讨论】:
【参考方案1】:我假设您正在从“react-native-gesture-handler”导入 TouchableOpacity (TouchableWithoutFeedback)
不知道为什么,需要从“react-native”导入
import TouchableOpacity, TouchableWithoutFeedback from 'react-native';
希望对你有帮助
【讨论】:
太好了,感谢一百万 @Vitalik Tabaharnuk。那已经解决了!我花了比我愿意承认的时间更长的时间来试图弄清楚发生了什么!再次感谢以上是关于Flatlist 项目在模态框内不可点击的主要内容,如果未能解决你的问题,请参考以下文章