rmc-tabs
React Mobile Tabs Component (web & react-native), inspired by react-native-scrollable-tab-view
Development
npm i
npm start
install
docs
Usage
react-native
./node_modules/rc-tools run react-native-init
react-native run-ios
API
Tabs:
属性 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
tabs | tabs data | Models.TabData[] | true | |
tabBarPosition | TabBar's position | 'top' | 'bottom' | 'left' | 'right' | top | false |
renderTabBar | render for TabBar | ((props: TabBarPropsType) => React.ReactNode) | false | false | |
initialPage | initial Tab, index or key | number | string | false | |
page | current tab, index or key | number | string | false | |
swipeable | whether to switch tabs with swipe gestrue in the content | boolean | true | false |
useOnPan | use scroll follow pan | boolean | true | false |
prerenderingSiblingsNumber | pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page | number | 1 | false |
animated | whether to change tabs with animation | boolean | true | false |
onChange | callback when tab is switched | (tab: Models.TabData, index: number) => void | false | |
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false | |
destroyInactiveTab | destroy inactive tab | boolean | false | false |
distanceToChangeTab | distance to change tab, width ratio | number | 0.3 | false |
usePaged | use paged | boolean | true | false |
tabDirection | tab paging direction | 'horizontal' | 'vertical' | horizontal | false |
tabBarUnderlineStyle | tabBar underline style | React.CSSProperties | any | false | |
tabBarBackgroundColor | tabBar background color | string | false | |
tabBarActiveTextColor | tabBar active text color | string | false | |
tabBarInactiveTextColor | tabBar inactive text color | string | false | |
tabBarTextStyle | tabBar text style | React.CSSProperties | any | false |
TabBarPropsType(Common):
属性 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
goToTab | call this function to switch tab | (index: number) => void | true | |
tabs | tabs data | Models.TabData[] | true | |
activeTab | current active tab | number | true | |
animated | use animate | boolean | true | true |
renderTab | render the tab of tabbar | (tab: Models.TabData) => React.ReactNode | false | |
page | page size of tabbar's tab | number | 5 | false |
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false | |
tabBarPosition | tabBar's position defualt: top | 'top' | 'bottom' | 'left' | 'right' | false | |
tabBarUnderlineStyle | tabBar underline style | React.CSSProperties | any | false | |
tabBarBackgroundColor | tabBar background color | string | false | |
tabBarActiveTextColor | tabBar active text color | string | false | |
tabBarInactiveTextColor | tabBar inactive text color | string | false | |
tabBarTextStyle | tabBar text style | React.CSSProperties | any | false |
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage