这是我的示例代码,我希望在单击时更新 ListView
元素。
此行定义样式:
(this.state.selectedField.id==field.id)?'green':'white'
在此示例中,事件的View
应以绿色突出显示。状态在 handleClick()
内更新,但 renderField()
方法未被调用。
如何让ListView在点击触发状态改变时重新渲染?
import React, {Component} from 'react';
import {
AppRegistry,
View,
ListView,
Text,
TouchableOpacity
} from 'react-native';
class SampleApp extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
fields: ds.cloneWithRows([
{id:0},{id:1},{id:2}
]),
selectedField: {id:0}
};
}
handleClick(field) {
console.log("Selected field:",field);
this.setState({
selectedField: field
});
}
renderField(field) {
return (
<TouchableOpacity onPress={this.handleClick.bind(this, field)} >
<View style={{backgroundColor:(this.state.selectedField.id==field.id)?'green':'white'}}>
<Text style={{left:0, right:0, paddingVertical:50,borderWidth:1}}>{field.id}</Text>
</View>
</TouchableOpacity>
);
}
render() {
return (
<View>
<ListView
dataSource={this.state.fields}
renderRow={this.renderField.bind(this)}
/>
</View>
);
}
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);
最佳答案
当数据源更改时,列表会再次呈现,在您的示例中,由于数据源永远不会更改,因此 ListView 永远不会重新呈现。这可以通过在状态变量中添加一个字段来保存数据源的数据来实现。并在 componentDidMount 方法中,让 dataSource 克隆具有数据状态变量的行。每当您想要重新渲染 ListView 时,您只需更改数据状态变量,列表就会自动重新渲染。我已经更改了您的数据以添加每个对象的选定状态。这是更新后的代码。
class SampleApp extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
var dataVar = [
{
id:0,
selected: true,
},{
id:1,
selected: false,
},{
id:2,
selected: false,
}
];
this.state = {
data: dataVar,
fields: ds,
};
}
componentDidMount() {
this.setState({
fields: this.state.fields.cloneWithRows(dataVar)
});
}
handleClick(field) {
console.log(field);
field.selected = !field.selected;
var dataClone = this.state.data;
console.log(dataClone);
dataClone[field.id] = field;
this.setState({
data: dataClone,
});
}
renderField(field) {
let color = (field.selected == true)?'green':'white';
return (
<TouchableOpacity onPress={this.handleClick.bind(this, field)} >
<View style={{backgroundColor:color}}>
<Text style={{left:0, right:0, paddingVertical:50,borderWidth:1}}> {field.id}</Text>
</View>
</TouchableOpacity>
);
}
render() {
return (
<View>
<ListView
dataSource={this.state.fields}
renderRow={(field) => this.renderField(field)}
/>
</View>
);
}
}
这是一个正在运行的 rnplay sample
关于listview - React Native ListView 不会通过单击重新渲染状态更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38245113/