React Native Flatlist динамический стиль - PullRequest
Новая
       10

React Native Flatlist динамический стиль

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

Я пытаюсь сделать кнопки из реагирующих нативных элементов FlatList, то есть, когда я нажимаю на них, они меняют цвет.Это функция, которая отображается с помощью renderItem: 

renderRows(item, index) {
return (
  <TouchableOpacity
    key={index}
    style={[styles.item, this.calculatedSize()]}
    onPress={() => this.onPressImage(index)}
  >
    <Image
      style={[styles.picture]}
      source={{ uri: item.uri }}
    />
    <View
      style={[
        styles.imageTextContainer,
        {
          backgroundColor:
            _.indexOf(this.active, index) === -1
              ? 'rgba(0,0,0,0.2)'
              : 'rgba(26, 211, 132, 0.7)',
        },
      ]}
    >
      <Text style={styles.imageText}>{item.title}</Text>
    </View>
  </TouchableOpacity>
 )
}

о да, и я использую loadash для получения индекса.Функция "onPressImage (index)" работает нормально, в "this.active" (массив) у меня всегда есть позиции (целые числа) элементов, которые я хотел бы изменить цвет, однако ничего не происходит, единственное, что вы можете увидеть, этоответ touchableOpacity.Что я делаю не так?

Ответы [ 2 ]

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

Спасибо, обновление состояния было немного сложным, массив элементов, который я использовал, был объявлен вне компонента класса, таким образом, было недостаточно использовать только «активный» массив с индексами, которые должны менять цвет в состоянии.Я должен был отобразить массив элементов в таком состоянии: 

state = {
  items: items.map(e => ({
    ...e,
    active: false,
  }))
}

, тогда я мог манипулировать активным состоянием элемента, который хотел изменить, следующим образом: 

onPressItem(index) {
  const { items } = this.state
  const newItems = [...this.state.items]
  if (items[index].active) {
    newItems[index].active = false
  } else {
    newItems[index].active = true
  }
  this.setState({ items: newItems })
}

и измените цвет так: 

style={{
  backgroundColor: item.active
    ? 'rgba(26, 211, 132, 0.7)'
    : 'rgba(0,0,0,0.2)',
}}
0 голосов
/ 23 февраля 2019

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

Однако, если элементы не зависят ни от чего вне FlatList, я бырекомендуем создать компонент (желательно PureComponent, если это возможно) для самих элементов и обновить их состояние после печати.Таким образом, он будет перерисовывать каждый элемент списка по отдельности только в случае изменения вместо родительского компонента.

...