选择器
与 @react-native-picker/picker 兼容的选择器。
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
一个与 @react-native-picker/picker API 兼容的 Picker 组件。它在 iOS 上使用 SwiftUI 的轮盘式 Picker，在 Android 上使用 Material 3 的 ExposedDropdownMenuBox，在 Web 上使用原生 <select> 元素。
在底层，这个组件封装了平台特定的 @expo/ui 基础组件：
- Android: Jetpack Compose ExposedDropdownMenuBox
- iOS: SwiftUI Picker 并使用
pickerStyle('wheel')
如果你需要更低层级的控制，请直接使用这些基础组件。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
从 @react-native-picker/picker 迁移
- 将导入从
import { Picker } from '@react-native-picker/picker'更新为import { Picker } from '@expo/ui/community/picker'。 - 不支持
mode、prompt、dropdownIconColor、dropdownIconRippleColor、numberOfLines、selectionColor、itemStyle和accessibilityLabel属性。 - 在
Picker.Item上，style属性只应用于color、backgroundColor、fontFamily和fontSize。顶层的color和fontFamily属性仍然受支持，它们只是对应style值的别名。 Picker.Item上的enabled仅适用于 Android。ref的focus()和blur()方法仅在 Android 上生效（打开/关闭下拉菜单）。在 iOS 上，轮盘式 picker 始终可见。
基本用法
import { useState } from 'react'; import { Text, View } from 'react-native'; import { Picker } from '@expo/ui/community/picker'; export default function PickerExample() { const [language, setLanguage] = useState('java'); return ( <View> <Picker selectedValue={language} onValueChange={value => setLanguage(value)}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> <Picker.Item label="Objective C" value="objc" /> <Picker.Item label="Swift" value="swift" /> </Picker> <Text>Selected: {language}</Text> </View> ); }
每项样式与状态
向 Picker.Item 传入 style 可按项控制 color、backgroundColor、fontFamily 和 fontSize，并可使用 enabled={false} 在 Android 上禁用特定项。
fontFamily 在 iOS 上接受 iOS 字体名称（例如 'Menlo'），在 Android 上接受 Compose 的通用字体族（'monospace'、'serif'、'sansSerif'、'cursive'）或使用 expo-font 加载的字体。
import { useState } from 'react'; import { Platform } from 'react-native'; import { Picker } from '@expo/ui/community/picker'; const monospace = Platform.select({ ios: 'Menlo', android: 'monospace' }); const serif = Platform.select({ ios: 'Georgia', android: 'serif' }); export default function StyledPickerExample() { const [language, setLanguage] = useState('java'); return ( <Picker selectedValue={language} onValueChange={value => setLanguage(value)}> <Picker.Item label="Java" value="java" style={{ color: '#e11d48', fontFamily: monospace, fontSize: 14 }} /> <Picker.Item label="JavaScript" value="js" style={{ color: '#2563eb', fontFamily: serif, fontSize: 18 }} enabled={false} /> <Picker.Item label="Objective C" value="objc" style={{ color: '#059669', fontFamily: monospace, fontSize: 16 }} /> <Picker.Item label="Swift" value="swift" style={{ color: '#d97706', fontFamily: serif, fontSize: 30 }} enabled={false} /> </Picker> ); }
命令式 focus 和 blur（Android）
使用 ref 可以在 Android 上以编程方式打开和关闭下拉菜单。在 iOS 上，这些方法不会起作用，因为轮盘式 picker 始终可见。
import { useRef, useState } from 'react'; import { Button } from 'react-native'; import { Picker, type PickerRef } from '@expo/ui/community/picker'; export default function RefPickerExample() { const [language, setLanguage] = useState('java'); const pickerRef = useRef<PickerRef>(null); return ( <> <Button title="Open and close after 2s" onPress={() => { pickerRef.current?.focus(); setTimeout(() => pickerRef.current?.blur(), 2000); }} /> <Picker ref={pickerRef} selectedValue={language} onValueChange={setLanguage}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> <Picker.Item label="Objective C" value="objc" /> <Picker.Item label="Swift" value="swift" /> </Picker> </> ); }
API
import { Picker } from '@expo/ui/community/picker';
Components
Type: React.Element<PickerProps<T>>
A drop-in replacement for @react-native-picker/picker on web.
Renders a native <select> element.
ReactNodePicker.Item children that define the available options.
(itemValue: T, itemIndex: number) => voidCallback when an item is selected. Called with (itemValue, itemIndex).
TThe currently selected value. Must match the value of one of the Picker.Item children.
Type: React.Element<ComponentType<PickerItemProps>>
stringText color for the item. Equivalent to setting color in the style prop.
stringCustom font family for the item. Equivalent to setting fontFamily in the style prop.
StyleProp<TextStyle>Style applied to the item label. Only the following values take effect:
color, backgroundColor, fontFamily, and fontSize. When also set
via the top-level color or fontFamily props, values from style win.