Contents

首先采用的是React Native自带的组件Image,每一张图片一个Image。发现在列表比较大时内存占用非常高。最后发现用WebView展示图片性能远高于Image,内存占用终于降到了可以接受的范围。在得到最终答案之前,尝试了手动优化。由于ListView中的组件不会被回收,随着列表增大,内存占用随之线性增大。从这方面着手,将不再画面中显示的Image去掉,换成View站位,降低Image组件带来的大的内存消耗。在向上滚动时不断将上面的Image去掉,在向下滚动时,需要将原有的Image设置回来。图片加载和去掉的时机都是ListView中的ScrollView的OnScroll方法控制,通过计算滚动的高度和列表的整体高度,在列表滚至将近底部或顶部时,对列表进行处理和渲染。期间遇到的问题及解决:
列表快速滚动。快速滚动时可能会多次触发图片的渲染,违背了增量加载图片的初衷,带来渲染的性能降低。解决方法:在第一次触发后,增加标志位,仅当这一次增量加载的数据渲染完后,才可以进行下一次渲染。判断是否加载完毕,是通过OnScroll获取到的ScrollView中的列表高度判断的,增加图片及去掉图片的渲染,这个值都会改变。改变后也说明这次列表已经渲染完毕。
ListView刷新。由于ListView中的数据是对数据的引用,如果数据引用的值不变,列表不会刷新。这里还是采用了性能比较低的深拷贝。将需要刷新的项进行深拷贝,触发列表刷新。

Contents