react-native-scrolltab 是一款 React Native 的滚动选项卡组件，可用于快速创建具有选项卡滚动效果的页面。本文将介绍其使用方法及其他相关内容。
安装
在项目根目录下运行 npm install react-native-scrolltab 进行安装。
使用说明
引用组件 import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrolltab';。
在 render() 函数中使用 ScrollableTabView 组件，设置其属性和子组件。
例如：
-- -------------------- ---- -------
------ ------------------ ------------------ ---- -------------------------
----- ----------- ------- --------- -
-------- -
-------
------------------
---------------- -- ----------------- ---
-
----- --------------- ------------------------ ------------
-----------------
-------
----- --------------- ------------------------ ------------
-----------------
-------
----- --------------- ------------------------ ------------
-----------------
-------
--------------------
--
-
-renderTabBar 属性用于渲染选项卡栏，这里使用了 ScrollableTabBar。在子组件中，可以使用 tabLabel 属性设置选项卡的名称。
属性
ScrollableTabView
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {flex: 1, backgroundColor: '#fff'} | 根容器样式 |
| tabBarPosition | string | 'top' | 选项卡栏位置 |
| renderTabBar | function | ()=>null | 渲染选项卡栏的回调函数 |
| tabBarUnderlineStyle | object | {backgroundColor: '#ff4081'} | 选项卡栏下划线的样式 |
| tabBarBackgroundColor | string | '#fff' | 选项卡栏背景色 |
| initialPage | number | 0 | 初始显示的页面 |
ScrollableTabBar
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| activeTextColor | string | '#f44336' | 当前选项卡文字颜色 |
| inactiveTextColor | string | '#9e9e9e' | 非当前选项卡文字颜色 |
| underlineStyle | object | {backgroundColor: '#f44336'} | 选项卡栏下划线样式 |
| style | object | {height: 48, borderWidth: 0.5, borderColor: '#f2f2f2'} | 选项卡栏容器样式 |
示例代码
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ---- ---------------
------ ------------------ ------------------ ---- -------------------------
----- ----------- ------- --------- -
-------- -
-------
------------------
------------- -- ---------------- --------
--------------------
---------------- -- ----------------- ---
--------------------------------------- -----------
----------------------------
---------------
-
----- --------------- ------------------------ ------------
-----------------
-------
----- --------------- ------------------------ ------------
-----------------
-------
----- --------------- ------------------------ ------------
-----------------
-------
--------------------
--
-
-总结
react-native-scrolltab 是一款实用的 React Native 组件，可以快速创建具有选项卡滚动效果的页面。使用时需要注意属性的设置，以及选项卡栏的样式。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f381e8991b448d50bb