web-dev-qa-db-fra.com

Cliquez sur l'écouteur dans la liste à plat

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>
}
react-nativereact-native-flatlist
5
Amrita Stha

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

4
Raj Suvariya

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);
}
7
Manish

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>
}
2
Nabeel K