挑选器
与 @react-native-picker/picker 兼容的选择器。
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
一个 Picker 组件，具有与 @react-native-picker/picker 兼容的 API。它在 iOS 上使用 SwiftUI 轮 Picker，在 Android 上使用 Material 3 ExposedDropdownMenuBox，在网页上使用原生 <select> 元素。
🌐 A Picker component with an API compatible with @react-native-picker/picker. It uses a SwiftUI wheel Picker on iOS, a Material 3 ExposedDropdownMenuBox on Android, and a native <select> element on web.
在内部，这个组件封装了平台特定的 @expo/ui 原语：
🌐 Under the hood this component wraps the platform-specific @expo/ui primitives:
- Android: Jetpack Compose 暴露下拉菜单框
- iOS：使用
pickerStyle('wheel')的 SwiftUI Picker
如果你需要更底层的控制，请直接使用那些原语。
🌐 If you need lower-level control, use those primitives directly.
安装
🌐 Installation
- 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 迁移
🌐 Migrating from @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值的别名被支持。 enabled在Picker.Item上仅适用于安卓。ref、focus()和blur()方法仅在 Android 上有效（打开/关闭下拉菜单）。在 iOS 上，滚轮选择器始终可见。
基本用法
🌐 Basic usage
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> ); }
每项样式和状态
🌐 Per-item styling and state
将 style 传递给 Picker.Item 以控制每个项目的 color、backgroundColor、fontFamily 和 fontSize，以及使用 enabled={false} 在 Android 上禁用特定项目。
🌐 Pass a style to Picker.Item to control color, backgroundColor, fontFamily, and fontSize per item, and enabled={false} to disable specific items on 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> ); }
命令式聚焦和模糊（Android）
🌐 Imperative focus and blur (Android)
在 Android 上使用 ref 以编程方式打开和关闭下拉菜单。在 iOS 上，这些方法无效，因为滚轮选择器始终可见。
🌐 Use a ref to programmatically open and close the dropdown on Android. On iOS, these methods are no-ops because the wheel picker is always visible.
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="2秒后打开并关闭" 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.