[英]React native onPress with TouchableWithoutFeedback is not working
我正在开发一个简单的 React Native 应用程序用于学习目的。 我只是迈出了进入 React Native 世界的第一步。 但是在这个非常早期的阶段,我遇到了问题。 我无法使简单的触摸事件正常工作。 我正在使用 TouchableWithoutFeedback 实现触摸事件。 这是我的代码。
class AlbumList extends React.Component {
constructor(props)
{
super(props)
this.state = {
displayList : true
}
}
componentWillMount() {
this.props.fetchAlbums();
}
albumPressed(album)
{
console.log("Touch event triggered")
}
renderAlbumItem = ({item: album}) => {
return (
<TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
<Card>
<CardSection>
<Text>{album.artist}</Text>
</CardSection>
<CardSection>
<Text>{album.title}</Text>
</CardSection>
</Card>
</TouchableWithoutFeedback>
)
}
render() {
let list;
if (this.state.displayList) {
list = <FlatList
data={this.props.albums}
renderItem={this.renderAlbumItem}
keyExtractor={(album) => album.title}
/>
}
return (
list
)
}
}
const mapStateToProps = state => {
return state.albumList;
}
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
fetchAlbums : AlbumListActions.fetchAlbums
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
如您所见,我正在列表项上实现触摸事件。 但是当我点击模拟器上的卡片时它根本不会触发。 为什么? 我该如何解决?
您应该像这样将内容包装在组件中:
<TouchableWithoutFeedback>
<View>
<Your components...>
</View>
</TouchableWithoutFeedback>
TouchableWithoutFeedback
总是需要有子View
组件。 所以一个组成View
的组件是不够的。
所以代替
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<MyCustomComponent />
</TouchableWithoutFeedback>
用:
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<View>
<MyCustomComponent />
</View>
</TouchableWithoutFeedback>
有关更多信息,请参阅github 问题
可以与<TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>
对于那些在 react-native 0.64 中遇到此问题并且仅将其包装在 View 中不起作用的人,请尝试以下操作:
<TouchableWithoutFeedback onPress={onPress}>
<View pointerEvents="none">
<Text>Text</Text>
</View>
</TouchableWithoutFeedback>
就我而言,下面有阴影,导致不稳定。 我解决这个问题的方法很简单:zIndex: 65000
<View style={{ zIndex: 65000 }}>
<TouchableWithoutFeedback onPressIn={() => {}>
<View>
</View>
</TouchableWithoutFeedback>
</View>
在我的例子中,我不小心从 react-native-web 而不是 react-native 导入了 TouchableWithoutFeedback。从 react-native 导入后,一切都按预期工作。
在最近的 React Native 版本中,只需使用 Pressable 代替: https://reactnative.dev/docs/pressable
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.