Tab 分段组件 >=v1.0.0

iOS风格的分段组件(SegmentedControlIOS)。

Tab

使用说明

基本用法

根据 values 属性的值,渲染出一个基本的iOS风格的分段组件。

<Tab values={['One', 'Two']} />

非受控组件

非受控组件,可以通过 onChange 或者 onPress 属性获取当前组件选中的值。

<Tab
    values={['One', 'Two', 'Three']}
    selectedIndex={1}
    onChange={(evt, index, val) => {
        this.setState({ val });
    }}
/>

属性

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 }==

外层容器的样式。