Image组件性能问题

[aoarashi1988]

问题描述

Image组件在视图尺寸和实际差距很大的时候有严重的性能问题

复现步骤

使用Image组件，规定一个比较小的宽高，比如{width: 200, height: 200}， src传入一张比较大的图片，比如800 * 600的，如果在列表中有大量这样的图片，列表滚动的时候会严重卡顿

期望行为

列表滚动流畅

报错信息

列表滚动卡顿

系统信息

补充信息

RN本身的Image组件提供resizeMethod属性可供设置，默认使用启发式算法在resize和scale之间自动判断，但是比如列表缩略图的情况，即图片尺寸和视图尺寸相差很大的情况下，一般会手动设置成resize，但是Taro做属性代理的时候，把这个属性舍弃掉了，即只能使用默认值。

实际测试，长列表多图情况下，如果使用默认设置，则部分图片无法显示，并且滚动中UI帧率和js帧率都会降低到10fps以下，手动改成resize以后，图片显示完全，并且滚动中UI帧率和js帧率都稳定在80fps以上。性能差距明显。

建议，在导出Image甚至其他组件时，保留外部传入的其他属性给RN本身的Image组件，方便RN端开发者利用一些RN端特有的设置属性。

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Pines-Cheng

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[iChengbo]

其实可以直接从 react-native 引入 Image 组件的，其他端的再引入 taro 的 Image 就好了

[Pines-Cheng]

@aoarashi1988 非常感谢反馈，PR 否？

[Pines-Cheng]

fixed by pr ##5390