ListView动态样式反应原生

问题描述：

在我的项目中，我试图改变我的ListView的背景颜色。颜色已经在一个数组内部，并且组件内部会堆积起来，我首先获取rand数字，这样每次用户打开组件时，它都会以不同的颜色开始。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} 
 
     /> 
 
    ); 
 
    } 
 

 
}

任何人都可以点我到正确的方向？

问题是所有的行都使用'color'的相同引用，所以当一行更改它时，子行需要重新渲染，并且这样做也修改'color'。将_renderRow组件移出到一个合适的子组件，该组件根据来自父项的静态输入管理其自己的颜色将解决问题。 –

哦..我明白了..好吧..我会按照你的建议尝试。谢谢！ –

答

基本上我下面什么安德鲁建议..

我创建存储视图中的子，我从父母打电话和发道具..和随机化的颜色我只是洗牌包含数组颜色和一切工作完美。

是这样的： -

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

谢谢。

ListView动态样式反应原生

相关推荐