zaach / react-native-segmented-control

react-native-segmentedControl for( Android / Ios )

react-native-segmented-control

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

SegmentedControl

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

SegmentedControl.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

ios

android