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

import SegmentedControl from 'react-native-segmented-control';

<SegmentedControl
    defaultPage={1}
    itemButtonViewStyle = {{
        width:200
    }}
    itemHeaderViewStyle = {{
        paddingVertical:10,
    }}
    ref = {e=>this.SegmentedControl=e}
>
    <SegmentedControl.Item
        title = {'直播'}
    >
        <View>page0</View>
    </SegmentedControl.Item>
    <SegmentedControl.Item
        title = {'点播'}
    >
        <View>page1</View>
    </SegmentedControl.Item>
    <SegmentedControl.Item
        title = {'影音'}
    >
        <View>page2</View>
    </SegmentedControl.Item>
</SegmentedControl>

###Methods

• update(number) - select item.

this.SegmentedControl.update(number)

Screenshot