背景颜色不重新渲染

Question

在这个例子中，我创建了一个ListView和一组TouchableOpacity按钮。一次只能用蓝色突出显示其中的一个。

表达，以确定背景颜色：

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

的问题是，所述backgroundColor不改变，尽管被称为render()方法和状态被更新。

我甚至试过forceUpdate()，在这种情况下它渲染两次，但没有更新颜色。

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