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

Question

在我的反应原生应用程序中，我有一个模态

在这个 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 但无济于事

谢谢

Answer 1

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

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

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

希望对你有帮助