1.0.4 • Published 2 years ago
@mshengyang/react-native-scrollable-tab v1.0.4
@mshengyang/react-native-scrollable-tab
Installation
npm install @mshengyang/react-native-scrollable-tab
//or
yarn add @mshengyang/react-native-scrollable-tabUsage
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