@react-native-diy/tabview
Version:
TabView for React Native
119 lines (102 loc) • 8.01 kB
Markdown
# @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";
<TabView
style={{ marginTop: IS_ANDROID ? 0 : statusBarHeight }}
navigationState={data}
tabBarStyle={{ borderBottomColor: "#eeeeee", borderBottomWidth: 1 }}
renderTabBarRightSection={() => (
<View
style={{
width: 50,
justifyContent: "center",
alignItems: "center",
}}
>
<Image
style={{ width: 20, height: 20 }}
source={require("./arrow_down.png")}
/>
</View>
)}
renderScene={(props) => {
const { index } = props;
if (index === 0) {
return (
<ChoiceScene
{...props}
switchIcon={switchIcon}
switchBadge={switchBadge}
/>
);
}
if (index === 1) {
return <ListScene {...props} />;
}
return <OtherScene {...props} />;
}}
tabBarIndicatorMode={"label"}
tabBarMode={"scrollable"}
/>;
```
具体使用见 [App.js](example/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](https://reactnative.cn/docs/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](https://reactnative.cn/docs/scrollview#keyboarddismissmode) 一致 |
| swipeEnabled | ViewPager 是否启用滚动，默认开启 |
| onSwipeStart | 当 ViewPager 开始滚动的事件 |
| onSwipeEnd | 当 ViewPager 停止滚动的事件 |
| onPagerScroll | ViewPager 滚动的事件 |
| initialIndex | 初始显示的位置，默认 0 |
## 效果图
<center>
<img src="./screenshot/ios_show1.gif" width="300" style="margin: 4px;"/>
<img src="./screenshot/ios_show2.gif" width="300" style="margin: 4px;"/>
</center>
<center>
<img src="./screenshot/android_show1.gif" width="300" style="margin: 4px;"/>
<img src="./screenshot/android_show2.gif" width="300" style="margin: 4px;"/>
</center>
<center>
<img src="./screenshot/web_show1.gif" width="300" style="margin: 4px;"/>
<img src="./screenshot/web_show2.gif" width="300" style="margin: 4px;"/>
</center>
## 最后
如何对您有帮助的话，帮我 Star 下吧！☺️☺️☺️