react-native-segmentedControl
react-native-segmentedControl for( Android / Ios )
Overview
SegmentedControl using react-native,support android and ios. Pages won't be rendered when you switch to other tabs,also save the status of invisible pages.
Installation
First you need to install react-native-segmented-control:
npm install react-native-segmented-control --save
Props
Tabbar
prop | value | required/optional | comment |
---|---|---|---|
defaultPage | number | optional | default:0 |
itemFontSize | number | optional | text fontsize default:14 |
itemButtonActiveColor | color | optional | ActiveButton color |
itemButtonColor | color | optional | defaultButton color |
itemTextActiveColor | color | optional | ActiveText color |
itemTextColor | color | optional | defaultText color |
itemButtonViewStyle | style | optional | button container style |
itemButtonBorderColor | color | optional | button border color |
itemHeaderViewStyle | style | optional | header container style |
Tabbar.Item
prop | value | required/optional | comment |
---|---|---|---|
title | string | required | title of item |
onPress | function | optional | the function will be called when item is selected. |
Usage
; <SegmentedControl defaultPage=1 itemButtonViewStyle = width:200 itemHeaderViewStyle = paddingVertical:10 ref = thisSegmentedControl=e> <SegmentedControlItem title = '直播' > <View>page0</View> </SegmentedControlItem> <SegmentedControlItem title = '点播' > <View>page1</View> </SegmentedControlItem> <SegmentedControlItem title = '影音' > <View>page2</View> </SegmentedControlItem></SegmentedControl>
Methods
update(number)
- select item.
thisSegmentedControl
Screenshot