React Native SegmentedControl 基础教程：10 分钟创建你的第一个分段选择器
【免费下载链接】segmented-controlReact Native SegmentedControl library项目地址: https://gitcode.com/gh_mirrors/se/segmented-control
你是否在开发 React Native 应用时，希望给用户提供像 iOS 系统设置那样丝滑的切换体验？React Native SegmentedControl正是解决这一需求的开源组件库。它能在 iOS 上调用原生 UISegmentedControl，在 Android 和 Web 上自动切换为模拟 iOS 13 风格的 JS 实现，一套代码三端一致。本教程将用 10 分钟带你完成第一个分段选择器的创建，从安装到样式定制一次讲透。
什么是分段选择器（SegmentedControl）？
分段选择器是一组并排的按钮，用户点击其中一个即可切换视图或筛选条件，常见于「全部 / 进行中 / 已完成」「日 / 周 / 月」这类场景。相比 Tab 导航，它更轻量、直观，是提升移动端交互效率的利器。这个库正是从 React Native 核心中拆分出的官方维护组件，让你以最少的代码获得原生级体验。
快速上手：一键安装步骤
使用你习惯的包管理器安装，三选一即可：
npm install --save @react-native-segmented-control/segmented-controlyarn add @react-native-segmented-control/segmented-controlpnpm install --save @react-native-segmented-control/segmented-control安装完成后，Android 和 Web 端无需任何链接操作，因为它们的实现是纯 JS 的，开箱即用。
iOS 配置：唯一需要留意的一步
iOS 端使用原生组件，React Native 0.60+ 的自动链接（Autolinking）会在构建时自动完成，你只需在 ios 目录下执行一次：
cd ios && npx pod-install如果你是从旧版本迁移，记得先react-native unlink旧模块，再把 import 从react-native核心包改为：
import SegmentedControl from '@react-native-segmented-control/segmented-control';创建你的第一个分段选择器
导入组件后，只需一行核心代码即可渲染：
import SegmentedControl from '@react-native-segmented-control/segmented-control'; function MyScreen() { return <SegmentedControl values={['全部', '进行中', '已完成']} />; }values数组中的每项就是一个分段。运行时用户点击即切换，是不是很简单？🎯
监听选中状态：onChange 与 onValueChange
实际项目中，你需要拿到当前选中的分段。组件提供了两个回调：
onChange：返回原生事件对象，可通过event.nativeEvent.selectedSegmentIndex获取索引；onValueChange：直接返回分段的值字符串，使用更方便。
const [index, setIndex] = useState(0); const [value, setValue] = useState('全部'); <SegmentedControl values={['全部', '进行中', '已完成']} selectedIndex={index} onChange={(e) => setIndex(e.nativeEvent.selectedSegmentIndex)} onValueChange={(v) => setValue(v)} />注意：selectedIndex必须绑定状态变量，并在onChange中同步更新，才能保证组件与 UI 状态一致。
最常用的属性速查表
| 属性 | 作用 | 适用平台 |
|---|---|---|
values | 分段标签数组，支持字符串、数字或图片 | 全平台 |
selectedIndex | 默认选中的分段索引 | 全平台 |
onValueChange | 选中变化回调，返回值 | 全平台 |
onChange | 选中变化回调，返回事件对象 | 全平台 |
enabled | 是否可交互，默认 true | 全平台 |
momentary | 点击不保持选中态（瞬时按钮） | iOS |
tintColor | 强调色/选中滑块颜色 | 全平台 |
backgroundColor | 控件背景色（iOS 13+） | 全平台 |
appearance | 强制浅色或深色外观 | iOS 13+、Android、Web |
fontStyle/activeFontStyle | 普通/选中文字样式 | iOS 13+、Android、Web |
tabStyle/sliderStyle | 分段点击区 / 滑块样式 | Android、Web |
进阶技巧：定制出漂亮的分段选择器
1. 调整高度与文字
默认高度为 32。想做得更高更醒目，直接传入style和字体属性：
<SegmentedControl values={['日', '周', '月']} style={{height: 48}} fontStyle={{fontSize: 16, fontWeight: '600'}} activeFontStyle={{color: '#ffffff'}} />2. 主题配色与暗色模式
用tintColor一键换肤；配合appearance可无视系统主题强制深/浅色：
<SegmentedControl values={['One', 'Two', 'Three']} tintColor="#4f8ef7" appearance="dark" />3. 图片分段与禁用状态
values支持require('./assets/images/user.png')这样的图片资源，适合头像、图标切换场景；设置enabled={false}即可整体禁用（组件会以半透明呈现）。
常见问题排查
Android 上添加 padding 后文字消失？因为容器高度固定，padding 过大会压缩文字。解决方法是同步调大height或减小 padding。
Web 端分段高度不对？Web 端除height外，还需配合paddingVertical一起设置。
Expo Go 中不生效？iOS 端需要原生代码，Expo Go 不支持，请改用自定义开发客户端（development build）或裸工作流。
小结：10 分钟收获一个原生级分段选择器
回顾一下，你只用了三步：安装依赖、iOS 执行 pod-install、编写values+ 回调。而这个库还在 js/SegmentedControl.js 中用 Animated 实现了 300ms 的滑块过渡动画，在 index.d.ts 中提供了完整的 TypeScript 类型定义，让开发体验更安心。现在就去你的项目里加上第一个分段选择器吧，让界面切换从此优雅又高效！🚀
【免费下载链接】segmented-controlReact Native SegmentedControl library项目地址: https://gitcode.com/gh_mirrors/se/segmented-control
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
