企业官网建设流程全解析

React Native SegmentedControl Props 终极指南：12 个核心属性实战详解

【免费下载链接】segmented-controlReact Native SegmentedControl library项目地址: https://gitcode.com/gh_mirrors/se/segmented-control

在 React Native 开发中，分段控件（SegmentedControl）是构建 iOS 风格筛选器、选项卡和分组切换的必备组件。React Native SegmentedControl是一款同时支持 iOS、Android 与 Web 三端的开源分段控件库：它在 iOS 上直接调用原生 UISegmentedControl，在 Android 和 Web 上则用纯 JS 完美模拟 iOS 13 风格的滑动动画效果。本文将用最通俗的方式，带你逐条吃透它的 12 个核心属性，从入门到实战一次搞定。

什么是 React Native SegmentedControl？

分段控件的典型场景是"全部 / 进行中 / 已完成"这类互斥选项切换。相比自己用按钮拼装，这个库开箱即用、动画流畅，还自带无障碍支持。安装非常简单：

npm install --save @react-native-segmented-control/segmented-control

安装完成后，在你的组件里引入即可开始使用。下面我们按"数据 → 事件 → 交互 → 外观 → 字体 → 细节"六大维度，逐一拆解全部核心属性。

一、数据与状态：values 与 selectedIndex

values：定义分段标签（必填）

values是唯一必填的属性，用于按顺序声明每个分段的标签。它支持字符串、数字，甚至本地图片资源，让你可以做出带图标的图文分段控件：

<SegmentedControl values={['全部', '进行中', '已完成']} /> <SegmentedControl values={['首页', require('./assets/user.png'), '我的']} />

selectedIndex：默认选中与受控切换

selectedIndex用于指定默认选中的分段索引（从 0 开始）。更强大的是，它可以作为受控属性：把它绑定到 state，就能在任意时刻用代码切换选中项。

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

上述模式在示例文件example/App.js中有完整演示，属性类型定义可查阅js/types.js。

二、事件回调：onChange 与 onValueChange

这两个回调都发生在用户点击分段时，区别在于参数形式：

• onChange：返回完整的原生事件对象，可通过event.nativeEvent.selectedSegmentIndex拿到索引；
• onValueChange：直接返回被选中分段的值（字符串），写法更轻量。

<SegmentedControl values={['A', 'B']} onValueChange={(value) => console.log('选中了：', value)} />

日常开发推荐onValueChange获取值、onChange获取索引，两者可同时使用，互不冲突。

三、交互控制：enabled 与 momentary

enabled：一键禁用整个控件

设置enabled={false}后，控件整体变为半透明（opacity 0.4）且不可点击，非常适合表单提交中或权限不足的场景。它默认值为true。

momentary：按钮式瞬时反馈

momentary={true}时，点击分段不会让选中状态持久停留，视觉上就像按了一下按钮，但回调依然正常触发。适用于"播放 / 暂停"这类不希望留下选中态的场景（仅 iOS 原生支持）。

四、外观定制：tintColor、backgroundColor 与 appearance

tintColor：强调色与滑块颜色

tintColor是控件的强调色，在 Android / Web 上它会作为选中滑块的填充色，让你轻松打造品牌色系的分段控件。

backgroundColor：整体背景色

backgroundColor直接设置控件底色，与tintColor配合可实现"蓝底红滑块"等高对比风格。

appearance：强制浅色或深色外观

appearance接受'light'或'dark'，可以无视系统主题强制切换控件的明暗外观（iOS 13+、Android、Web 均支持）。这是打造"应用内主题切换"功能的关键属性。

<SegmentedControl values={['白天', '黑夜']} appearance="dark" />

五、文字样式：fontStyle 与 activeFontStyle

这两个属性都接收一个字体对象，包含color、fontSize、fontFamily、fontWeight四个字段：

• fontStyle：所有分段的统一样式；
• activeFontStyle：仅作用于选中分段，会覆盖fontStyle的对应字段。

<SegmentedControl values={['One', 'Two']} fontStyle={{ fontSize: 16, color: '#333' }} activeFontStyle={{ color: '#fff', fontWeight: '700' }} />

实现细节见js/SegmentedControlTab.js中的activeStyle与idleStyle逻辑。

六、细节打磨：tabStyle 与 sliderStyle

最后这两个属性用于精细调整手感（Android / Web 平台）：

• tabStyle：作用于每个可点击分段的外层样式，可用于调整圆角、间距；
• sliderStyle：作用于滑动的 Animated.View 动画滑块，可微调阴影、边框等细节。

此外，还有testIDS（为每个分段指定测试 ID 数组）和无障碍提示文本accessibilityHintSeperator等贴心属性，完整定义都在js/types.js与index.d.ts的类型声明中。

实战：一次组合全部核心属性

把上面学到的串起来，做一个完整的"订单状态筛选器"：

<SegmentedControl values={['全部', '待付款', '已发货', '已完成']} selectedIndex={selectedIndex} onChange={(e) => setSelectedIndex(e.nativeEvent.selectedSegmentIndex)} onValueChange={(v) => fetchOrders(v)} tintColor="#ff6b00" fontStyle={{ fontSize: 14 }} activeFontStyle={{ fontWeight: '700' }} appearance="light" />

一个带默认选中、品牌配色、回调驱动的完整筛选器就完成了，代码量不到 10 行，是不是很高效？

常见问题与技巧

1. 想增高分段控件？直接传style={{ height: 80 }}即可，同时记得给fontStyle.fontSize留足空间，避免文字被裁切（Android 上 padding 过大也会挤压文字，需要同步调高容器高度）。

2. 图片分段显示太小？图片模式固定以 17×17 居中展示，若需自定义建议改用tabStyle调整容器尺寸。

3. Expo Go 里用不了？该库在 iOS 上依赖原生代码，Expo Go 中无法运行，需使用自定义开发客户端或裸工作流。

总结

React Native SegmentedControl 用 12 个核心属性覆盖了分段控件从数据、事件、交互到外观的全部需求：values与selectedIndex管数据，onChange/onValueChange管回调，enabled/momentary管交互，tintColor/backgroundColor/appearance管外观，fontStyle/activeFontStyle管文字，tabStyle/sliderStyle管细节。无论你是做筛选器、选项卡还是状态切换器，掌握这套属性组合，都能在三端（iOS / Android / Web）轻松实现原生级体验。现在就打开项目里的example/App.js跑起来试试吧！

【免费下载链接】segmented-controlReact Native SegmentedControl library项目地址: https://gitcode.com/gh_mirrors/se/segmented-control