挑选器

具有菜单和滚轮外观的单选输入。

Android

iOS

Web

Included in Expo Go

Recommended version:

~57.0.3

Picker 是单选输入。你可以使用 <Picker.Item label value /> 子元素来声明选项，以便父 Picker 读取它们并呈现适合平台的下拉菜单或旋转器。

通用的 Picker 独立于 @expo/ui/community/picker，后者仍然是 @react-native-picker/picker 的兼容层。除非你特别需要 RN-Picker API 接口，否则在新代码中优先使用这个通用的 Picker。

🌐 The universal Picker is independent of @expo/ui/community/picker, which remains a compat shim for @react-native-picker/picker. Prefer this universal Picker for new code unless you specifically need the RN-Picker API surface.

安装

🌐 Installation

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.

用法

🌐 Usage

菜单外观（默认）

🌐 Menu appearance (default)

PickerMenuExample.tsx

import { useState } from 'react';
import { Host, Row, Picker, Spacer, Text } from '@expo/ui';

const FLAVOURS = [
  { label: 'Vanilla', value: 'vanilla' },
  { label: 'Chocolate', value: 'chocolate' },
  { label: 'Strawberry', value: 'strawberry' },
];

export default function PickerMenuExample() {
  const [value, setValue] = useState('vanilla');

  return (
    <Host style={{ flex: 1 }}>
      <Row alignment="center" spacing={12} style={{ padding: 16 }}>
        <Text>Flavour:</Text>
        <Spacer flexible />
        <Picker selectedValue={value} onValueChange={setValue}>
          {FLAVOURS.map(f => (
            <Picker.Item key={f.value} label={f.label} value={f.value} />
          ))}
        </Picker>
      </Row>
    </Host>
  );
}

轮毂外观

🌐 Wheel appearance

appearance="wheel" 在 iOS 上呈现一个可滚动的内联旋转选择器。在 Android 和网页上，则会回退到平台的默认下拉菜单（Material 3 并未提供轮式选择器）。

PickerWheelExample.tsx

import { useState } from 'react';
import { Host, Column, Picker } from '@expo/ui';

const FLAVOURS = [
  { label: 'Vanilla', value: 'vanilla' },
  { label: 'Chocolate', value: 'chocolate' },
  { label: 'Strawberry', value: 'strawberry' },
];

export default function PickerWheelExample() {
  const [value, setValue] = useState('chocolate');

  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={8} style={{ padding: 16 }}>
        <Picker selectedValue={value} onValueChange={setValue} appearance="wheel">
          {FLAVOURS.map(f => (
            <Picker.Item key={f.value} label={f.label} value={f.value} />
          ))}
        </Picker>
      </Column>
    </Host>
  );
}

应用接口

🌐 API

import { Picker } from '@expo/ui';

Component

`Picker`

Type: React.Element<PickerProps<T>>

A single-selection input. Declare options via <Picker.Item label value /> children.

Props for the Picker component, a single-selection input.

PickerProps

`appearance`

Optional • Type: PickerAppearance • Default: 'menu'

Visual appearance of the picker. See PickerAppearance.

`children`

Optional • Type: ReactNode

<Picker.Item> children that declare the available options.

`enabled`

Optional • Type: boolean • Default: true

Whether the picker accepts input.

`onValueChange`

Type: (value: T) => void

Called when the user selects an option.

`selectedValue`

Type: T

The currently selected value. Must match the value of one of the <Picker.Item> children.

`testID`

Optional • Type: string

Identifier used to locate the component in end-to-end tests.

Interfaces

`ExtractedPickerItem`

Internal: extracted item data from <Picker.Item> children.

Property	Type	Description
label	`string`	-
value	`T`	-

Types

`PickerAppearance`

Literal Type: string

Visual appearance of the picker.

'menu' — Compact button that opens a popup/dropdown on tap. Cross-platform default.
'wheel' — Scrollable rotor UI that's always visible inline. iOS only; on Android and web this falls back to the platform's default dropdown.

Acceptable values are: 'wheel' | 'menu'

`PickerItemValue`

Literal Type: union

The type of values a Picker.Item can carry.

Acceptable values are: string | number