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 项目在模态框内不可点击的主要内容,如果未能解决你的问题,请参考以下文章

如何打开模态框并在模态框内切换 iframe src

bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法

bootstrap模态框没法弹出

React:在模态框内模拟手机屏幕宽度

SwiftUI:从模态框内转到新视图

使用 Bootstrap 在模态框内调整轮播大小