SegmentedControl

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

一个 SegmentedControl 组件，其 API 与 @react-native-segmented-control/segmented-control 兼容。它在 Android 上使用 Jetpack Compose SingleChoiceSegmentedButtonRow，在 iOS 上使用带分段样式的 SwiftUI Picker。

🌐 A SegmentedControl component with an API compatible with @react-native-segmented-control/segmented-control. It uses Jetpack Compose SingleChoiceSegmentedButtonRow on Android and SwiftUI Picker with segmented style on iOS.

在内部，这个组件封装了平台特定的 @expo/ui 原语：

🌐 Under the hood this component wraps the platform-specific @expo/ui primitives:

• Android: Jetpack Compose 分段按钮
• iOS：使用 pickerStyle('segmented') 的 SwiftUI Picker

如果你需要更底层的控制（自定义修改器、样式或布局），请直接使用这些基本元素。

🌐 If you need lower-level control (custom modifiers, styles, or layouts), use those primitives directly.

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

从 @react-native-segmented-control/segmented-control 迁移

🌐 Migrating from @react-native-segmented-control/segmented-control

• 将导入从 import SegmentedControl from '@react-native-segmented-control/segmented-control' 更新为 import SegmentedControl from '@expo/ui/community/segmented-control'。
• values 数组中的图片值不受支持，仅支持字符串。
• momentary、backgroundColor、fontStyle 和 activeFontStyle 属性不受支持。
• tintColor 仅在 Android 上有效（设置活动分段容器的颜色）。在 iOS 上，它没有效果。

基本用法

🌐 Basic usage

import { useState } from 'react';
import SegmentedControl from '@expo/ui/community/segmented-control';

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

  return (
    <SegmentedControl
      values={['One', 'Two', 'Three']}
      selectedIndex={selectedIndex}
      onChange={event => {
        setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
      }}
    />
  );
}

应用接口

🌐 API

import SegmentedControl from '@expo/ui/community/segmented-control';

Component

Types