选择器

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

Android

iOS

Web

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

Picker 是一个单选输入。你可以使用 <Picker.Item label value /> 子元素来声明选项，这样父级 Picker 就会读取它们，并渲染一个适合平台的下拉菜单或转轮。

通用的 Picker 与 @expo/ui/community/picker 相互独立，后者仍然是 @react-native-picker/picker 的兼容适配层。对于新代码，除非你确实需要 RN-Picker 的 API 表面，否则应优先使用这个通用 Picker。

安装

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.

用法

菜单外观（默认）

PickerMenuExample.tsx

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

const FLAVOURS = [
  { label: '香草', value: 'vanilla' },
  { label: '巧克力', value: 'chocolate' },
  { label: '草莓', 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>口味：</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>
  );
}

轮盘外观

appearance="wheel" 会在 iOS 上渲染一个内联可滚动的转轮。在 Android 和 web 上，这会回退到平台默认的下拉菜单（Material 3 不提供轮盘样式的 Picker）。

PickerWheelExample.tsx

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

const FLAVOURS = [
  { label: '香草', value: 'vanilla' },
  { label: '巧克力', value: 'chocolate' },
  { label: '草莓', 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