前言
在前端开发中，移动端开发的需求越来越普遍，同时也为我们带来了新的技术挑战。在移动端开发中，很多时候我们需要用到 tab 栏，为了方便我们的开发，这里介绍了一个 npm 包：react-native-scrollable-tab-view-cys。
简介
React Native 是一个跨平台的移动应用框架。react-native-scrollable-tab-view-cys 是一个基于 React Native 的跨平台滑动 tab 组件，具有易用性和可定制化等特点，适用于 Android 和 IOS 系统。
安装
使用 npm 安装：
npm install react-native-scrollable-tab-view-cys
使用方法
- 导入组件库：
import ScrollableTabView from 'react-native-scrollable-tab-view-cys';
- 编写组件：
-- -------------------- ---- -------
----- ---------------- ------- --------------- -
-------- -
------ -
-------------------
----- ------------- ----
-------- ----- -----------
-------
----- ------------- ----
-------- ------ -----------
-------
--------------------
--
-
-参数说明
ScrollableTabView 组件 Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| initialPage | Number | 0 | 初始显示的 tab 下标 |
| onChangeTab | Function | 无 | tab 切换时的回调，返回参数为对象 {i: index, ref: refs[index]} |
| tabBarInactiveTextColor | String | '#8e8e8e' | 在非选中状态下 tab 文字的颜色 |
| tabBarActiveTextColor | String | '#0f0' | 在选中状态下 tab 文字的颜色 |
| tabBarTextStyle | Style | 无 | 自定义 tab 栏文字样式 |
| tabBarUnderlineStyle | Style | 无 | 自定义 tab 栏下划线样式 |
| tabBarBackgroundColor | String | '#f7f7f7' | tab 栏背景色 |
| tabBarStyle | Style | 无 | 自定义 tab 栏样式 |
| locked | Boolean | false | 是否禁止滑动 |
| renderTabBar | Function | <defaulttabbar> | 自定义 tab 栏组件 |
DefaultTabBar 组件 Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| activeTextColor | String | '#0f0' | 在选中状态下 tab 文字的颜色 |
| inactiveTextColor | String | '#8e8e8e' | 在非选中状态下 tab 文字的颜色 |
| textStyle | Style | 无 | 自定义 tab 栏文字样式 |
| underlineStyle | Style | 无 | 自定义 tab 栏下划线样式 |
| backgroundColor | String | '#f7f7f7' | tab 栏背景色 |
| style | Style | 无 | 自定义 tab 栏样式 |
示例代码
-- -------------------- ---- -------
------ ------------------ - ------------- - ---- ---------------------------------------
----- ---------------- ------- --------------- -
-------- -
------ -
------------------
---------------
---------------------------------
----------------------------
------------------ --------- -- --
----------------------- ---------------- ------- ------- - --
-------------------------------
---------------- -- -------------- ---
-
----- ------------- ----
-------- ----- -----------
-------
----- ------------- ----
-------- ------ -----------
-------
--------------------
--
-
-总结
react-native-scrollable-tab-view-cys 是一个容易学习和使用的跨平台滑动 tab 组件，可以帮助我们更快地开发出移动端应用程序。同时，它也支持自定义样式，扩展性和可定制性非常强，非常值得使用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a27