ListView动态样式react-native

Question

在我的项目中，我试图改变我的ListView的背景颜色。颜色已经在一个数组中，在组件中我首先得到兰德数，这样每次用户打开组件时，它都会以不同的颜色开始。

如何在每次调用renderRow时更改颜色的状态。我尝试添加一个setState，但它导致了最大的调用堆栈错误。

​

constructor(props){
  super(props);
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
      color: null,
  }
}

componentWillMount() {
    var rand = Math.floor((Math.random()*8)+1);
    this.setState({ color: rand});
  }

  _renderRow ( rowData, rowId, rowColumn) {
    var temp=(this.state.color+1)%8;
    this.setState({color: temp});
    return (
      <View style={{ backgroundColor: backColor[temp] ,paddingVertical: 10, paddingHorizontal: 10, marginBottom: 10, borderRadius: 5 }}>
        <Text>{rowData.name}</Text>
      </View>
    )
  }

 render() {

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow.bind(this)}
        style={styles.mainContainer}
      />
    );
  }

}

​

有谁能给我指个方向吗？

Answer 1

基本上我是按照安德鲁的建议..

我创建了一个存储视图的子组件，并从父组件调用并发送props。为了对颜色进行随机化，我只需对包含颜色的数组进行打乱，所有内容都能完美地工作。

就像这样：

render() {
    this.shuffle(backColor);
    var card =[];

    for(var i=0;i<inspirationArr.length;i++) {
      card.push(<CardBoard color={backColor[i%8]} name={arr[i].name} />);
    }

    return <ScrollView style={styles.mainContainer}>{card}</ScrollView>;
}

class CardBoard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: props.color,
      name: props.name,
    }
  }

  render() {
    return (
      <View style={{ backgroundColor: this.state.color }}>
        <Text style={styles.nameText}>{this.state.name}</Text>
      </View>
    );
  }
}

​

谢谢。