[发明专利]一种基于ReactNative的图片展示组件开发方法及相关组件

说明书

本申请公开了一种基于ReactNative的图片展示组件开发方法、装置、设备及存储介质。该方法包括：以FlatList组件为基础通过ReactNative设置渲染参数；监测展示列表的下方不可见区域的高度；当所述高度小于高度阈值时加载数据源；监听界面滚动，基于所述数据源根据所述渲染参数加载所述展示列表的可见区域对应的图片数据。通过监测展示列表的下方不可见区域的高度，在符合条件时加载数据源，实现数据的懒加载，并通过监听页面滚动，加载处于可见区域的图片数据，最终形成长列表滚动加载数据与图片懒加载数据的结合展示，有效地解决了大数据量同步展示时造成的设备额外负担、资源浪费及网络压力的问题。

技术领域

本发明涉及计算机技术领域，特别涉及一种基于ReactNative的图片展示组件开发方法、装置、设备及存储介质。

背景技术

当前，移动应用的设计开发离不开对用户体验的关注，用户体验又表现在不同的方面，例如程序运行的流畅度，界面设计的美观度等。随着前端开发技术的愈发成熟，更好的页面体验效果显得尤为重要，页面中使用图文混合并搭配长列表的应用更是随处可见。在ReactNative框架开发中，图片加载是直接获取本地或者网络链接资源然后展示，但直接一次性展示长列表中的图片，会造成额外的网络资源浪费。

发明内容

有鉴于此，本发明的目的在于提供一种基于ReactNative的图片展示组件开发方法、装置、设备及介质，能够解决长列表与图片加载过程中的性能消耗问题。其具体方案如下：

第一方面，本申请公开了一种基于ReactNative的图片展示组件开发方法，包括：

以FlatList组件为基础通过ReactNative设置渲染参数；

监测展示列表的下方不可见区域的高度；

当所述高度小于高度阈值时加载数据源；

监听界面滚动，基于所述数据源根据所述渲染参数加载所述展示列表的可见区域对应的图片数据。

可选的，所述监测展示列表的下方不可见区域的高度，包括：

监测所述展示列表的可见区域的下边界到所述展示列表底部的不可见区域的下边界的距离，以得到所述下方不可见区域的高度。

可选的，所述基于ReactNative的图片展示组件开发方法，还包括：

通过预设接口接收针对所述展示列表的列数调整参数，并根据所述列数调整参数更新所述渲染参数。

可选的，所述基于ReactNative的图片展示组件开发方法，还包括：

通过预设接口接收针对所述展示列表的图片样式调整参数，并根据所述图片样式调整参数更新所述渲染参数。

可选的，所述基于ReactNative的图片展示组件开发方法，还包括：

通过预设接口接收针对所述展示列表的文字样式调整参数，并根据所述文字样式调整参数更新所述渲染参数。

可选的，所述基于ReactNative的图片展示组件开发方法，还包括：

通过预设接口接收针对所述展示列表的单页展示数量调整参数，并根据所述单页展示数量调整参数更新所述渲染参数。

可选的，所述当所述高度小于高度阈值时加载数据源之后，还包括：

基于所述数据源根据所述渲染参数渲染除图片数据外的其余数据。

第二方面，本申请公开了一种基于ReactNative的图片展示组件开发装置，包括：

参数配置模块，用于以FlatList组件为基础通过ReactNative设置渲染参数；