可触摸的不透明OnPress在React native中不起作用

Question

TouchableOpacity onPress在平面列表中不工作，但当我用onPressIn/onPressOut替换onPress时，它工作得很好，但在这种情况下，反应太快，滚动时出现问题。我不知道发生了什么，也没有发现任何相关的问题。以下是我的代码：

renderItem = ({ item, index }: { item: any, index: number }) => {
const { type } = this.props;
const valueType = {
phone: item,
stage: item.title,
location: item.name
}
return (
<TouchableOpacity
onPressIn={() => this.onSelect(item, index)}
style={styles.modalListContainer}
>
<Icon name={icon[type]} height={20} width={20}/>
<Spacer width={10} />
<View style={styles.modelTextContainer}>
<Text style={styles.modelText}>{valueType[type]}</Text>
</View>
</TouchableOpacity>
)
}

<FlatList
data={item}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={() => <><Spacer height={10} /><View style={styles.modelTextDevider} /><Spacer height={10} /></>}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.container}
/>

它是在使用react原生模态库的模态中渲染的。如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

react-native-modals，有一个父级可触摸组件(PanResponder(，它封装您孩子的组件。在一些android设备上，当你有一个像按钮这样的可触摸组件时，触摸事件不会向下传播到子组件，而是由react-native-modals父组件捕获。

理想的解决方案应该是绝对定位你的按钮，但会破坏你的UI，模态将毫无用处。

此库存储库存在问题。https://github.com/jacklam718/react-native-modals/pull/210但是所提供的解决方案对于Android设备来说不是100%准确的。

如果您使用的是React Navigation，那么您已经安装了react-native-gesture-handler。

从react-native-gesture-handler导入TouchableOpacity以代替"react native"。它应该可以解决大多数设备的问题。