Прикрепить элемент списка привязок во FLATLIST (React Native) - PullRequest
Новая
       9

Прикрепить элемент списка привязок во FLATLIST (React Native)

0 голосов
/ 04 февраля 2019

Создание списка элементов в моем проекте с помощью flatlist.Мои предметы рендеринга нормально в списке.

Там есть 1 значок избранного, чтобы выбрать продукт в качестве избранного.Исходя из моих данных, я меняю значок на базе, либо этот продукт является любимым, либо нет.

я хочу связать каждый продукт, чтобы пометить его как любимый, и изменить цвет.Короче говоря, необходимо переключать значок избранного и не избранного.

Мой код

Данные, которые я рендеринг 

 entries: [
            { id: 1, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' },
            { id: 2, is_fav: true, title: 'world', ImagePath: 'https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462434_960_720.jpg' },
            { id: 3, is_fav: false, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg' },
            { id: 4, is_fav: true, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2015/07/10/17/27/sparkler-839831_960_720.jpg' },
            { id: 5, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' }]

Плоский список 

<FlatList
                    data={this.state.entries}
                    numColumns={this.state.columns}
                    key={this.state.key}
                    renderItem={this.Render_flatlist_Data}
                    keyExtractor={(item, index) => index.toString()}
                    ListHeaderComponent={this.Render_FlatList_Sticky_header}
                    stickyHeaderIndices={[0]}

                />

    Render_flatlist_Data = ({ item: rowData }) => {
.....
 <TouchableOpacity onPress={() => this.TickFav()}>
   <Text>
    <Icon name={(rowData.is_fav === true ? 'heart' : 'ios-heart-empty')} 
   size={25} color="#ddd" /> </Text>
 </TouchableOpacity>
.....
}

Как я могу сделать продукт любимым, нажав на значок избранного продукта.

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 04 февраля 2019

Используйте onPress для своих предметов, когда вы нажимаете на свой предмет, передаете идентификатор и на основании этого идентификатора проверяете предмет и соответственно переключаете его фавор. 

onPress={() => {his.TickFav(id) }
0 голосов
/ 04 февраля 2019

Прежде всего нам нужно иметь переменную , чтобы смотреть [extraData], что данные состояния были изменены.(т. е.) некоторый продукт был помечен или не помечен как избранный.

Это помогает плоскому списку уведомить, что значение было изменено, поэтому мы должны выполнить повторную визуализацию.

InВаш случай, добавив поле extraData в Flatlist, должен подойти 

<FlatList
  data={this.state.entries}

  extraData={this.state}

  numColumns={this.state.columns}
  key={this.state.key}
  renderItem={this.Render_flatlist_Data}
  keyExtractor={(item, index) => index.toString()}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

TickFav = rowData => {
  rowData.is_fav = !rowData.is_fav
  this.setState({});
}

Вы даже можете получить фактические данные rowData из состояния и изменить их напрямую , который не нужен. 

TickFav = (index) => {
  const {entries} = this.state;
  entries[index].is_fav = !entries[index].is_fav;
  this.setState({entries});
}
0 голосов
/ 04 февраля 2019

передать rowData в качестве параметра в методе onPress и обновить статус is_fav при нажатии на элемент. 

TickFav = (rowData) => {
    rowData.is_fav = !rowData.is_fav
}
...