ReactNative ListView 坑

项目背景

项目中有个需求需要删除一个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现在还不成熟。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,173评论 25 709
  • 原来妈妈也爱美 妈妈的生日就要到了,给她买什么礼物好呢?鸡鸭鱼肉家里满满一冰箱,父亲打电话说吃的啥都不用买。生日蛋...
    5780933168ec阅读 3,923评论 3 6
  • 去年的今天,在个旧加级寨看梨花,今早 突然醒悟感念:如此巧合。16年的3月1日 和17年的3月1日都在休息。于是,...
    青衫湿旧阅读 3,237评论 44 17
  • 在使用cocoapods托管代码的时候的点滴记录 1. 因为 github 的私有库是付费的,所以使用码云的私有仓...
    Kean_Qi阅读 1,852评论 0 0