Expo 图片

A Boolean value indicating whether the accessibility elements contained within the image are hidden from the screen reader.

The text that's read by the screen reader when the user interacts with the image. Sets the alt tag on web which is used for web crawlers and link traversal.

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component.

On Android, the accessible property will be translated into the native isScreenReaderFocusable, so it's only affecting the screen readers behaviour.

Whether the image should be downscaled to match the size of the view container. Turning off this functionality could negatively impact the application's performance, particularly when working with large assets. However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality.

Downscaling is never used when the contentFit prop is set to none or fill.

The text that's read by the screen reader when the user interacts with the image. Sets the alt tag on web which is used for web crawlers and link traversal. Is an alias for accessibilityLabel.

Determines if an image should automatically begin playing if it is an animated image.

The radius of the blur in points, 0 means no blur effect. This effect is not applied to placeholders.

Determines whether to cache the image and where: on the disk, in the memory or both.

• 'none' - Image is not cached at all.

• 'disk' - Image is queried from the disk cache if exists, otherwise it's downloaded and then stored on the disk.

• 'memory' - Image is cached in memory. Might be useful when you render a high-resolution picture many times. Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions.

• 'memory-disk' - Image is cached in memory, but with a fallback to the disk cache.

Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.

• 'cover' - The image is sized to maintain its aspect ratio while filling the container box. If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

• 'contain' - The image is scaled down or up to maintain its aspect ratio while fitting within the container box.

• 'fill' - The image is sized to entirely fill the container box. If necessary, the image will be stretched or squished to fit.

• 'none' - The image is not resized and is centered by default. When specified, the exact position can be controlled with contentPosition prop.

• 'scale-down' - The image is sized as if none or contain were specified, whichever would result in a smaller concrete image size.

It is used together with contentFit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.

The format in which the image data should be decoded. It's not guaranteed that the platform will use the specified format.

• 'argb' - The image is decoded into a 32-bit color space with alpha channel (https://developer.android.com/reference/android/graphics/Bitmap.Config#ARGB_8888).

• 'rgb' - The image is decoded into a 16-bit color space without alpha channel (https://developer.android.com/reference/android/graphics/Bitmap.Config#RGB_565).

Whether the img element is draggable on web.

Enables Live Text interaction with the image. Check official Apple documentation for more details.

Force early resizing of the image to match the container size. This option helps to reduce the memory usage of the image view, especially when the image is larger than the container. It may affect the resizeType and contentPosition properties when the image view is resized dynamically.

Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.

Sets the HTML loading attribute on the <img> element. Has no effect on native platforms.

• 'lazy' - Defers loading until the image is near the viewport.
• 'eager' - Loads the image immediately.

Defaults to 'lazy' when responsivePolicy is 'static' (the default policy), because the sizes="auto" source selection used by static only takes effect on lazily-loaded images.

Called when the image view successfully rendered the source image.

Called on an image fetching error.

Called when the image load completes successfully.

Called when the image load either succeeds or fails.

Called when the image starts to load.

Called when the image is loading. Can be called multiple times before the image has finished loading. The event object provides details on how many bytes were loaded so far and what's the expected total size.

An image to display while loading the proper image and no image has been displayed yet or the source is unset.

Note: The default value for placeholder's content fit is 'scale-down', which differs from the source image's default value. Using a lower-resolution placeholder may cause flickering due to scaling differences between it and the final image. To prevent this, you can set the placeholderContentFit to match the contentFit value.

Determines how the placeholder should be resized to fit its container. Available resize modes are the same as for the contentFit prop.

Controls whether the image view can leverage the extended dynamic range (EDR). Use this prop if you want to support high dynamic range (HDR) images, otherwise all images are rendered as standard dynamic range (SDR).

Priorities for completing loads. If more than one load is queued at a time, the load with the higher priority will be started first. Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.

Changing this prop resets the image view content to blank or a placeholder before loading and rendering the final image. This is especially useful for any kinds of recycling views like FlashList to prevent showing the previous source before the new one fully loads.

Controls the selection of the image source based on the container or viewport size on the web.

If set to 'static', the source is selected by the browser from a generated srcset/sizes pair. Works with static rendering. The generated sizes leads with the auto keyword, so supporting browsers select the source from the image's rendered layout size. This requires the image to be lazily loaded, which is why static defaults loading to 'lazy' (pass loading="eager" to opt out, in which case sizes="auto" is ignored). For browsers that don't yet support sizes="auto", sizes falls back to any per-source breakpoints (only emitted for sources that set the deprecated webMaxViewportWidth) and finally to 100vw.

If set to 'initial', the component will select the correct source during mount based on container size. Does not work with static rendering.

If set to 'live', the component will select the correct source on every resize based on container size. Does not work with static rendering.

SF Symbol effect animations. Can be a single effect string, an effect object, or an array of effect strings and/or objects.

// Single effect as string
sfEffect="bounce"

// Single effect as object with options
sfEffect={{ effect: "bounce", repeat: -1, scope: "by-layer" }}

// Array of mixed strings and objects
sfEffect={["bounce", { effect: "pulse", repeat: -1 }]}

The image source, either a remote URL, a local file resource or a number that is the result of the require() function. When provided as an array of sources, the source that fits best into the container size and is closest to the screen scale will be chosen. In this case it is important to provide width, height and scale properties.

For SF Symbols (iOS), use the sf: prefix followed by the symbol name, for example, sf:star.fill.

Note: For the complete list of SF Symbols, see Apple's SF Symbols catalog or the sf-symbols-typescript library documentation.

Values for the CSS custom properties that an SVG source refers to with var(). Each entry is substituted into the document before it is parsed, so the image stays a vector, unlike an SVG tinted with tintColor on iOS.

Because the substitution happens on the document itself, different parts of one SVG can be given different values, so a single document can be tinted with several colors.

Values are not limited to colors. Anything a custom property stands in for, such as stroke-width or opacity, is substituted the same way. Keys include the leading --. Values are inserted as written and cannot refer to other custom properties: a value such as 'var(--other)' is not resolved. Reference a paint server the document defines with url(#id).

A property that is not supplied falls back to the value declared inside its own var(). When there is no fallback, the declaration is dropped and the renderer applies its own default. An SVG that uses var() is rendered with its fallbacks even when this prop is not set. A document authored for the browser looks the same in the app.

Note: Colors must be values the SVG itself understands, such as '#ff0000' or 'red'. React Native color descriptors like PlatformColor are not resolved.

Note: tintColor is applied on top of the substituted document. It floods every pixel with a single color, so color values are hidden by it while other values, such as widths or opacities, still take effect. On iOS the image is rasterized in that case, as with tintColor alone.

Has no effect on sources that aren't SVG.

// house.svg contains fill="var(--roof, #888)" and fill="var(--wall, #ccc)"
<Image
  source={require('./house.svg')}
  svgVariables={{ '--roof': '#ee3333', '--wall': '#3399ff', '--stroke-width': 2 }}
/>

A color used to tint template images (a bitmap image where only the opacity matters). The color is applied to every non-transparent pixel, causing the image's shape to adopt that color. This effect is not applied to placeholders.

Note that useImage options parameter also has a tintColor field. When you have a useImage as a source use its tintColor instead.

Describes how the image view should transition the contents when switching the image source.
If provided as a number, it is the duration in milliseconds of the 'cross-dissolve' effect.

Whether to use the Apple's default WebP codec.

Set this prop to false to use the official standard-compliant libwebp codec for WebP images. The default implementation from Apple is faster and uses less memory but may render animated images with incorrect blending or play them at the wrong framerate. Some animated WebP files also decode very slowly with Apple's codec, which can make the image take a long time to appear and keep a CPU core busy while it loads. If you run into that, try setting this prop to false to switch to libwebp instead.

See: https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#awebp-coder

Style object for the image.

The style of the image container.