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

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

一个与 @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