This is documentation for the next SDK version.

Image

用于显示图像的 Jetpack Compose Image 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Expo UI Image 封装了官方的 Jetpack Compose Image API，可显示打包在应用中的图片或远程图片。使用 size、width 或 fillMaxWidth 等修饰符设置尺寸，然后通过 contentScale 控制图片在这些边界内的填充方式。

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

ImageExample.tsx

import { Host, Image } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

export default function ImageExample() {
  return (
    <Host matchContents>
      <Image
        source={require('./assets/photo.jpg')}
        contentScale="crop"
        contentDescription="A mountain at sunset"
        modifiers={[size(240, 160)]}
      />
    </Host>
  );
}

API

import { Image } from '@expo/ui/jetpack-compose';

Component

`Image`

Android

Type: React.Element<ImageProps>

Displays an image using Jetpack Compose.

Size the image with modifiers such as size, width, height, or fillMaxSize.

Example

import { Image } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

<Image
  source={require('./photo.png')}
  contentScale="crop"
  contentDescription="A mountain at sunset"
  modifiers={[size(160, 100)]}
/>

ImageProps

`alignment`

Android

Optional • Type: ContentAlignment • Default: 'center'

How the image should be aligned within its bounds.

`alpha`

Android

Optional • Type: number • Default: 1

Opacity of the image between 0 and 1.

Example

<Image source={require('./icon.png')} alpha={0.5} />

`contentDescription`

Android

Optional • Literal type: union

Accessibility label for the image. Used by screen readers to describe the image to users. Use null for decorative images.

Example

<Image
  source={require('./photo.png')}
  contentDescription="A mountain at sunset"
/>

Acceptable values are: string | null

`contentScale`

Android

Optional • Type: ImageContentScale • Default: 'fit'

How the image should be scaled to fit its bounds.

Example

<Image source={require('./photo.png')} contentScale="crop" />

`onError`

Android

Optional • Type: (error: string) => void

Callback that is called when the image fails to load.

`onLoad`

Android

Optional • Type: () => void

Callback that is called when the image loads successfully.

`source`

Android

Type: ImageSource

A bundled image or an object containing a single local or remote URI.

Example

<Image source={require('./photo.png')} />
<Image source={{ uri: 'file:///path/to/photo.png' }} />

`tint`

Android

Optional • Type: ColorValue

Optional color applied to every non-transparent image pixel.

Example

<Image source={require('./icon.png')} tint="#007AFF" />
<Image source={require('./icon.png')} tint="blue" />

Inherited props

PrimitiveBaseProps

Types

`ImageContentScale`

Android

Literal type: string

Controls how an image is scaled inside its bounds.

`ImageSource`

Android

A bundled image or a single URI-based image source.

Type: number or object shaped as below:

Property	Type	Description
height(optional)	`number`	-
scale(optional)	`number`	-
uri	`string`	-
width(optional)	`number`	-