Question

我试图使按钮不响应本机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的响应。我在做什么错了？

Answer 1

就像Andrew所说的那样，您通常需要通过更新状态来触发重新渲染。

但是，如果项目不依赖FlatList之外的任何内容，我建议为项目本身创建一个组件（如果可能，最好是PureComponent），并在新闻发布时更新其状态。这样，只有在发生更改而不是父组件发生更改时，它才会单独重新呈现每个列表项。

Answer 2

谢谢，更新状态有点困难，我使用过的items数组已在类组件外部声明，因此仅使用带有索引的“活动”数组应该在状态中更改颜色是不够的，我必须以这种状态映射项目数组：

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

React Native Flatlist动态样式

2 个答案: