图片 (Image)

此组件用于显示图像,图像可以来自本地或网络。它支持 JPEG、GIF 和 PNG 格式。

如果指定了子元素,图像将作为背景,子元素在其上方渲染。

如果 Headers 包含“Cache-Control: max-stale”且未指定值,并且图像加载失败,则组件会再次尝试向底层原生 Image(仅限 iOS)传递 cache: “only-if-cached”。这样,应用就可以渲染原本无法访问的陈旧缓存图像。

属性

// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: string = undefined;

// HTTP headers to include when fetching the URL.
headers: { [headerName: string]: string } = undefined;

// Called when an error occurs that prevents the image from loading
onError: (err?: Error) => void;

// Called when the image successfully loads
onLoad: (size: Dimensions) => void;

// Android-specific resize property
resizeMethod: 'auto' | 'resize' | 'scale' = 'auto'; // Android only

// Determines how to resize the image if its natural size
// does not match the size of the container
// Note: In Web version, 'auto' doesn't scale down image
//   if width/height smaller than the original image size
resizeMode: 'stretch' | 'contain' | 'cover' | 'auto' | 'repeat' = 'contain';

// URL to image
source: string = undefined;

// See below for supported styles
style: ImageStyleRuleSet | ImageStyleRuleSet[] = [];

// ID that can be used to identify the instantiated element for testing purposes.
testId: string = undefined;

// Tooltip for image
title: string = undefined;

样式

Flexbox 样式

视图样式

变换样式

方法

// Returns the native width and height of the image. Can be called only after
// the onLoad has been called and only while the component is mounted.
getNativeHeight(): number;
getNativeWidth(): number;

静态方法

// Prefetches a remote image and stores it in a cache. This can decrease the
// amount of time it takes when you later want to show the image because the
// image only has to be fetched from the local cache rather than over the
// network.
prefetch(url: string): Promise<boolean>;

// Similarly to [prefetch], this method loads a remote image and stores it in
// a cache. If prefetching was successful it will also get image dimensions. It will be
// useful if you need [getNativeHeight] or [getNativeWidth] after image
// was loaded because you will get this info together with prefetching and before
// you actually need to show the image.
getMetadata(url: string): Promise<ImageMetadata>