Flatlist 项目在模态框内不可点击

Posted 2023-02-16

【中文标题】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。那已经解决了！我花了比我愿意承认的时间更长的时间来试图弄清楚发生了什么！再次感谢