但是,没有一个答案/评论是令人满意的.它们要么告诉您克隆无法解决问题的数据,要么在ListView上设置唯一键来解决问题,但会创建一个新问题.
当您在ListView上设置唯一键并在删除后更新它时,整个视图再次呈现并滚动到顶部.向下滚动列表以删除项目的用户希望列表保持其位置.
这是一个人为的例子,使用我认为克隆数据的正确方法:
var ListViewExample = React.createClass({
getInitialState() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
r1 !== r2
}});
var rows = ['row 1', 'row 2', 'row 3'];
return {
dataSource: ds.cloneWithRows(rows),
};
},
_deleteRow() {
var rows = ['row 1', 'row 3'];
this.setState({dataSource: this.state.dataSource.cloneWithRows(rows)})
},
renderRow(rowData, sectionID, rowID) {
return <TouchableOpacity onPress={this._deleteRow}
style={{height: 60, flex: 1, borderBottomWidth: 1}}>
<Text>{rowData}</Text>
</TouchableOpacity>
},
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/> …是否可以在与onTopReached事件上附加项目的方式类似的事件上将项目添加到React Native的ListView onEndReached？目前,当我将行前置到列表中时,ListView会滚动到顶部.
用例:我有一个带有Feed的应用程序,用户可以向下滚动.当从导航中导航然后返回到导航时,我想在顶部显示最后看到的行.然后,用户应该能够向上滚动以查看她/他已滚动的前一行,当然还可以向下滚动以加载新行.假设我已经从最后一次看到的行开始渲染ListView,一个人为的例子看起来像这样:
_onTopReached() {
this._unshiftRows();
},
_unshiftRows() {
var list = this.props.list; // The entire list
var lastSeenRowIndex = this.props.lastSeenRowIndex;
var prevRows = list.slice(0, i);
this._rows = prevRows.concat(this._rows);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this._rows)
});
},
在上面的示例中,我只是将列表的第一部分预先添加到已经渲染的最后一部分,_onTopReached因为我已经处于顶部.但是,这会导致ListView使用屏幕顶部的第一行重新渲染,而不是保持先前的位置.
另一种方法是存储y最后看到的行的偏移量,并导航回ListView滚动到该位置.但是,该方法需要在当前行之前的每一行进行渲染,这是耗时的.我也无法scrollWithoutAnimationTo通过设置获得正确的偏移量contentOffSet.但是如果我scrollTo在调用之前使用或设置超时scrollWithoutAnimationTo并且允许第一行在平均时间内呈现,则会滚动到正确的位置.但那不是很好.
非常感谢所有帮助.谢谢!