挑选器

一个用于从列表中选择选项的 Jetpack Compose 选择器组件。

Android

Bundled version:

~55.0.2

Expo UI Picker 与官方 Jetpack Compose 的分段按钮和单选按钮 API 相匹配，并支持分段和单选选择器的变体。

🌐 Expo UI Picker matches the official Jetpack Compose Segmented Button and Radio Button APIs and supports segmented and radio picker variants.

安装

🌐 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

分段选择器

🌐 Segmented picker

使用 variant="segmented" 属性显示分段按钮组。

🌐 Use the variant="segmented" prop to display a segmented button group.

SegmentedPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function SegmentedPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Host matchContents>
      <Picker
        options={['$', '$$', '$$$', '$$$$']}
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => {
          setSelectedIndex(index);
        }}
        variant="segmented"
      />
    </Host>
  );
}

单选按钮

🌐 Radio picker

使用 variant="radio" 属性显示一组单选按钮。

🌐 Use the variant="radio" prop to display a list of radio buttons.

RadioPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function RadioPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Host matchContents>
      <Picker
        options={['Small', 'Medium', 'Large']}
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => {
          setSelectedIndex(index);
        }}
        variant="radio"
      />
    </Host>
  );
}

自定义颜色选择器

🌐 Picker with custom color

使用 color 属性来自定义选择器的强调颜色。

🌐 Use the color prop to customize the picker's accent color.

CustomColorPickerExample.tsx

import { useState } from 'react';
import { Host, Picker } from '@expo/ui/jetpack-compose';

export default function CustomColorPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Host matchContents>
      <Picker
        options={['Option A', 'Option B', 'Option C']}
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => {
          setSelectedIndex(index);
        }}
        variant="segmented"
        color="#6200EE"
      />
    </Host>
  );
}

应用接口

🌐 API

import { Picker } from '@expo/ui/jetpack-compose';

Component

`Picker`

Android

Type: React.Element<PickerProps>

Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.

PickerProps

`buttonModifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the individual buttons

`color`

Android

Optional • Type: ColorValue

Picker color.

`elementColors`

Android

Optional • Type: PickerElementColors

Colors for picker's core elements.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onOptionSelected`

Android

Optional • Type:

(event: {
  nativeEvent: {
  index: number, 
  label: string
}
}) => void

Callback function that is called when an option is selected.

`options`

Android

Type: string[]

An array of options to be displayed in the picker.

`selectedIndex`

Android

Literal type: union

The index of the currently selected option.

Acceptable values are: number | null

`variant`

Android

Optional • Literal type: string • Default: 'segmented'

The variant of the picker, which determines its appearance and behavior.

Acceptable values are: 'segmented' | 'radio'

Types

`PickerElementColors`

Android

Colors for picker's core elements.

Property	Type	Description
activeBorderColor(optional)	`ColorValue`	-
activeContainerColor(optional)	`ColorValue`	-
activeContentColor(optional)	`ColorValue`	-
disabledActiveBorderColor(optional)	`ColorValue`	-
disabledActiveContainerColor(optional)	`ColorValue`	-
disabledActiveContentColor(optional)	`ColorValue`	-
disabledInactiveBorderColor(optional)	`ColorValue`	-
disabledInactiveContainerColor(optional)	`ColorValue`	-
disabledInactiveContentColor(optional)	`ColorValue`	-
inactiveBorderColor(optional)	`ColorValue`	-
inactiveContainerColor(optional)	`ColorValue`	-
inactiveContentColor(optional)	`ColorValue`	-