ListViewダイナミックスタイリング反応ネイティブ

Question

私のプロジェクトでは、私のListViewの背景色を変更しようとしています。 色は既に配列の内側にあり、コンポーネントの内側には山が表示されます。最初にrand番号を取得するため、ユーザーはコンポーネントを開くたびに異なる色で開始します。

renderRowが呼び出されるたびに、どのように色の状態を変更しますか。

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

 
}

誰もが正しい方向に私を指すことができます..私はSETSTATEを追加しようとするが、それは最大コールスタックエラーを引き起こしますか？私はアンドリューが提案どのような以下のよ基本的に

Answer 1

..

..私は、ビューを保存するサブコンポーネントを作成して、私は親から呼び出すや小道具を送信し、色をランダム化するために、私はちょうど含まれている配列をシャッフルします色とすべてが完璧に動作します。

このような何か： -

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

ありがとうございました。