React Native 是 Facebook 推出的一款跨平台的移动端应用开发框架，它可以让开发者使用 JavaScript 和 React 的语法来编写原生应用。而 react-native-scrollable-tab-view 则是一个为 React Native 平台开发的可滚动 Tab View 组件。在开发中，如果需要实现类似于底部 Tab 或者顶部导航栏的切换效果，这个组件将是一个不错的选择。
本文将详细介绍如何使用 react-native-scrollable-tab-view，包括其安装与如何使用其基本功能，旨在帮助开发者更好地掌握这个 npm 包，实现自己的切换效果。
安装
首先，我们需要使用 npm 安装 react-native-scrollable-tab-view：
npm install --save react-native-scrollable-tab-view
基本用法
1. 引入组件
安装成功后，在需要使用该组件的 js 文件中引入它：
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';2. 编写组件 UI
在 render 函数中，将 ScrollableTabView 组件包裹在一个 View 组件中，并设置 style 属性，以控制整个组件的样式。
-- -------------------- ---- -------
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- -------------- ---
-
----- ------------- -------------
----- ------------- -------------------
----- ------------- ------------------
--------------------
-------
--
-上述代码中的 flex: 1 属性使得该组件占据整个屏幕，marginTop 属性则设置组件距离顶部的距离。ScrollableTabView 组件中的三个 Text 组件则分别用作切换的三个选项。
3. 点击切换
在上述代码中，我们通过给 Text 组件添加 tabLabel 属性来设置选项卡的名称。为了区分不同的选项卡，我们需要在 state 中设置一个变量 currentPage，表示当前选中的选项卡的下标。在构造函数中初始化 currentPage 的值为 0。
constructor(props) {
super(props);
this.state = {
currentPage: 0
};
}定义一个函数 onPageChanged，用于记录当前选中的选项卡的下标，并将其保存至 currentPage 变量中。然后，在 ScrollableTabView 组件中添加 onChangeTab 属性，将该函数作为其值。
-- -------------------- ---- -------
------------- - ----- -- -
--------------- ------------ ----- ---
-
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- -------------- ---
--------------------------------
-
----- ------------- -------------
----- ------------- -------------------
----- ------------- ------------------
--------------------
-------
--
-这样，每次选项卡切换时，onPageChanged 函数将被调用并更新 currentPage 变量为当前选项卡的下标。
4. 动态设置选项卡
上述代码中的 Tab 选项是静态设置的，实际开发中需要动态生成选项卡，因此我们可以通过数组来存储选项卡名称。在构造函数中，初始化一个 tabs 数组，存储三个选项卡的名称。
constructor(props) {
super(props);
this.state = {
currentPage: 0,
tabs: ['Tab #1', 'Tab #2', 'Tab #3']
};
}在 render 函数中，我们用 map 方法遍历 tabs 数组，动态生成选项卡，并将其传递给 ScrollableTabView 组件。
-- -------------------- ---- -------
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- -------------- ---
--------------------------------
-
-
-------------------------- ------ -- -
------ -
----- --------------- ------------
------
-------
--
--
-
--------------------
-------
--
-这样，就可以实现动态生成选项卡的效果了。
高级用法
除了基本的 Tab 切换功能，react-native-scrollable-tab-view 还提供了很多高级功能，例如自定义 Tab 样式、Tab 间的间隔、Tab 导航栏的滚动效果等。下面我们来详细介绍一下这些高级用法。
1. 自定义 Tab 样式
在上面的示例中，我们使用了 react-native-scrollable-tab-view 组件自带的 Tab 样式，并通过 renderTabBar 方法来渲染它。然而，如果想要自定义 Tab 样式，我们可以通过传递一个 React 组件来实现。
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------------------
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- ----------------- ---
-
----- ------------- -------------
----- ------------- -------------------
----- ------------- ------------------
--------------------
-------
--
-上述代码中，我们通过引入了 ScrollableTabBar 组件，通过 renderTabBar 方法重新渲染了 Tab 样式。
2. Tab 间的间隔
默认情况下，Tab 之间的间隔是紧贴着的，要想调整它们之间的间距，我们可以通过修改 tabStyle 属性来实现。
-- -------------------- ---- -------
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- -------------- ---
------------------------ ---
-
----- ------------- -------------
----- ------------- -------------------
----- ------------- ------------------
--------------------
-------
--
-上述代码中，我们通过将 tabStyle 属性设置为 {paddingRight: 8}，来调整 Tab 之间的间距。
3. Tab 导航栏滚动效果
默认情况下，Tab 导航栏选项是静止的，要想实现 Tab 导航栏的滚动效果，我们可以通过将 tabBarPosition 属性设置为 top、bottom、left 或者 right 来实现。
-- -------------------- ---- -------
-------- -
------ -
----- ------------- ----
------------------
------------------ ----
---------------
---------------- -- -------------- ---
----------------------
-
----- ------------- -------------
----- ------------- -------------------
----- ------------- ------------------
--------------------
-------
--
-上述代码中，我们通过将 tabBarPosition 属性设置为 top，将 Tab 导航栏移动至顶部，实现 Tab 导航栏的滚动效果。
结论
这篇文章中我们介绍了 react-native-scrollable-tab-view 这个 npm 包的基本用法，以及其高级用法。通过这篇文章的学习，相信你已经掌握了这个组件的使用方法，能够在实际开发过程中使用它来实现自己的切换效果了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb42cb5cbfe1ea0611241