ReactNative上圖片無法顯示的問題的解決方案
阿新 • • 發佈:2019-01-27
RN上在低記憶體傳送大量圖片的時候,會顯示圖片異常;如在聊天頁面中傳送上百個表情,會顯示異常。如圖、
解決方案:將Image的載入渲染方式修改為:
resizeMode="cover"
設定cover模式時,一定要將圖片的寬和高都設定為相等,否則會顯示異常(寬高比多出的部分無法顯示)。另外圖片不要有太多的透明外邊框,一是佔用記憶體空間大小,另外也有可能會造成異常。
圖片不是非常變態的多時,大部分還是使用contain模式。
resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
決定當元件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。
cover
: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都大於等於容器檢視的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全覆蓋甚至超出容器,容器中不留任何空白。contain
: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都小於等於容器檢視的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全被包裹在容器中,容器中可能留有空白stretch
: 拉伸圖片且不維持寬高比,直到寬高都剛好填滿容器。repeat
: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。center
: 居中不拉伸。