美文网首页
ReactNative ListView 坑

ReactNative ListView 坑

作者: MiBoy | 来源:发表于2017-02-10 21:25 被阅读131次

    项目背景

    项目中有个需求需要删除一个Listview的item,但是有问题。是这样的,我有10条数据,屏幕只能显示5条,所以我滑动到最后一条,选择删除,然后刷新state,但是删除的那个item没了,留出来一块空白,没有其他数据补位的,用手一触碰屏幕,整个listview都会一闪烁,布局又排正好了。
    js代码

              <ListView
                ref="_listView"
                dataSource={this.state.dataSource}
                renderRow={this.renderItemView.bind(this)}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={this.onRefresh.bind(this)}
                        tintColor="#ff0000"
                        title="Loading..."
                        titleColor="#00ff00"
                        colors={['#ff0000', '#00ff00', '#0000ff']}
                        progressBackgroundColor="#ffffff"
                    />}
    
            />
    

    心想着如果不能正确显示,起码在删除后把整个列表滚动到最后边也行,所以搜索了一下Listview的Api,有一个scrollTo()的方法,于是就抱着试试看的态度

     this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
    

    意想不到的事情发生了,列表没有滑动到最上边,但是没有空白的view了,上边的会自动填充到下边了。于是我把这行复制了一次,调用了两次这个方法

     this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
     this.refs._listView.scrollTo({x: 0, y: 0, animated: true});
    

    列表滑动到最上边了!

    谨记这次的开发教训,毕竟React-native现在还不成熟。

    相关文章

      网友评论

          本文标题:ReactNative ListView 坑

          本文链接:https://www.haomeiwen.com/subject/bmrnittx.html