[react-native]重构了6.9K+star 的滑动tab组件

前言

因为业务需要，我在项目里引用了社区开源插件ptomasroos/react-native-scrollable-tab-view。

该组件是一个动画切换tab的组件，核心代码都是7年以前古早时期开发的，作者也很久未更新npm包。

我使用的时候给这个组件打了很多补丁，修复bug来满足业务需求

然后正好看到了这个issue。就决定重置这个组件，优化了很多配置，移除了或修改了不合理的代码，为开源社区做一下贡献。

---

安装

npm install @mshengyang/react-native-scrollable-tab
//or
yarn add @mshengyang/react-native-scrollable-tab

---

使用

import ScrollableTabView from '@mshengyang/react-native-scrollable-tab';

// ...

<ScrollableTabView
        initialPage={1}
        tabBarUnderlineStyle={{
          backgroundColor: '#0BC2D2',
        }}
        onChangeTab={(page) => {
          console.log('17=>', page);
        }}
        tabBarActiveTextColor={'#0BC2D2'}
        style={{
          borderWidth: 0,
          marginTop: 8,
        }}
        tabs={['tab1', 'tab2', 'tab3']}
        contentProps={{ style: { borderWidth: 0 } }}
      >
        <View style={{ flex: 1 }}>
          <Text>1</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text>2</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text>3</Text>
        </View>
      </ScrollableTabView>

---

API

props	desc	type
initialPage	初始页面	number
page	页面	number
onChangeTab	tab变化的回调	(param: { i: number; from: number }): void;
onScroll	滚动的回调	onChangeTab?(param: { i: number; from: number }): void;
renderTabBar	自定义Tabbar	false | ((props: DefaultTabBarProps) => any);
tabBarUnderlineStyle	Bar下划线样式	ViewStyle
tabBarBackgroundColor	Bar 背景色	string
tabBarActiveTextColor	Bar激活时的text颜色	string
tabBarInactiveTextColor	未激活的text颜色	string
tabBarTextStyle	text style	TextStyle
style	bar container 样式	ViewStyle
contentProps	内容区Props	ScrollViewProps
scrollWithoutAnimation	是否启用滚动动画	boolean
locked	禁止滚动	boolean
preRenderingSiblingsNumber	预渲染页面数量	number
tabs	tab列表	string[]

---

效果