react-native - React Native List View - 在不呈现整个列表的情况下添加项目

Question

我正在尝试使用下拉刷新功能实现无限滚动。我得到了新数据，通过 concat 附加它，它呈现得很好。问题是它用它呈现整个列表。如果我有超过 500 个项目，那将成为一场噩梦。

onRefresh() {
    var posts = this.state.posts;
    var firstPost = posts[0].m._id;

    server.getStream('', firstPost, 4000)
        .then(res => {
             posts = res.concat(posts);
             this.setState({
                dataSource: this.ds.cloneWithRows(posts),
                posts
             });
             this.swipeRefreshLayout && this.swipeRefreshLayout.finishRefresh();
        })

}

有没有办法告诉 RN 只渲染新行？也许是某种 key Prop ？

谢谢

更新

DatSource 中的 rowHasChanged 比较器不会触发。我认为我构建组件的方式可能与此有关。

renderRow(post) {

    if(post === 'loader') {
        return (
            <ProgressBarAndroid 
                styleAttr="Large" 
                style={styles.spinnerBottom}/>
        )
    }

    let hasLoader = post.m._id === lastPostId;

    let loader = hasLoader ? 
        <ProgressBarAndroid 
            styleAttr="Large" 
            style={styles.spinnerBottom}/> : null;

    return (
        <View>
            <Post 
                post={post}
                isLoadingTop={isLoadingTop}/>
            {loader}
        </View> 
    )
}

render() {

    var stream = <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    onEndReached={this.onEndReached.bind(this)}
                    onEndReachedThreshold={1}
                    pageSize={15} />


    return (
        <View style={styles.mainContainer}>
            <View style={styles.header}>
                <Text style={styles.headerText}>Header</Text>
            </View>
            <SwipeRefreshLayoutAndroid
                ref={(c) => { 
                    this.swipeRefreshLayout = c;
                }}
                onRefresh={this.onRefresh.bind(this)}>
                {stream}
            </SwipeRefreshLayoutAndroid>
        </View>
    );

有什么想法吗？

Answer 1

您需要实现 DataSource.rowHasChanged 比较器，使其为数据未更改的行呈现 false。在现有列表项未更改的情况下，您可以使用简单的引用相等性检查:

let dataSource = new ListView.DataSource({
  rowHasChanged: (prev, next) => prev !== next
});

如果您不想更改的行与之前渲染过程中使用的对象不同，则需要实现更具体的比较器函数。