Expo 图像

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.

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 browser selects the correct source based on user's viewport width. Works with static rendering. Make sure to set the 'webMaxViewportWidth' property on each source for best results. For example, if an image occupies 1/3 of the screen width, set the 'webMaxViewportWidth' to 3x the image width. The source with the largest 'webMaxViewportWidth' is used even for larger viewports.

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.

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.

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

Style object for the image.

The style of the image container.