Jetpack Compose

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~56.0.16

@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>
  );
}

可用组件

Component	Description
`AlertDialog`	AlertDialog 组件，用于显示原生警报对话框。
`Badge`	Badge 组件，用于显示状态指示和计数。
`BadgedBox`	BadgedBox 组件，用于在内容上叠加徽标。
`BasicAlertDialog`	BasicAlertDialog 组件，用于显示自定义内容的对话框。
`Box`	Box 组件，用于堆叠子元素。
`Button`	Button 组件，用于显示原生 Material3 按钮。
`Card`	Card 组件，用于在带样式的容器中显示内容。
`Carousel`	Carousel 组件，用于显示可滚动的项目集合。
`Checkbox`	Checkbox 组件，用于选择控件。
`Chip`	Chip 组件，用于显示紧凑元素。
`Column`	Column 组件，用于垂直放置子元素。
`DateTimePicker`	DateTimePicker 组件，用于选择日期和时间。
`Divider`	Divider 组件，用于创建视觉分隔线。
`DockedSearchBar`	DockedSearchBar 组件，用于显示内联搜索输入框。
`DropdownMenu`	DropdownMenu 组件，用于显示下拉菜单。
`ExposedDropdownMenuBox`	ExposedDropdownMenuBox 组件，用于显示带有可自定义锚点的下拉菜单。
`FloatingActionButton`	FloatingActionButton 组件，遵循 Material Design 3。
`FlowRow`	FlowRow 组件，用于水平换行排列子元素。
`HorizontalFloatingToolbar`	HorizontalFloatingToolbar 组件，用于显示浮动操作栏。
`HorizontalPager`	HorizontalPager 组件，用于可滑动页面。
`Host`	Host 组件，用于连接 React Native 和 Jetpack Compose。
`Icon`	Icon 组件，用于显示图标。
`IconButton`	IconButton 组件，用于显示原生 Material3 图标按钮。
`LazyColumn`	LazyColumn 组件，用于显示可滚动列表。
`LazyRow`	LazyRow 组件，用于显示水平滚动列表。
`ListItem`	ListItem 组件，用于显示结构化列表项。
`ModalBottomSheet`	ModalBottomSheet 组件，用于从屏幕底部呈现内容。
`NavigationBar`	NavigationBar 组件，用于 Material 3 底部导航。
`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`	TextField 组件，用于原生 Material3 文本输入。
`ToggleButton`	ToggleButton 组件，用于显示原生 Material3 切换按钮。
`Tooltip`	Tooltip 组件，用于在长按时显示上下文信息。