如何在Flatlist
中添加click侦听器?
我的代码:
renderItem({item, index}){
return <View style = {{
flex:1,
margin: 5,
minWidth: 170,
maxWidth: 223,
height: 304,
maxHeight: 304,
backgroundColor: '#ccc',
}}/>
}
render(){
return(<FlatList
contentContainerStyle={styles.list}
data={[{key: 'a'}, {key: 'b'},{key:'c'}]}
renderItem={this.renderItem}
/>);
}
}
更新1:我使用了按钮,但是它在Flatlist
中不工作。但是只使用按钮而不是Flatlist
,它工作了。为什么它在Flatlist
renderItem中不工作?
_listener = () => {
alert("clicked");
}
renderItem({item, index}){
return<View>
<Button
title = "Button"
color = "#ccc"
onPress={this._listener}
/>
</View>
}
6条答案
按热度按时间zphenhs41#
我使用了
TouchableWithoutFeedback
。为此,您需要将所有renderItem元素(即您的行)添加到TouchableWithoutFeedback
中。然后添加onPress
事件并将FaltList项传递给onPress事件。r3i60tvu2#
您需要将row元素(在renderItem方法中) Package 在
<TouchableWithoutFeedback>
标记中。TouchableWithoutFeedback
将onPress作为它的prop,您可以在其中提供onPress事件。对于
TouchableWithoutFeedback
,请参考此linkqaxu7uf23#
我用了
TouchableOpacity
,效果很好。这会给予你点击反馈。这是TouchableWithoutFeedback
不会提供的。我做了以下操作:bjg7j2ky4#
如果您遇到平面列表行第一次单击问题,请将以下属性添加到平面列表
禁用滚动视图全景响应程序= {true}
ruarlubt5#
Pressable
组件现在优先于TouchableWithoutFeedback
(和TouchableOpacity
)。根据TouchableWithoutFeedback
的React Native文档:如果您正在寻找一种更广泛和面向未来的方式来处理基于触摸的输入,请查看Pressable API。
实施示例:
参考文献
TouchableWithoutFeedback
(响应本机):https://reactnative.dev/docs/touchablewithoutfeedbackPressable
(响应本机):https://reactnative.dev/docs/pressabledbf7pr2w6#
你不需要将可触摸的相关组件添加到你的平面列表renderItem中。2只需将
onTouchStart
属性传递给你的平面列表。在实施例中: