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点击不保持选中态瞬时按钮iOStintColor强调色/选中滑块颜色全平台backgroundColor控件背景色iOS 13全平台appearance强制浅色或深色外观iOS 13、Android、WebfontStyle/activeFontStyle普通/选中文字样式iOS 13、Android、WebtabStyle/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 appearancedark /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），仅供参考