react-native-tab-view

@react-native-diy/tabview

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

此组件主要是由TabBarMyViewPager两部分组成:

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

使用

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

支持的属性

属性 描述
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

效果图

react-native-tab-view_第1张图片 react-native-tab-view_第2张图片
react-native-tab-view_第3张图片 react-native-tab-view_第4张图片
react-native-tab-view_第5张图片 react-native-tab-view_第6张图片

最后

如何对您有帮助的话,帮我 Star 下吧!☺️☺️☺️

你可能感兴趣的:(ReactNative)