@react-native-diy/tabview

    1.0.0 • Public • Published

    @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

    效果图

    最后

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

    Install

    npm i @react-native-diy/tabview

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    2.87 MB

    Total Files

    82

    Last publish

    Collaborators

    • bynn