System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 基于局部动态渲染的RN高性能Table组件运行方法、装置及存储介质制造方法及图纸_技高网

基于局部动态渲染的RN高性能Table组件运行方法、装置及存储介质制造方法及图纸

技术编号:40708270 阅读:2 留言:0更新日期:2024-03-22 11:08
本发明专利技术实施例公开了一种基于局部动态渲染的RN高性能Table组件运行方法、装置及存储介质,涉及信息技术领域。在RN开发框架中引入并改进Table组件,对Table组件进行了能力扩展,支持展示顶部布局、SectionHeader布局,效果类似SectionList的ListHeader和SectionHeader,支持吸顶功能,并且Table组件的各部分支持自定义渲染,也丰富了组件的应用范围。实际应用中解决了RN开发中对于大数据量场景中的滚动延迟,从而降低大数据量的场景对于渲染性能的影响。

【技术实现步骤摘要】

本专利技术涉及信息,尤其涉及一种基于局部动态渲染的rn高性能table组件运行方法、装置及存储介质。


技术介绍

1、在目前的移动端app的开发中,二维表格是一个常用且重要的组件。但是在目前的rn(react-native)开发框架中,基础sdk(software development kit,软件开发工具包)并没有提供table组件,并且在需要展示大数据量的场景中,传统的布局开发方式中无法实现横向、纵向双向滚动效果。同时由于rn数据驱动ui的特性,在实现跟随滚动时,必然会出现滚动延迟的问题。同时,传统的布局开发方式中,大数据量的场景对于渲染性能的影响较大。

2、因此,如何在rn开发框架中引入并改进table组件,从而解决rn开发中对于大数据量场景中的滚动延迟,以及降低大数据量的场景对于渲染性能的影响,成为了需要研究的问题。


技术实现思路

1、本专利技术的实施例提供一种基于局部动态渲染的rn高性能table组件运行方法、装置及存储介质,通过在rn开发框架中引入并改进table组件,解决rn开发中对于大数据量场景中的滚动延迟,从而降低大数据量的场景对于渲染性能的影响。

2、为达到上述目的,本专利技术的实施例采用如下技术方案:

3、第一方面,本专利技术的实施例提供的方法,包括:

4、获取待处理的表格信息;

5、调用建立在rn开发框架中的table组件,其中,通过rn开发框架建立前端开发环境,采用rn开发框架中的rn系统组件作为基础布局组件,并利用所述基础布局组件中的scrollview来建立table组件,其中,table组件采用纵向scrollview作为根布局,所述table组件的内部嵌套子布局和横向scrollview并作为表体滚动部分;

6、对所述待处理的表格信息进行渲染处理并生成二维表格。

7、第二方面,本专利技术的实施例提供的装置,包括:

8、采集模块,用于获取待处理的表格信息;

9、组件触发模块,用于调用建立在rn开发框架中的table组件,其中,通过rn开发框架建立前端开发环境,采用rn开发框架中的rn系统组件作为基础布局组件,并利用所述基础布局组件中的scrollview来建立table组件,其中,table组件采用纵向scrollview作为根布局,所述table组件的内部嵌套子布局和横向scrollview并作为表体滚动部分;

10、表格生成模块,用于对所述待处理的表格信息进行渲染处理并生成二维表格。

11、第三方面,本专利技术的实施例提供的存储介质,存储有计算机程序或指令,当所述计算机程序或指令被运行时,实现如上所述的方法。

12、本专利技术实施例提供的基于局部动态渲染的rn高性能table组件运行方法、装置及存储介质,在rn开发框架中引入并改进table组件,对table组件进行了能力扩展,支持展示顶部布局、sectionheader布局,效果类似sectionlist的listheader和sectionheader,支持吸顶功能,并且table组件的各部分支持自定义渲染,也丰富了组件的应用范围。实际应用中解决了rn开发中对于大数据量场景中的滚动延迟,从而降低大数据量的场景对于渲染性能的影响。

本文档来自技高网...

【技术保护点】

1.一种基于局部动态渲染的RN高性能Table组件运行方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述基础布局组件,还包括:View、Image、Text、TouchableOpacity、Animated和RefreshControl。

3.根据权利要求1所述的方法,其特征在于,所述子布局包括:顶部布局、头部布局、表头、表体和表尾;

4.根据权利要求1或3所述的方法,其特征在于,在所述顶部布局中,顶部部分默认为一个支持自定义的空区域,其中,采用返回值为ReactElement的回调函数进行ui自定义;所述顶部部分在滚动过程中,默认自然跟随Table的滚动并在屏幕顶部消失;

5.根据权利要求1或3所述的方法,其特征在于,所述表头通过Table组件的columns属性自动生成;

6.根据权利要求5所述的方法,其特征在于,所述表体的表体部分由横向ScrollView构成,横向ScrollView中的每个元素是一行,每行作为一个横向布局,平行排列一行中设置多个单元格;

7.根据权利要求6所述的方法,其特征在于,当所述表体横向滚动时,所述表头跟随表体滚动,其中,通过NativeEvent桥接原生滚动事件,并将滚动值映射成一个Animated.Value,再作用到所述表头和所述表尾。

8.根据权利要求6所述的方法,其特征在于,所述表尾采用横向ScrollView,在渲染过程中,默认循环遍历Columns属性数组并取出每一个footer的名称;

9.一种基于局部动态渲染的RN高性能Table组件运行装置,其特征在于,包括:

10.一种存储介质,其特征在于,存储有计算机程序或指令,当所述计算机程序或指令被运行时,实现如权利要求1至8中任一项所述的方法。

...

【技术特征摘要】

1.一种基于局部动态渲染的rn高性能table组件运行方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述基础布局组件,还包括:view、image、text、touchableopacity、animated和refreshcontrol。

3.根据权利要求1所述的方法,其特征在于,所述子布局包括:顶部布局、头部布局、表头、表体和表尾;

4.根据权利要求1或3所述的方法,其特征在于,在所述顶部布局中,顶部部分默认为一个支持自定义的空区域,其中,采用返回值为reactelement的回调函数进行ui自定义;所述顶部部分在滚动过程中,默认自然跟随table的滚动并在屏幕顶部消失;

5.根据权利要求1或3所述的方法,其特征在于,所述表头通过table组件的columns属性自动生成;

6.根据权利要求5所述的方法...

【专利技术属性】
技术研发人员:任家亮
申请(专利权)人:舟谱数据技术南京有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1