1. 介绍
react-native-underline-tabbar-no-flow 是一款 React Native 的 npm 包，该包提供一种底部标签切换栏的实现方式，该标签栏中标签显示为文字，且选中的标签会显示底部横线。
2. 安装和引用
在项目根目录下使用 npm 安装 react-native-underline-tabbar-no-flow：
npm install react-native-underline-tabbar-no-flow
在需要使用该底部标签切换栏的页面中导入该包，并使用组件进行渲染：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ --------------- ---- ----------------------------------------
------ ------- ----- ----------- ------- --------- -
-------- -
------ -
----------------
-------------- ------- ------ ---------- ------- ------- ------ ---------- ------- ------- ------ -----------
---------------- -- ------------------ ---------- -------
--
--
-
-其中 data 属性为一个数组，其中存放需要显示的标签，每个标签是一个对象，有两个属性，label 属性为标签名，route 属性为选中该标签后要跳转的页面。
在使用组件渲染时，可以通过 onPress 属性设置标签被点击时触发的事件，该属性值为一个函数，该函数的参数为被选中的标签的下标。
3. 配置
react-native-underline-tabbar-no-flow 提供了一些属性来控制底部标签切换栏的样式。
selectedTabWidth
该属性用于控制选中标签的下划线宽度，默认值为 20。
<UnderlineTabBar
selectedTabWidth={30}
...
/>tabTextStyle
该属性用于控制标签文字的样式。
<UnderlineTabBar
tabTextStyle={{color: '#555', fontSize: 18}}
...
/>tabBarStyle
该属性用于控制底部标签切换栏的样式。
<UnderlineTabBar
tabBarStyle={{backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#ddd'}}
...
/>tabBarContainerStyle
该属性用于控制底部标签切换栏的容器样式。
<UnderlineTabBar
tabBarContainerStyle={{borderTopWidth: 1, borderTopColor: '#ddd'}}
...
/>tabMargin
该属性用于控制标签间的间距，默认值为 10。
<UnderlineTabBar
tabMargin={20}
...
/>tabStyles
该属性用于控制每个标签的样式，使用该属性可以为每个标签设置不同的样式。
<UnderlineTabBar
tabStyles={{0: {color: '#333', fontSize: 20}, 1: {color: '#666', fontSize: 18}}}
...
/>4. 示例代码
下面是一个完整的底部标签切换栏的示例代码：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------------ ----- ---- ---------------
------ --------------- ---- ----------------------------------------
------ ------- ----- ----------- ------- --------- -
-------- -
------ -
----- -------------------------
----------------
-------------- ------- ------ ---------- ------- ------- ------ ---------- ------- ------- ------ -----------
---------------- -- ------------------ ---------- -------
---------------------
--------------------- ------- --------- ----
---------------------------
---------------------------------------------
--------------
-------------- ------- ------- --------- -----
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
------- -
---------------- -------
--------------- --
--------------- -------
--
---------------- -
--------------- --
--------------- -------
--
---5. 总结
react-native-underline-tabbar-no-flow 是一款很实用的底部标签切换栏组件，它提供了多种样式配置属性，可以方便地实现不同的底部标签切换栏样式。使用该组件可以提高应用的用户体验，也提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739a81e8991b448e98c0