ReactNative上图片无法显示的问题的解决方案

RN上在低内存发送大量图片的时候,会显示图片异常;如在聊天页面中发送上百个表情,会显示异常。如图、

解决方案:将Image的加载渲染方式修改为:

resizeMode="cover"

设置cover模式时,一定要将图片的宽和高都设置为相等,否则会显示异常(宽高比多出的部分无法显示)。另外图片不要有太多的透明外边框,一是占用内存空间大小,另外也有可能会造成异常。

图片不是非常变态的多时,大部分还是使用contain模式。

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

  • cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。

  • contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白

  • stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。

  • repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。

  • center: 居中不拉伸。


猜你喜欢

转载自blog.csdn.net/yeputi1015/article/details/80065986
今日推荐