1. 程式人生 > >ReactNative上圖片無法顯示的問題的解決方案

ReactNative上圖片無法顯示的問題的解決方案

RN上在低記憶體傳送大量圖片的時候,會顯示圖片異常;如在聊天頁面中傳送上百個表情,會顯示異常。如圖、

解決方案:將Image的載入渲染方式修改為:

resizeMode="cover"

設定cover模式時,一定要將圖片的寬和高都設定為相等,否則會顯示異常(寬高比多出的部分無法顯示)。另外圖片不要有太多的透明外邊框,一是佔用記憶體空間大小,另外也有可能會造成異常。

圖片不是非常變態的多時,大部分還是使用contain模式。

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

決定當元件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。

  • cover: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都大於等於容器檢視的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全覆蓋甚至超出容器,容器中不留任何空白。

  • contain: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都小於等於容器檢視的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全被包裹在容器中,容器中可能留有空白

  • stretch: 拉伸圖片且不維持寬高比,直到寬高都剛好填滿容器。

  • repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。

  • center: 居中不拉伸。