背景色が再レンダリングされない

Question

この例では、TouchableOpacityボタンのセットを使用してListViewを作成しています。そのうちの1つだけが青色で一度に強調表示される必要があります。

式は、背景色を決定します

backgroundColor:rowData.key==this.state.selected?'blue':'transparent' 

問題がrender()メソッドが呼び出されると、状態が更新されているにもかかわらず、backgroundColorが変化しないということです。

私はforceUpdate()を試したこともあります。この場合、2回レンダリングされますが、色は更新されません。

Renderメソッド：

render() { 
    console.log("RE-RENDER",this.state.selected);//GETS CALLED, STATE UPDATED 
    return (
     <ListView 
      dataSource={this.state.dataSource} 
      keyboardShouldPersistTaps={true} 
      renderRow={(rowData) => 
       rowData.visible && 
        <TouchableOpacity 
         style={{backgroundColor:rowData.key==this.state.selected?'blue':'transparent'}} 
         onPress={(evt) => { 
          this.setState({ 
           selected:rowData.key, 
          }, function() { 
           console.log("NEW",this.state.selected); 
           this.forceUpdate();//DOESN'T HELP 
          }); 
         }} 
        > 
         <Text>{rowData.value}</Text> 
        </TouchableOpacity> 
       } 
      automaticallyAdjustContentInsets={false} 
     /> 
    ); 
}; 

コンストラクタ：

constructor(props) { 
    super(props); 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([ 
      { 
       key: 'first', 
       value: 'BMW', 
       visible: true, 
      },{ 
       key: 'second', 
       value: 'Mercedes', 
       visible: true, 
      }, 
     ]), 
    }; 
} 

Answer 1

問題はListViewが再レンダリングをなかったこと、DataSource did not changeためでした。 keyプロパティを追加すると、外部キーが更新されるたびに更新がトリガーされます。

render() { 
    console.log("RE-RENDER",this.state.selected);//GETS CALLED, STATE UPDATED 
    return (
     <ListView 
      key={this.state.selected} // SOLVED MY PROBLEM 
      dataSource={this.state.dataSource} 
      keyboardShouldPersistTaps={true} 
      renderRow={(rowData) => 
       rowData.visible && 
        <TouchableOpacity 
         style={{backgroundColor:rowData.key==this.state.selected?'blue':'transparent'}} 
         onPress={(evt) => { 
          this.setState({ 
           selected:rowData.key, 
          }, function() { 
           console.log("NEW",this.state.selected); 
           this.forceUpdate();//DOESN'T HELP 
          }); 
         }} 
        > 
         <Text>{rowData.value}</Text> 
        </TouchableOpacity> 
       } 
      automaticallyAdjustContentInsets={false} 
     /> 
    ); 
};