react-native-segmented-tabs v0.0.3

react-native-segmented-tabs(for Android/iOS) 🚀

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡

ScreenShots

Install

npm install react-native-segmented-tabs --save

Usage

Import

import SegmentedTabs from 'react-native-segmented-tabs';

class ConsumerComponent extends Component {

  constructor (props) {
    super(props);
    this.state = {
      selectIndex: 0
    }
  }

  _selectTabs = (index) => {
    this.setState({
      selectIndex: index
    });
  }

  render() {
      return (
          <View>
            <SegmentedTabs
              wrapStyle={styles.wrap}
              selectIndex={this.state.selectIndex} 
              onPress={this._selectTabs} 
              items={['日','周','月','年']}/>
          </View>
      );
  }
}

Props

Custom styling

    <SegmentedTabs wrapStyle={styles.tabsContainerStyle}
        tabStyle={styles.tabStyle}
        tabTextStyle={styles.tabTextStyle}
        tabHeight={30}
        tabWidth = {100}
        ...
        selectIndex={this.state.selectIndex} 
        onPress={this._selectTabs} />

    const styles = StyleSheet.create({
        tabsContainerStyle: {
          //custom styles
        }
    })

License

MIT