反应本机flatlist动态风格

Question

我正在尝试用反应本机flatlist项目制作按钮，这意味着当我单击它们时，它们会更改颜色。这是由RenderItem Prop渲染的功能：

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"（array）中，我始终具有要更改颜色的元素的位置（整数）但是什么都没有发生，您唯一可以看到的是通过触摸可触摸的响应。我在做什么错？

Answer 1

就像安德鲁所说，您需要触发重新渲染，通常是通过更新状态。

但是，如果这些项目不依赖于flatlist之外的任何内容，我建议对项目本身创建一个组件（最好在可能的情况下）创建一个组件（最好是定位分组），并在按下时更新其状态。这样，只有在有更改而不是父组件的情况下，它将仅重新渲染每个列表项目。

Answer 2

谢谢，更新状态有点困难，我使用的项目数组已在类组件之外声明，因此仅使用带有索引的"活动"数组该州的颜色还不够，我必须像这样绘制状态的项目数组

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)',
}}