在 React Native 开发中，segment controller 组件是一个非常常见的组件。而 react-native-segment-controller 是一个解决方案，可以快速搭建一个符合 UI 风格的 segment controller。在本文中，我们将介绍如何使用 react-native-segment-controller。
安装
在项目中安装 react-native-segment-controller:
npm install react-native-segment-controller --save
使用
在需要使用 segment controller 的文件中，引入组件：
import { SegmentController } from 'react-native-segment-controller'然后在 render 方法中，使用 SegmentController 组件：
-- -------------------- ---- -------
-------- -
------ -
-------------------
----------------------- ----------- ----
----------------------- ----------- ----
----------------------- ----------- ----
--------------------
-
-SegmentController 是整个组件的容器。在容器内的 SegmentController.Item 组件是每个选项卡的代表，其中 title 属性为必填项。
API
SegmentController 支持以下属性：
| 属性名 | 类型 | 说明 |
|---|---|---|
selectedIndex? |
number |
默认选中的索引，请注意这个属性是可选的。 |
onChange? |
(index: number) => void |
当用户切换选项卡时被调用的事件。 |
bgColor? |
string |
背景颜色。 |
selectedBgColor? |
string |
选中的背景颜色。 |
SegmentController.Item 支持以下属性：
| 属性名 | 类型 | 说明 |
|---|---|---|
title |
string |
选项卡的标题，在此组件中为必选项。 |
titleStyle |
any |
标题样式。 |
示例
下面是一个完整的使用示例：
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------------------
----- ------- ------- --------- -
----- - -
-------------- -
-
------------ - ------- -- -
--------------- -------------- ----- --
-
-------- -
------ -
------------------
----------------------------------------
----------------------------
---------------
--------------------------
-
----------------------- ----------- -- ------------- ------ ------- -- --
----------------------- ----------- -- ------------- ------ ------- -- --
----------------------- ----------- -- ------------- ------ ------- -- --
--------------------
--
-
-总结
react-native-segment-controller 是一个快速搭建符合 UI 风格的 segment controller 的解决方案，能够帮助我们节省大量时间和精力。通过本文的介绍和示例代码，相信读者们已经能够轻松上手使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005692781e8991b448e4b54