@react-native-diy/tabview v1.0.0

@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

支持的属性

效果图

最后

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