点击清单

Question

如何在Flatlist中添加点击监听器？

我的代码：

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>
}

Answer 1

我使用了TouchableWithoutFeedback。为此，您需要将所有renderItem元素（即您的行）添加到TouchableWithoutFeedback中。然后添加onPress事件，并将FaltList项传递给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);
}

Answer 2

您需要在<TouchableWithoutFeedback>标记内包装您的row元素（在renderItem方法内）。 TouchableWithoutFeedback将onPress视为可以提供onPress事件的道具。

对于TouchableWithoutFeedback，请参阅此link

Answer 3

我使用了TouchableOpacity。它工作得很好。这会给你点击反馈。 TouchableWithoutFeedback不会提供。我做了以下事情：

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>
}