在 React Native 开发中，选择控件是必不可少的一部分。而其中，分段选择器在一些情况下是比较实用的，它可以帮助我们将一些较长的列表项分成几个小块。npm 包 react-native-segmented-control-android 是目前 React Native 中比较好用的一款分段选择器，本文就来详细介绍一下它的使用方法。
安装
首先，我们需要将 react-native-segmented-control-android 安装到项目中。在项目文件夹中，运行：
npm install react-native-segmented-control-android --save
使用
导入组件
在需要使用分段选择器的组件中，我们需要先导入 react-native-segmented-control-android。
import SegmentedControlAndroid from 'react-native-segmented-control-android';
设置属性
react-native-segmented-control-android 带有一些默认的属性，像是标签的颜色、选择时的颜色等，但我们可以通过传入不同的自定义属性来改变它们的默认样式。下面是一些可用的属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| values | PropTypes.array | [] | 指定每个选项对应的数组 |
| selectedIndex | PropTypes.number | 0 | 指定默认选中的选项 |
| backgroundColor | PropTypes.string | '#F5F5F5' | 指定背景颜色 |
| tintColor | PropTypes.string | 'white' | 指定未选中选项的颜色 |
| selectedTintColor | PropTypes.string | '#FF4081' | 指定已选中选项的颜色 |
| fontStyle | PropTypes.object | {fontSize: 14} | 自定义字体样式 |
| onChange | PropTypes.func | undefined | 选项变化时的回调函数，给出被选择选项的索引并以数字表示。 |
示例代码
下面是一个简单的示例代码，展示了如何使用 react-native-segmented-control-android 实现一个分段选择器。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---------- - ---- ---------------
------ ----------------------- ---- -----------------------------------------
----- --------------------- ------- --------- -
------------------ -
-------------
---------- - -
-------------- -
--
-
-------- -
------ -
----- -------------------------
------------------------
---------------- --- ------- --- ------- ----
----------------------------------------
---------- ------- -- -
----------------------------- -----------------------------------------
--
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- ----------
--
---
------ ------- ----------------------在这个例子中，我们创建了一个 SegmentControlExample 组件，它包含了一个分段选择器。选择器共有三个选项，分别是'Option 1', 'Option 2'和'Option 3'，默认选项是第一个。当用户在选项之间滑动时，onChange 事件会被触发，它会设置 selectedIndex 的值为被选中选项的 index。
结语
react-native-segmented-control-android 是一个轻量、稳定和易于学习和使用的 npm 包。通过它，我们可以轻松创建和定制化分段选择器，使我们的 React Native 应用更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c981e8991b448e8f6e