HarmonyOS 鸿蒙Next 【ReactNative】FlatList渲染性能太差，滑动列表白屏问题凸显

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 【ReactNative】FlatList渲染性能太差，滑动列表白屏问题凸显 模块名_概率简要描述: 客户端用的是最新的官方SampleApp工程,RN端也是对应的官方SampleProject-MainProject. 从TESTS列表路由到FlatList测试页面后，进行复现测试。将FlatList数据源items数量提升到200个。快速上下滑动列表，必现白屏问题，即便单个cell中仅仅渲染一个Text组件。如果将单个cell渲染内容稍微多一些，列表滑动体验几乎不可接受。

环境信息:
网络环境 本地数据，本地dev调试。也测试过加载打好包的bundle，问题依旧存在。
硬件开发板型号 HUAWEI Mate 60 Pro
型号代码 ALN-AL00
软件版本信息或tag节点
软件版本:5.0.0.102

测试环境
其他 快速上下滑动列表必现白屏，且cell渲染内容稍多时，白屏问题严重

恢复手段: 无

出现概率:问题出现次数/实际测试次数 必现


更多关于HarmonyOS 鸿蒙Next 【ReactNative】FlatList渲染性能太差，滑动列表白屏问题凸显的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

解决方案是用RecyclerListView；请试试是否可以

而且release版本比debug版本的性能也稍微好些，请试试；

如果还是不行，请提供一下写的demo代码，我们看看

https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/recyclerListView.md

更多关于HarmonyOS 鸿蒙Next 【ReactNative】FlatList渲染性能太差，滑动列表白屏问题凸显的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙Next中使用ReactNative时FlatList渲染性能差及滑动列表白屏问题，可以采取以下措施进行优化：

  1. 优化数据加载：确保FlatList的数据加载是高效的，避免一次性加载过多数据。可以采用分页加载或懒加载策略，根据用户滑动位置动态加载数据。

  2. 使用虚拟化技术：ReactNative的FlatList本身已支持虚拟化技术，但可以通过调整其windowSize、initialNumToRender等属性进一步优化渲染性能。windowSize决定了渲染窗口的大小，适当增加可以提高滑动流畅度。

  3. 减少重绘和重排：确保FlatList的item组件是纯净的（Pure Component），避免不必要的重绘和重排。同时，减少item内部的复杂布局和计算，提高渲染效率。

  4. 内存管理：检查应用中是否存在内存泄漏问题，确保内存使用高效。过多的内存占用会影响渲染性能。

  5. 异常处理：针对白屏问题，可添加异常捕获机制，当发生渲染错误时及时捕获并处理，避免应用崩溃或白屏。

  6. 升级ReactNative版本：确保使用的ReactNative版本是稳定且经过优化的，新版本中可能包含性能改进和bug修复。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部