如何在ListView组件中使用条件判断修改TouchableOpacity背景色？

看起来你遇到的核心问题是对象引用比较导致的条件判断失效，我来帮你拆解一下原因和解决方案：

问题根源 #

你的代码里用this.state.deliver === rowData来判断是否选中当前行，但如果rowData是一个对象（而非字符串/数字这类基础类型），===在这里比较的是对象的内存引用地址，而不是对象的内容。当你点击行时，this.setState({deliver: rowData})存的是当前行对象的引用，但ListView渲染其他行时，每个rowData都是数据源里的不同对象引用——哪怕内容完全一致，===也会返回false，导致背景色切换逻辑不生效。

如果rowData本身是字符串，那可能是ListView数据源未正确触发重新渲染，但这种情况比较少见，先聚焦最常见的对象引用问题。

解决方案 #

方案1：存储唯一标识而非整个对象（推荐） #

修改state，只存储rowData的唯一标识（比如id、唯一名称等），用这个标识做条件判断，避免对象引用的问题：

constructor(props){
  super(props);
  this.state={ 
    selectedRowKey: '', // 存储唯一标识，而非整个rowData对象
  }
}

render() {
  return(
    <ListView 
      dataSource={this.state.dataSource}
      renderRow={ (rowData)=> (
        <TouchableOpacity 
          onPress={()=>this.setState({selectedRowKey: rowData.id})} // 存入唯一id
          activeOpacity={0.5}
          style={[
            styles.row, 
            { backgroundColor: this.state.selectedRowKey === rowData.id ? '#0077FF' : '#eee'}
          ]}>
          <Text>{rowData.content}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  row:{ borderRadius:5, marginTop:5, paddingTop:5, paddingBottom:5 },
});

方案2：若需比较对象内容，使用深比较 #

如果你确实需要比较整个对象的内容，可以使用深比较函数（比如自己实现简单版本，或引入成熟库如lodash的isEqual）：

// 实现一个简单的深比较函数（仅适用于无特殊类型的对象）
const isDeepEqual = (obj1, obj2) => {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

render() {
  return(
    <ListView 
      dataSource={this.state.dataSource}
      renderRow={ (rowData)=> (
        <TouchableOpacity 
          onPress={()=>this.setState({deliver: rowData})}
          activeOpacity={0.5}
          style={[
            styles.row, 
            { backgroundColor: isDeepEqual(this.state.deliver, rowData) ? '#0077FF' : '#eee'}
          ]}>
          <Text>{rowData}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

⚠️ 注意：JSON.stringify的方式仅适用于不包含函数、Symbol等特殊类型的对象，复杂对象建议使用成熟的深比较库。

额外提示 #

如果你的React Native版本较新，建议把ListView替换为FlatList——ListView已被官方废弃，FlatList有更好的性能和更多特性，用法类似：

<FlatList
  data={this.state.data}
  renderItem={({item}) => (
    <TouchableOpacity
      onPress={()=>this.setState({selectedRowKey: item.id})}
      style={[styles.row, { backgroundColor: this.state.selectedRowKey === item.id ? '#0077FF' : '#eee'}]}
    >
      <Text>{item.content}</Text>
    </TouchableOpacity>
  )}
/>

内容的提问来源于stack exchange，提问作者Alireza