反应原生ListView
问题描述:
我有问题获取列表视图自行更新。我有一些虚拟数据和一张图片,我想渲染一张图片或未选中的图片。列表视图呈现正确,我只是没有从列表视图上按自动重新呈现。反应原生ListView
我有这样的getInitialState功能:
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 != r2
})
var dummyData = this.props.navigator.dummyData;
var formattedData = this.formatData(dummyData);
return ({
data: formattedData,
dataSource: ds.cloneWithRows(formattedData),
selectedRow: {}.
})
formatData: function(data){...} // code to format data, it is working as intended
在我使我有这样的:
render:function() {
return(
<View>
<ListView
style={{flex:10}}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderSeperator={this.renderSeperator}
enableEmptySections={true}
/>
</View>
)
}
renderRow:
renderRow: function(rowData) {
return(
<TouchableHighlight onPress={() => {this.selectRow(rowData)} } >
<View style={{borderLeftWidth: 8, borderLeftColor: '#81BD41'}}>
<View style={styles.scheduleRow}>
<View style={styles.shiftTextContainer}>
<Text style={styles.textName}>
{rowData.firstName} {rowData.lastName}
</Text>
</View>
<View style={styles.checkedContainer}>
{this.imageCheck(rowData)}
</View>
</View>
</View>
</TouchableHighlight>
在新闻selectRow
selectRow: function(rowData) {
console.log(this.state.selectedRow == rowData);
var copyData = this.state.data;
if (this.state.selectedRow === rowData) {
this.setState({selectedRow:''});
rowData.selected = false;
} else {
this.setState({selectedRow: rowData})
rowData.selected = true;
}
this.setState({dataSource: this.state.dataSource.cloneWithRows(copyData)});
this.renderRow(rowData);
},
最后图像检查:
imageCheck: function(rowData) {
var image = '';
if (this.state.selectedRow === rowData) {
image = checkedImage;
} else {
image = uncheckedImage;
}
return (
<View>
<Image style={styles.imageSize} source={image} />
</View>
)
},
我已经试过手动调用列表视图renderRow功能以及使“新数据”的副本,并使用cloneWithRows回this.state.dataSource。我无法使图像复选标记自动刷新。如果我保存了项目,它会通过热重载来适当地呈现列表视图。
我在这里做错了什么?我怀疑它要么是我必须使用ListView的onVisibleChange函数来让渲染自动触发或更改我初始状态下的rowHasChanged以更适当地反映更改。但是,我听说onVisibleChange在android方面存在一些bug,所以除非这是我不想用它来修复这个bug的唯一解决方案。
谢谢你的时间。
答
尝试在您的行中添加id
,不要直接比较rowData
,也不必在selectRow
函数中添加this.renderRow(rowData);
。您的代码如下所示:
renderRow: function(rowData) {
return(
<TouchableHighlight onPress={() => {this.selectRow(rowData.id)} } >
...
);
}
selectRow(rowId){
this.setState({selectedRow:rowId});
}
imageCheck(){
if (this.state.selectedRow == rowData.id){
image = checkedImage;
}
else{
image = uncheckedImage;
}
return (
<View>
<Image style={styles.imageSize} source={image} />
</View>
);
}
其中'checkedImage'和'uncheckedImage'定义在哪里? – FuzzyTree
这只是'进口'使用要求的图像我想显示基于条件的逻辑。他们工作得很好:D。我已经省略了大部分我很确定不是问题的事情。 – powerup7