Щелкните прослушиватель в плоском списке

Как добавить прослушиватель кликов в 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-native react-native-flatlist
person Amrita Stha    schedule 17.06.2017    source источник

Ответы (3)


arrow_upward
18
arrow_downward

Вам нужно обернуть элемент строки (внутри метода renderItem) внутри тега <TouchableWithoutFeedback>. TouchableWithoutFeedback принимает onPress как опору, в которой вы можете предоставить событие onPress.

TouchableWithoutFeedback см. Эту ссылку

person Raj Suvariya    schedule 17.06.2017
comment
Привет, я использовал кнопку внутри renderItem в плоском списке, но прослушиватель кликов не работает. Пожалуйста, ознакомьтесь с обновлением, указанным выше. Я также использовал TouchableWithoutFeedback, но безуспешно. - person Amrita Stha; 20.06.2017
comment
@AmritaStha замените onPress = {this._listener} на onPress = {this._listener ()} - person Raj Suvariya; 20.06.2017
comment
спасибо большое, это помогло. Собственно привязка сработала. - person Amrita Stha; 24.06.2017

arrow_upward
24
arrow_downward

Я использовал 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);
}
person Manish Ahire    schedule 31.07.2018
comment
Я хочу обновить конкретное значение элемента, возможно ли это с помощью этой логики? - person Anuj; 03.09.2018
comment
@Anuj Да, это возможно. При нажатии на элемент получите этот элемент, обновите это конкретное значение элемента, затем обновите свой массив и перезагрузите список. - person Manish Ahire; 03.09.2018
comment
Спасибо, я сделал это, - person Anuj; 03.09.2018
comment
@Manish Привет, Маниш, я использую тот же код. Но actionOnRow (item) вызывается, когда я дважды щелкаю элемент FlatList. Можете ли вы сказать мне, какую ошибку я сделал? - person Boominadha Prakash M; 07.01.2019
comment
@BoominadhaPrakashM Можете ли вы поделиться кодом? Потому что это может быть проблема в компонентах пользовательского интерфейса. - person Manish Ahire; 10.01.2019
comment
@Manish Я исправил эту проблему. Проблема в том, что я добавил FlatList внутри прокрутки. Итак, ScrollView не позволял касаться FlatList. Итак, я добавил keyboardShouldPersistTaps для обработки в ScrollView. Потом заработало. Спасибо :) - person Boominadha Prakash M; 10.01.2019
comment
@BoominadhaPrakashM Хорошо :) - person Manish Ahire; 10.01.2019

arrow_upward
10
arrow_downward

Я использовал 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>
}
person Nabeel K    schedule 25.10.2017