背景颜色不重新渲染答案

【问题标题】：Background color not re-rendering背景颜色不重新渲染
【发布时间】：2016-09-27 10:02:40
【问题描述】：

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

判断背景颜色的表达式：

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

问题在于backgroundColor 没有改变，尽管调用了render() 方法并更新了状态。

我什至尝试过forceUpdate()，在这种情况下它会渲染两次，但不会更新颜色。

渲染方法：

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

【问题讨论】：

标签： reactjs react-native state background-color react-native-listview

【解决方案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}
        />
    );
};

【讨论】：