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

更新一种情况，最近在mx5等机型上发现打开webview之后再进入RN页面，RN页面无法显示，查看了下在js里的图片加载回调无异常，ReactImageView调用回异常，，哪哪都没问题。。。后来通过排查webview中设置了硬件加速引起~~~

 

----------------------------------------

 

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

 

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

 

resizeMode="cover"

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

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

 

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

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

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

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

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

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

• center: 居中不拉伸。