web-dev-qa-db-ja.com

フラットリストのクリックリスナー

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

<TouchableWithoutFeedback>タグ内に（renderItemメソッド内で）行要素をラップする必要があります。 TouchableWithoutFeedbackは、onPressイベントを提供できる小道具であるonPressを取ります。

TouchableWithoutFeedbackについては、これを参照してください link

9
Raj Suvariya

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

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