Comment puis-je ajouter un auditeur de clics dans Flatlist
?
Mon code:
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}
/>);
}
}
Mise à jour 1: J'ai utilisé le bouton mais il ne fonctionne pas dans Flatlist
. Cependant, si vous utilisez uniquement le bouton au lieu de Flatlist
, cela fonctionne. Pourquoi ne fonctionne-t-il pas dans Flatlist
renderItem?
_listener = () => {
alert("clicked");
}
renderItem({item, index}){
return<View>
<Button
title = "Button"
color = "#ccc"
onPress={this._listener}
/>
</View>
}
Vous devez envelopper votre élément row (dans votre méthode renderItem) dans la balise <TouchableWithoutFeedback>
. TouchableWithoutFeedback
prend onPress car c'est un accessoire où vous pouvez fournir un événement onPress.
Pour TouchableWithoutFeedback
référez-vous ceci link
J'ai utilisé TouchableWithoutFeedback
. Pour cela, vous devez ajouter tous les éléments renderItem (c'est-à-dire votre ligne) dans la TouchableWithoutFeedback
. Ajoutez ensuite l'événement onPress
et transmettez l'élément FaltList à l'événement onPress.
import {View, FlatList, Text, TouchableWithoutFeedback} from 'react-native';
render() {
return (
<FlatList style={styles.list}
data={this.state.data}
renderItem={({item}) => (
<TouchableWithoutFeedback onPress={ () => this.actionOnRow(item)}>
<View>
<Text>ID: {item.id}</Text>
<Text>Title: {item.title}</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
);
}
actionOnRow(item) {
console.log('Selected Item :',item);
}
J'ai utilisé TouchableOpacity
. et cela fonctionne très bien. Cela vous donnera un retour de clic. qui ne sera pas fourni par TouchableWithoutFeedback
. J'ai fait ce qui suit:
import { View, Text, TouchableOpacity } from "react-native";
...
_onPress = () => {
// your code on item press
};
render() {
<TouchableOpacity onPress={this._onPress}>
<View>
<Text>List item text</Text>
</View>
</TouchableOpacity>
}