选择器

一个用于从列表中选择选项的 SwiftUI Picker 组件。

iOS

tvOS

GitHub

npm

更新日志

Bundled version:

~55.0.0-beta.0

Expo UI Picker 与官方 SwiftUI Picker API 保持一致，并通过 pickerStyle 修饰符支持所有 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.

分段选择器

SegmentedPickerExample.tsx

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function SegmentedPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  return (
    <Host matchContents>
      <Picker
        modifiers={[pickerStyle('segmented')]}
        label="选择一种水果"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

菜单选择器

MenuPickerExample.tsx

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function MenuPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  return (
    <Host matchContents>
      <Picker
        modifiers={[pickerStyle('menu')]}
        label="选择一种水果"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

滚轮选择器

警告滚轮变体在 Apple TV 上不可用。

WheelPickerExample.tsx

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function WheelPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  return (
    <Host matchContents>
      <Picker
        modifiers={[pickerStyle('wheel')]}
        label="选择一种水果"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

API

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

Component

`Picker`

iOS

tvOS

Type: React.Element<PickerProps<T>>

Displays a native picker component

Example

<Picker modifiers={[pickerStyle('segmented')]}>
  <Text modifiers={[tag('option1')]}>Option 1</Text>
  <Text modifiers={[tag(0)]}>Option 3</Text>
</Picker>

PickerProps

`children`

iOS

tvOS

Optional • Type: React.ReactNode

The content of the picker. You can use Text components with tag modifiers to display the options.

`label`

iOS

tvOS

Optional • Literal type: union

A label displayed on the picker.

Acceptable values are: string | React.ReactNode

`onSelectionChange`

iOS

tvOS

Optional • Type: (selection: T) => void

Callback function that is called when an option is selected. Gets called with the selected tag value.

`selection`

iOS

tvOS

Optional • Type: T

The selected option's tag modifier value.

`systemImage`

iOS

tvOS

Optional • Type: SFSymbol

The name of the system image (SF Symbol). For example: 'photo', 'heart.fill', 'star.circle'

Inherited Props

CommonViewModifierProps