This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

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

在底层，这个组件封装了平台特定的 @expo/ui 基础组件：

• Android: Jetpack Compose SegmentedButton
• iOS: SwiftUI Picker，并使用 pickerStyle('segmented')

如果你需要更底层的控制（自定义修饰符、样式或布局），请直接使用这些基础组件。

安装

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 迁移

• 将导入从 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 上，它不起作用。

基本用法

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