背景颜色不重新渲染
Background color not re-rendering
在这个例子中,我创建了一个带有一组 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,
},
]),
};
}
问题是 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}
/>
);
};
在这个例子中,我创建了一个带有一组 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,
},
]),
};
}
问题是 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}
/>
);
};