Question

在我的项目中，我尝试更改ListView的背景颜色。颜色已经在一个数组内部，并且在组件内部将进行修改我首先得到兰特数，以便每次用户打开组件时，它将以不同的颜色开始。

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

＆＃13;

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}
      />
    );
  }

}

＆＃13;

任何人都可以指出我正确的方向吗？

Answer 1

基本上我跟随安德鲁建议......

我创建了一个存储视图的子组件，我从父级调用并发送道具..并随机化颜色，我只是将包含颜色和一切正常工作的数组洗牌。

这样的事情： -

＆＃13;

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>
    );
  }
}

＆＃13;

谢谢。

ListView动态样式反应原生

1 个答案: