@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

使用

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 |

效果图

最后

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