Tab 分段组件 >=v1.0.0

iOS风格的分段组件（SegmentedControlIOS）。

Tab

属性

enabled { bool }

是否可用

默认值: true

momentary { bool }

选中的状态是否是临时的。如果为true，选中的段不会一直保持特效。但onValueChange回调还是会正常工作。

默认值: false

onChange { function }

(event, selectedIndex, value) => void

当用户点击某一段并且选项发生变化的时候调用。参数是event, selectedIndex, value。

方法参数:

参数名 类型 描述 版本
event event 点击事件
selectedIndex number 选中段的index
value string 选中段的值

onPress { function }

(event, selectedIndex, value) => void

当用户点击某一段的时候调用。参数是event, selectedIndex, value。

方法参数:

参数名 类型 描述 版本
event event 点击事件
selectedIndex number 选中段的index
value string 选中段的值

selectedIndex { number }

组件显示时，一开始被选中的段落的下标。

tintColor { string }

被选中的段的颜色。

tintTextColor { string }

被选中的段的文字颜色。

values { array }

按顺序每一段的标题文字（值）。

style { View.propTypes.style }

外层容器的样式。

示例

import React, {Component, StyleSheet, View, Text, ScrollView, Tab} from 'qunar-react-native';

class TabExampleItem extends Component{

    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: this.props.selectedIndex,
            value: typeof this.props.selectedIndex !== 'undefined' ? this.props.values[this.props.selectedIndex] : undefined,
        };
    }

    render() {
        const {values, tintColor, enabled, momentary, selectedIndex, tintTextColor } = this.props;

        return (
            <View>
                <Tab
                    values={values}
                    tintColor={tintColor}
                    enabled={enabled}
                    momentary={momentary}
                    tintTextColor={tintTextColor}
                    selectedIndex={this.state.selectedIndex}
                    onChange={this._onChange.bind(this)}
                />
                <Text style={styles.text}>
                    Value: {this.state.value}  Index: {this.state.selectedIndex}
                </Text>
            </View>
        );

    }

    _onChange(event, index, value) {
        this.setState({
            selectedIndex: index,
            value: value,
        });
    }
};

const styles = StyleSheet.create({
    text: {
        fontSize: 14,
        textAlign: 'center',
        fontWeight: '500',
        margin: 10,
    },
});

module.exports = {
    title: 'Tab',
    scroll: true,
    examples: [{
        subtitle: 'Tab can have values',
        render: () => {
            return <TabExampleItem values={['One', 'Two']} />
        }
    }, {
        subtitle: 'Tab can have many values',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten']} />
        }
    }, {
        subtitle: 'Tab can have a pre-selected value',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three']} selectedIndex={2}/>
        }
    }, {
        subtitle: 'Tab can be momentary',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three']} momentary={true}/>
        }
    }, {
        subtitle: 'Tab can be disabled',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three']} selectedIndex={0} enabled={false}/>
        }
    }, {
        subtitle: 'Custom colors can be provided',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three']} tintColor="gray" tintTextColor="red" selectedIndex={0}/>
        }
    }, {
        subtitle: 'Change events can be detected',
        render: () => {
            return <TabExampleItem values={['One', 'Two', 'Three']} selectedIndex={0}/>
        }
    }],