react native Image resizeMode

原图 :150*80

现在 大小: 100* 100

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

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

react native Image resizeMode_第1张图片
{50FF9F5C-6EBA-5A1D-0341-8D6F64C94905}.png

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

react native Image resizeMode_第2张图片
{79E70D76-DAF7-B198-817D-9DBB3A506494}.png

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

react native Image resizeMode_第3张图片
{148F8046-349D-C335-0975-543D6B554176}.png

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

react native Image resizeMode_第4张图片
{2DF7D91A-00A5-AE5F-2562-26B0B2D593A3}.png

center
: 居中不拉伸。

react native Image resizeMode_第5张图片
{F1A6811F-11AD-9CED-8DBA-4ED0EF1CA2EB}.png

你可能感兴趣的:(react native Image resizeMode)