在 React Native 开发中，使用第三方插件和 npm 包是十分常见的。其中一个比较好用的 npm 包是 react-native-segmented-control-tab，它可以快速创建一个 iOS 风格的分段控制器，方便用户进行选项选择。本文将介绍如何使用 react-native-segmented-control-tab 这个 npm 包。
安装 react-native-segmented-control-tab
在项目中执行以下命令，即可安装 react-native-segmented-control-tab：
npm i react-native-segmented-control-tab --save
引入 react-native-segmented-control-tab
在需要使用分段控制器的组件中引入 react-native-segmented-control-tab：
import SegmentedControlTab from 'react-native-segmented-control-tab';
使用 react-native-segmented-control-tab
创建一个分段控制器，定义初始选中项和选项数组：
-- -------------------- ---- -------
----- - -
-------------- --
--------- --------- --- -------- --- -------- ---
-
----------------- - ------- -- -
---------------
-------------- -----
---
-
-------- -
------ -
------
--------------------
----------------------------
----------------------------------------
-----------------------------------
--
-------
--
-handleIndexChange 函数会在用户点击一个选项时被调用，selectedIndex 将会被更新为被选中的选项的索引。
进阶使用
react-native-segmented-control-tab 还支持更多的选项和样式设置，例如可以自定义选项的颜色、字体和样式。以下是一个更加复杂的示例：
-- -------------------- ---- -------
----- - -
-------------- --
--------- --------- --- -------- --- -------- --- -------- ----
------------------ --------
------------------------ ---------- ---- ---- ------
---------- --------
---------------- --------------
------------- ---
------------------- -
----------------- ---
---------- ---
--
--------- -
------------ --------
--
--------------- -
---------------- ---------
--
------------- -
----------- ------
-
-
----------------- - ------- -- -
---------------
-------------- -----
---
-
-------- -
------ -
----- ------------------------ -------- ----- ----
--------------------
----------------------------
----------------------------------------
-----------------------------------
------------------------------------------------
------------------------------------------------------------
--------------------------------
--------------------------------------------
--------------------------------------
--------------------------------------------------
------------------------------
------------------------------------------
--------------------------------------
--
-------
--
-以上代码会创建一个黑色背景的分段控制器，选项被选中时会显示红色背景和白色粗体字体，未选中的选项则显示白色边框。
如今，许多应用程序都在使用分段控制器以启用更方便的选项选择。使用 react-native-segmented-control-tab 这个优秀的 npm 包，可以在 React Native 开发中很好地实现分段控制器的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc37b5cbfe1ea0612708