@mshengyang/react-native-scrollable-tab

Installation

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

Usage

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[]

---

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library