Flatlist 项目在模态内不可点击

Question

在我的 React 本机应用程序中，我有一个模态

在此模态框内我有一个 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 将触发“正在工作！！”警报。

但是 onPress 在 Android 上不起作用。如果我将 Flatlist 放在 Modal 之外，onPress 将触发警报。

任何人都可以告诉我在 Android 上尝试让它在模态框内工作可能做错了什么吗？

Ps：我也尝试用 TouchableOpacity 代替 TouchableWithoutFeedback 但无济于事

谢谢

Answer 1

我假设您正在从“react-native-gesture-handler”导入 TouchableOpacity (TouchableWithoutFeedback)

我不知道为什么，但你需要从“react-native”导入它

import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native';

希望能有所帮助

Flatlist 项目在模态内不可点击

Flatlist Item Not Clickable Inside Modal

javascript

react-native

expo

react-native-flatlist

react-native-modal