Expo UI

一组组件，可让你直接使用 Jetpack Compose 和 SwiftUI 从 React 构建 UI。

Android

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

@expo/ui 是一组原生输入组件，可让你使用 Jetpack Compose 和 SwiftUI 构建完全原生的界面。它旨在提供典型应用所需的常用功能和组件。

可用平台

组件可用于以下平台：

Jetpack Compose：使用 Jetpack Compose 组件构建原生 Android 界面
SwiftUI：使用 SwiftUI 组件构建原生 iOS 界面
Universal：可在 Android、iOS 和 Web 上运行的跨平台组件，单一源码即可实现。

即插即用替代方案

参见即插即用替代方案，了解与 API 兼容的替代方案，这些方案可替代常见的 React Native 社区库。

可用组件

可直接替换的组件

组件	描述
`BottomSheet`	一个与 @gorhom/bottom-sheet 兼容的底部弹出面板。
`DateTimePicker`	一个与 @react-native-community/datetimepicker 兼容的日期和时间选择器。
`MaskedView`	一个与 @react-native-masked-view/masked-view 兼容的蒙版视图。
`Menu`	一个与 @react-native-menu/menu 兼容的菜单。
`PagerView`	一个与 react-native-pager-view 兼容的横向分页视图。
`Picker`	一个与 @react-native-picker/picker 兼容的选择器。
`SegmentedControl`	一个与 @react-native-segmented-control/segmented-control 兼容的分段控制器。
`Slider`	一个与 @react-native-community/slider 兼容的滑块。

通用

组件	描述
`BottomSheet`	一种从屏幕底部滑出的模态底部抽屉。
`Button`	一个可点击按钮，提供多种视觉变体。
`Checkbox`	一个表示已选中或未选中状态的切换控件。
`Collapsible`	一个带标签的可点击标题，用于切换其内容的可见性。
`Column`	一个用于 universal @expo/ui 组件的垂直布局容器。
`FieldGroup`	一个可滚动的分组设置样式行容器。
`Host`	一个跨平台 Host 组件，用于包装 universal @expo/ui 内容。
`Icon`	一个平台原生图标——iOS 上为 SF Symbol，Android 上为 Material Symbol。
`List`	一个虚拟化的垂直行容器，与可点击的 ListItem 原语配对使用。
`Picker`	一个支持菜单和滚轮外观的单选输入控件。
`RNHostView`	一个用于在 @expo/ui 视图中承载 React Native 视图的跨平台组件。
`Row`	一个用于 universal @expo/ui 组件的水平布局容器。
`ScrollView`	一个支持垂直或水平滚动的可滚动容器。
`Slider`	一个用于从连续或分段范围中选择值的控件。
`Spacer`	一个布局间隔组件，用于在相邻元素之间产生空白。
`Switch`	一个在开启和关闭状态之间切换的控制。
`Text`	一个用于显示带样式文本内容的组件。
`TextInput`	一个由原生 SwiftUI 和 Jetpack Compose 组件支持的文本输入控件，提供与 React Native 兼容的 API。

Jetpack Compose

Component	Description
`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`	用于单选或多选的 Segmented Button 组件。
`Shape`	用于绘制几何形状的 Shape 组件。
`Slider`	用于从范围内选择值的 Slider 组件。
`Snackbar`	出现在屏幕底部的简短通知，用于提供反馈而不会打断用户。
`Spacer`	用于在元素之间添加可调整空间的 Spacer 组件。
`Surface`	用于样式化内容容器的 Surface 组件。
`Switch`	用于切换控件的 Switch 组件。
`Text`	用于显示样式化文本的 Text 组件。
`TextField`	用于原生 Material3 文本输入的 TextField 组件。
`ToggleButton`	用于显示原生 Material3 切换按钮的 ToggleButton 组件。
`Tooltip`	用于在长按时显示上下文信息的 Tooltip 组件。

SwiftUI

Component	Description
`AccessoryWidgetBackground`	根据小组件环境提供标准外观的自适应背景视图。
`Alert`	用于呈现原生 iOS 警告对话框的警告组件。
`BottomSheet`	从屏幕底部呈现内容的 BottomSheet 组件。
`Button`	用于显示原生按钮的按钮组件。
`ColorPicker`	用于选择颜色的 ColorPicker 组件。
`ConfirmationDialog`	用于呈现确认提示的 ConfirmationDialog 组件。
`ContextMenu`	用于显示上下文菜单的 ContextMenu 组件。
`ControlGroup`	用于对交互式控件进行分组的 ControlGroup 组件。
`DatePicker`	用于选择日期和时间的 DatePicker 组件。
`DisclosureGroup`	用于显示可展开内容的 DisclosureGroup 组件。
`Divider`	用于创建视觉分隔线的 Divider 组件。
`Form`	用于以结构化布局收集用户输入的 Form 组件。
`Gauge`	用于通过视觉指示器显示进度的 Gauge 组件。
`Group`	用于对视图进行分组且不影响布局的 Group 组件。
`Host`	用于在 React Native 中启用 SwiftUI 组件的 Host 组件。
`HStack`	用于水平布局的 HStack 组件。
`Image`	用于显示 SF Symbols 的 Image 组件。
`Label`	用于显示带图标文本的 Label 组件。
`LazyHStack`	用于延迟加载水平布局的 LazyHStack 组件。
`LazyVStack`	用于延迟加载垂直布局的 LazyVStack 组件。
`Link`	用于显示可点击链接的 Link 组件。
`List`	用于显示可滚动项目列表的 List 组件。
`Menu`	用于显示下拉菜单的 Menu 组件。
`Namespace`	允许你在 SwiftUI 中创建 Namespace 的组件。
`Overlay`	用于将内容叠加在另一个视图之上的 Overlay 组件。
`Picker`	用于从列表中选择选项的 Picker 组件。
`Popover`	用于在浮动叠加层中显示内容的 Popover 组件。
`ProgressView`	用于显示进度指示器的 ProgressView 组件。
`RNHostView`	用于在 SwiftUI 中启用 React Native 视图的组件。
`ScrollView`	用于显示可滚动内容的 ScrollView 组件。
`Section`	用于在列表和表单中对内容进行分组的 Section 组件。
`SecureField`	用于输入密码的 SecureField 组件。
`Slider`	用于从取值范围中选择值的 Slider 组件。
`Spacer`	用于提供灵活间距的 Spacer 组件。
`SwipeActions`	用于为行内容添加前导和尾随滑动操作的 SwipeActions 组件。
`TabView`	用于显示分页或选项卡式内容的 TabView 组件。
`Text`	用于显示样式化文本并支持嵌套文本的 Text 组件。
`TextField`	用于文本输入的 TextField 组件。
`Toggle`	用于显示原生切换开关的 Toggle 组件。
`VStack`	用于垂直布局的 VStack 组件。
`ZStack`	用于重叠布局的 ZStack 组件。