react-native - 使用 TouchableWithoutFeedback 反应本机 onPress 不起作用
问题描述
我正在开发一个简单的 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>
推荐阅读
- c++ - c ++中整数中数字的频率
- django - Django 模型:如何通过过滤多个值编写多个值的查询
- kubernetes - 如何从 Kubernetes pod 写入 sysfs 下的文件?
- ruby-on-rails - Docker CentOS 映像和 TLS (SSL) /通过 shell 的安全站点访问不起作用
- if-statement - 我无法让公式在引用另一个恰好使用 importxml 命令的单元格的列中工作
- javascript - 在Javascript中比较两个相同的日期
- angular - @tusharghoshbd ngx-datatable 不显示相关数据
- android - MaterialSearchView 不显示重新发送列表
- python - 考虑可用性的熊猫返回百分位数
- c - Scanf 函数跳过