Expo UI

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

Android

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~56.0.16

@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`	用于通用 @expo/ui 组件的垂直布局容器。
`FieldGroup`	可滚动的分组设置样式行容器。
`Host`	跨平台 Host 组件，用于包装通用 @expo/ui 内容。
`Icon`	平台原生图标——iOS 上为 SF Symbol，Android 上为 Material Symbol。
`List`	与可点击的 ListItem 基元配对的虚拟化垂直行容器。
`Picker`	具有菜单和滚轮外观的单选输入。
`RNHostView`	用于在 @expo/ui 视图中承载 React Native 视图的跨平台组件。
`Row`	用于通用 @expo/ui 组件的水平布局容器。
`ScrollView`	支持垂直或水平滚动的可滚动容器。
`Slider`	用于从连续或分段范围中选择值的控件。
`Spacer`	用于在相邻元素之间产生空白的布局间隔器。
`Switch`	在开启和关闭状态之间切换的切换控件。
`Text`	用于显示带样式文本内容的组件。
`TextInput`	由原生 SwiftUI 和 Jetpack Compose 组件提供支持的文本输入，具有与 React Native 兼容的 API。

Jetpack Compose

组件	描述
`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 组件。
`ModalBottomSheet`	从屏幕底部呈现内容的 ModalBottomSheet 组件。
`NavigationBar`	用于 Material 3 底部导航的 NavigationBar 组件。
`Progress Indicators`	用于显示操作状态的进度指示器组件。
`PullToRefreshBox`	用于下拉刷新交互的 PullToRefreshBox 组件。
`RadioButton`	用于单选控件的 RadioButton 组件。
`RNHostView`	用于在 Jetpack Compose 中嵌入 React Native 视图的组件。
`Row`	用于水平放置子元素的 Row 组件。
`SearchBar`	用于实现搜索输入功能的 SearchBar 组件。
`SegmentedButton`	用于单选或多选的分段按钮组件。
`Shape`	用于绘制几何形状的 Shape 组件。
`Slider`	用于从一定范围内选择值的 Slider 组件。
`Snackbar`	一种简短的通知，显示在屏幕底部，用于提供反馈且不会打断用户。
`Spacer`	用于在元素之间添加灵活间距的间隔器组件。
`Surface`	用于有样式内容容器的 Surface 组件。
`Switch`	用于切换控件的 Switch 组件。
`Text`	用于显示带样式文本的 Text 组件。
`TextField`	原生 Material3 文本输入的 TextField 组件。
`ToggleButton`	用于显示原生 Material3 切换按钮的 ToggleButton 组件。
`Tooltip`	用于在长按时显示上下文信息的 Tooltip 组件。

SwiftUI

组件	描述
`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 组件。