This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Jetpack Compose

使用 @expo/ui 构建原生 Android 界面的 Jetpack Compose 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

@expo/ui/jetpack-compose 中的 Jetpack Compose 组件允许你使用来自 React Native 的 Jetpack Compose 构建完全原生的 Android 界面。

安装

Terminal

- npx expo install @expo/ui

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

用法

使用 @expo/ui/jetpack-compose 中的组件需要将其包装在一个 Host 组件中。Host 是 Jetpack Compose 视图的容器。

import { Host, Button } from '@expo/ui/jetpack-compose';

export function SaveButton() {
  return (
    <Host matchContents>
      <Button onClick={() => alert('已保存！')}>保存更改</Button>
    </Host>
  );
}

可用组件

组件	描述
`AlertDialog`	用于显示原生警告对话框的 AlertDialog 组件。
`Badge`	用于显示状态指示器和计数的 Badge 组件。
`BadgedBox`	用于在内容上叠加徽章的 BadgedBox 组件。
`BasicAlertDialog`	用于显示自定义内容对话框的 BasicAlertDialog 组件。
`Box`	用于堆叠子元素的 Box 组件。
`Button`	用于显示原生 Material3 按钮的 Button 组件。
`Card`	用于在带样式容器中显示内容的 Card 组件。
`Carousel`	用于显示可滚动项目集合的 Carousel 组件。
`Checkbox`	用于选择控件的 Checkbox 组件。
`Chip`	用于显示紧凑元素的 Chip 组件。
`Column`	用于垂直排列子元素的 Column 组件。
`DateTimePicker`	用于选择日期和时间的 DateTimePicker 组件。
`Divider`	用于创建视觉分隔线的 Divider 组件。
`DockedSearchBar`	用于显示内嵌搜索输入框的 DockedSearchBar 组件。
`DropdownMenu`	用于显示下拉菜单的 DropdownMenu 组件。
`ExposedDropdownMenuBox`	用于显示带有可自定义锚点的下拉菜单的 ExposedDropdownMenuBox 组件。
`FloatingActionButton`	遵循 Material Design 3 的 FloatingActionButton 组件。
`FlowRow`	用于水平换行排列子元素的 FlowRow 组件。
`HorizontalFloatingToolbar`	用于显示浮动操作栏的 HorizontalFloatingToolbar 组件。
`HorizontalPager`	用于支持滑动页面的 HorizontalPager 组件。
`Host`	用于连接 React Native 和 Jetpack Compose 的 Host 组件。
`Icon`	用于显示图标的 Icon 组件。
`IconButton`	用于显示原生 Material3 图标按钮的 IconButton 组件。
`LazyColumn`	用于显示可滚动列表的 LazyColumn 组件。
`LazyRow`	用于显示水平滚动列表的 LazyRow 组件。
`ListItem`	用于显示结构化列表项的 ListItem 组件。
`LoadingIndicator`	用于显示加载状态的 LoadingIndicator 组件。
`ModalBottomSheet`	从屏幕底部呈现内容的 ModalBottomSheet 组件。
`NavigationBar`	用于 Material 3 底部导航的 NavigationBar 组件。
`Progress indicators`	用于显示操作状态的进度指示器组件。
`PullToRefreshBox`	用于下拉刷新交互的 PullToRefreshBox 组件。
`RadioButton`	用于单选控件的 RadioButton 组件。
`RNHostView`	用于在 Jetpack Compose 中启用 React Native 视图的组件。
`Row`	用于水平排列子元素的 Row 组件。
`SearchBar`	用于搜索输入功能的 SearchBar 组件。
`SegmentedButton`	用于单选或多选的 Segmented Button 组件。
`Shape`	用于绘制几何图形的 Shape 组件。
`Slider`	用于从范围内选择值的 Slider 组件。
`Snackbar`	出现在屏幕底部的简短通知，用于提供反馈而不会打断用户。
`Spacer`	用于在元素之间添加可伸缩空间的 Spacer 组件。
`Surface`	用于承载带样式内容的 Surface 组件。
`Switch`	用于切换控件的 Switch 组件。
`Text`	用于显示带样式文本的 Text 组件。
`TextField`	用于原生 Material3 文本输入的 TextField 组件。
`ToggleButton`	用于显示原生 Material3 切换按钮的 ToggleButton 组件。
`Tooltip`	用于在长按时显示上下文信息的 Tooltip 组件。