ReactNative ListView 坑

2017-02-10  本文已影响131人  MiBoy

项目背景

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

上一篇 下一篇

猜你喜欢

热点阅读