react-native-segmented-control

react-native-segmentedControl for( Android / Ios )

Usage no npm install needed!

<script type="module">
  import reactNativeSegmentedControl from 'https://cdn.skypack.dev/react-native-segmented-control';
</script>

README

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