Jetpack Compose

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

@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('Saved!')}>保存更改</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 组件。
`进度指示器`	用于显示操作状态的进度指示器组件。
`PullToRefreshBox`	用于下拉刷新交互的 PullToRefreshBox 组件。
`RadioButton`	用于单选控件的 RadioButton 组件。
`RNHostView`	用于在 Jetpack Compose 中启用 React Native 视图的组件。
`Row`	用于水平放置子元素的 Row 组件。
`SearchBar`	用于搜索输入功能的 SearchBar 组件。
`SegmentedButton`	用于单选或多选的分段按钮组件。
`Shape`	用于绘制几何形状的 Shape 组件。
`Slider`	用于从一定范围内选择值的 Slider 组件。
`Snackbar`	出现在屏幕底部的简短通知，用于提供反馈而不会打断用户。
`Spacer`	用于在元素之间添加可调整空间的 Spacer 组件。
`Surface`	用于样式化内容容器的 Surface 组件。
`Switch`	用于切换控件的 Switch 组件。
`Text`	用于显示样式化文本的 Text 组件。
`TextField`	用于原生 Material3 文本输入的 TextField 组件。
`ToggleButton`	用于显示原生 Material3 切换按钮的 ToggleButton 组件。
`Tooltip`	用于在长按时显示上下文信息的 Tooltip 组件。