React Native 是现代移动应用开发的新潮流，为了提高开发效率，一些方便的 npm 包也应运而生。这篇文章将介绍一款用于 React Native 项目的 npm 包：react-native-scrollable-tab-view-bgcolor-extend。
什么是 react-native-scrollable-tab-view-bgcolor-extend？
react-native-scrollable-tab-view-bgcolor-extend 是一个能帮助你更方便地定制 ScrollableTabView 背景颜色的 npm 包。原版的 ScrollableTabView 在切换标签栏的时候，切换背景颜色会出现闪烁的问题，这款 npm 包恰好解决了这个问题。
如何使用 react-native-scrollable-tab-view-bgcolor-extend？
- 安装
要使用这款 npm 包，首先需要在项目中安装：
npm install react-native-scrollable-tab-view-bgcolor-extend --save
- 导入
在需要使用的页面中导入 react-native-scrollable-tab-view-bgcolor-extend：
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view-bgcolor-extend';- 使用
使用起来也非常简单，只需要把原来使用的 ScrollableTabView 组件替换为 react-native-scrollable-tab-view-bgcolor-extend 提供的 ScrollableTabView 组件即可：
-- -------------------- ---- -------
------------------
---------------- -- -------------- ---
-- --------------------------
-------------------------------
-
----- ------------- ---
-----------------
-------
----- ------------- ---
-----------------
-------
--------------------react-native-scrollable-tab-view-bgcolor-extend 的实现原理
首先，我们来了解一下原版 ScrollableTabView 组件的实现原理。
原版 ScrollableTabView 组件实现的关键在于 TabBar，而 TabBar 是一个 ScrollView ，它包含多个 Tab ，根据当前选中的 Tab ，切换整个 TabBar 的偏移量。
在使用原版 ScrollableTabView 组件时，TabBar 在切换了 Tab 时，会通过一些动画效果，切换到下一个标签栏，这个过程是通过默认样式来实现的，也就是通过设置 background-color 来改变背景颜色的。
在这个过程中，由于默认样式的原因，切换标签栏时的背景颜色会出现闪烁的问题，而 react-native-scrollable-tab-view-bgcolor-extend 提供的 ScrollableTabView 组件，就是通过在 TabBar 上添加一个绝对定位的背景色，来解决这个问题。
为了在 TabBar 上添加绝对定位的背景色，react-native-scrollable-tab-view-bgcolor-extend 需要区别出 TabBar 和 TabBar 的容器。在实现方法中，先找到 TabBar 的容器，然后为这个容器添加一个绝对定位的背景色。
如何实现个性化定制？
如果我们需要对 ScrollableTabView 进行个性化定制，我们可以继承 react-native-scrollable-tab-view-bgcolor-extend 中的组件，然后在子类中设置我们需要的样式即可。例如，我需要修改当选中的 Tab 时，上面的一条横线的高度：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ - ------------- - ---- --------------------------------------------------
----- ------------------- ------- ----------------- -
-------- -
------ ---------------
-
-- -- ---------- -------------- --- -------
---------------- ----- ------------ --------------- ------- -
----- - -------------------- - - -----------
----- --------------- - -------------------------------- -- -------
----- ----------------- - ---------------------------------- -- -------
----- --------- - -------------------------- -- ---
------ -
-----------------
-------- ----- - --
-----------------------
-----------------
-------------------------
----------------------------
----------- -- ---------------------
-
----- ------------------- ----------------------
-----
--------
-
-- ------------ --- --
----------- ----------- - ------ - ---------
------ ----------- - --------------- - ------------------
--------- ---
-------------
--
--
-
------
-------
--- ------------ --- ------- ---
------------ -- ----- ----------------------------- ------------------ ---
-------
-------------------
--
-
-继承了 react-native-scrollable-tab-view-bgcolor-extend 中的 ScrollableTabView 组件，重写了其中的 _renderTab() 方法，添加了对选中和未选中的 Tab 进行个性化定制的功能。
结语
react-native-scrollable-tab-view-bgcolor-extend 恰好解决了原版 ScrollableTabView 组件在切换标签栏时背景闪烁的问题，并且扩展了一些个性化定制的功能，可以方便的适应各种场景需求。通过本篇文章的学习，相信你已经掌握了 react-native-scrollable-tab-view-bgcolor-extend 的使用方法，以及一些个性化定制的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448ddfbb