前言：
随着 React Native 的不断发展，越来越多的第三方组件库涌现出来，为前端开发者带来了更多方便快捷的开发方式，其中一个非常实用的组件库就是 react-native-scrollable-tab-view-kream。 下面就让我们一起来学习一下这个 npm 包的使用教程吧！
一、安装
react-native-scrollable-tab-view-kream 是一款基于 react-native-scrollable-tab-view 的一个增强组件库，在使用前，我们需要保证项目中已经正确安装了 react-native-scrollable-tab-view。
首先打开终端，进入项目根目录，利用 npm 进行安装：
--- ------- --------------------------------------
当然，这个时候你需要保证你的电脑已经成功安装了 npm。
二、使用
引入组件： 在需要使用的文件头部引入组件：
------ ------- ---- -----------------------------------------
注意：在使用过程中，TabView 组件内部需要用到 ScrollView，ViewPagerAndroid 等组件，因此必须在安装了 react-native-scrollable-tab-view 的前提下使用。
基本使用
下面我们来看一下这个组件库的基本使用方法。
初始化组件：
---------
---
----------其中，<TabView> 组件内部需要含有多个 <TabView.Page>，表示不同的单独页面，每一个页面都需要提供对应的 tabLabel 和 key。
举一个例子：
--------
---------------
--------------------
---------------- -- -------------- ----
------------- ------------- ----------------
-------------- --
---------------
------------- ------------- ----------
-------- --
---------------
----------其中：
initialPage: 初始化页面的下标，默认为0。tabBarPosition: tabBar 位置，默认为top。renderTabBar: 自定义 TabBar。tabLabel: 每一个页面对应的 tab 名称，必须设置。key: 每一个页面的唯一标识。
高级使用
上面的例子介绍了这个组件库的基本使用方法，但是往往在开发过程中，我们可能需要对页面进行一些自定义的操作，比如修改颜色等。这个时候，我们就可以通过一些高阶 API 来实现这些操作。
下面是一些常用的 API：
underlayColor: 点击后的背景颜色，默认为#f5f5f5。activeTextColor: 激活 Tab 文字颜色。inactiveTextColor: 非激活 Tab 文字颜色。activeTab: 当前激活的 Tab。tabStyle: Tab 样式。tabBarStyle: TabBar 样式。tabBarUnderlineStyle: TabBar 下划线样式。scrollWithoutAnimation: 是否支持滚动时禁用动画，默认为false。onChangeTab: 切换 Tab 的回调函数。
下面展示一个根据自己需求自定义 TabBar 颜色的例子：
--------
---------------
--------------------
--------------------------------
--------------------- ------------------------ ---
--------------------------------------- ------ ----------
-
---
----------高级功能拓展
React Native 使用起来非常灵活和方便，那么这个组件库有没有一些拓展功能呢？如何实现呢？这就需要我们进行一些尝试和实践。
举一个例子：假设我们在一个分类导航页面中，需要在导航栏中添加一个“全部”按钮。这个时候，我们需要使用新的 API，来自定义 TabView。
下面是实现的代码：
------ ------ - --------- - ---- -------
------ -
-----
-----
-----------
----------------
- ---- --------------
------ ------- ---- ----------------------------------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - ---
------------- - ------------ ----- ----- ----- ------- --------
-
------------------- --
--------- - ------ -- -
----- ----- - ------ --- - - -- - ----------------------
-------------------- ------
-------------------- -------
-
-------------- -
------ -
----------------- ---------------------------------
----- -----------------------
---------------
-------
-------------------
-
-
------------------- -
----- -------- - --------------
------ -
----- ----------------------
---------------------
--------------
----------
---------------------
--------------------------
---------------------------------
--
-------
--
-
-------- -
------ -
----- -------------------------
--------
---------------
----------------------------
-------------------------------------------
-
------------- ------------- ---------------------------
------------- ------------- --------------------------
------------- ------------- --------------------------
------------- ------------- --------------------------
------------- ------------- --------------------------
------------- --------------- ----------------------------
------------- --------------- ----------------------------
----------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------- ---
--
------- -
-------------- ------
------- ---
---------------- --------
--
--------- -
-------------- --
------- ---
--------------- ---------
----------- ---------
--
---------- -
---------------- ------
---------- ---
------- --
--
-------- -
--------------- ---------
----------- ---------
------- ---
------ ---
------------------ --
------------------ -------
-
---注意：在上面的代码中，我们不仅使用了已有 API，还自定义了 renderButton 函数，并在 renderTabBar 函数中进行渲染。
总结
经过上面的介绍，相信大家已经掌握了如何使用 react-native-scrollable-tab-view-kream 组件库，也了解了一些高级使用方法和操作，当然只有实际浅尝辄止，并结合自己的开发场景加以使用，才能更好的发挥其优势，快速构建出高品质的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560ad81e8991b448deec5