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

一个与 @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={['一', '二', '三']}
      selectedIndex={selectedIndex}
      onChange={event => {
        setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
      }}
    />
  );
}

API

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

Component

Types