@react-native-diy/tabview

一个好用的 TabView 组件，主要基于@react-native-community/viewpager封装，同时配合react-native-web也支持在 Web 上使用

此组件主要是由TabBar和MyViewPager两部分组成：

TabBar是基于ScrollView封装而成，支持文字随着滚动一直居中，支持指示器（下划线）随着文字长度而自行变化，也支持调整指示器（下划线）的长度比率，同时也支持滚动和固定模式

MyViewPager是基于@react-native-community/viewpager封装而成，为了支持Web，特地使用ScrollView封装了MyViewPager.web.tsx

安装

``
npm install @react-native-community/viewpager @react-native-diy/tabview --save
or
yarn add @react-native-community/viewpager @react-native-diy/tabview
`

使用

`javascript
import TabView from "@react-native-diy/tabview";

style={{ marginTop: IS_ANDROID ? 0 : statusBarHeight }}
navigationState={data}
tabBarStyle={{ borderBottomColor: "#eeeeee", borderBottomWidth: 1 }}
renderTabBarRightSection={() => (
style={{
width: 50,
justifyContent: "center",
alignItems: "center",
}}
>
style={{ width: 20, height: 20 }}
source={require("./arrow_down.png")}
/>

)}
renderScene={(props) => {
const { index } = props;
if (index === 0) {
return (
{...props}
switchIcon={switchIcon}
switchBadge={switchBadge}
/>
);
}
if (index === 1) {
return ;
}
return ;
}}
tabBarIndicatorMode={"label"}
tabBarMode={"scrollable"}
/>;
``

具体使用见 App.js

支持的属性

| 属性 | 描述 |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| style | TabView 容器的样式 |
| navigationState | 数据源（必传）, 格式[{ key: '1', title: '精选', icon: 'require("./target.png")' , badge: ''}]，icon 和 badge 是可选的 |
| renderTabBar | 自定义 TabBar， 传空则不显示 |
| tabBarPosition | TabBar 位置， "top"、"bottom"可选 |
| tabBarStyle | TabBar 容器的样式 |
| tabBarContentContainerStyle | TabBar 内容的样式，理解为 ScrollView 的 contentContainerStyle |
| tabBarTabStyle | TabBar 每个 Tab 的样式 |
| tabBarLabelStyle | TabBar 每个 Label 的样式 |
| tabBarIndicatorStyle | TabBarIndicator 的样式 |
| tabBarActiveColor | TabBar 中单个 Tab 未选中的背景颜色，默认透明 |
| tabBarInactiveColor | TabBar 中单个 Tab 选中的背景颜色，默认透明 |
| scrollEnabled | TabBar 是否能滚动，默认滚动 |
| bounces | TabBar 是否启用弹性效果，默认启用 |
| onTabBarPress | TabBar 单个 Tab 被选中的事件 |
| renderTabBarLabel | 自定义 TabBar 中的 Label 组件，即文字标签 |
| renderTabBarLeftSection | TabBar 左边渲染的视图，扩展项，默认为空 |
| renderTabBarRightSection | TabBar 右边渲染的视图，扩展项，默认为空 |
| tabBarIndicatorMode | TabBarIndicator 的显示模式， "tab" 、"label"可选， |
| tabBarIndicatorWidthRatio | TabBarIndicator 宽度的显示比率，0 到 1 之间 |
| tabBarMode | tabBar 的显示模式，"scrollable"、"fixed"可选 |
| onIndexChange | ViewPager 切换的事件 |
| renderScene | 渲染每个 Scene（必传），与 navigationState 的长度一致 |
| lazy | ViewPager 是否启用懒加载 |
| sceneContainerStyle | Scene 的样式 |
| renderLazyPlaceholder | 当 Scene 没有加载渲染的视图 |
| keyboardDismissMode | 与 ScrollView 的 keyboardDismissMode 一致 |
| swipeEnabled | ViewPager 是否启用滚动，默认开启 |
| onSwipeStart | 当 ViewPager 开始滚动的事件 |
| onSwipeEnd | 当 ViewPager 停止滚动的事件 |
| onPagerScroll | ViewPager 滚动的事件 |
| initialIndex | 初始显示的位置，默认 0 |

效果图

最后

如何对您有帮助的话，帮我 Star 下吧！☺️☺️☺️