SegmentedControlIOS

SegmentedControlIOS

Use SegmentedControlIOS to render a UISegmentedControl iOS.

Programmatically changing selected index

The selected index can be changed on the fly by assigning the selectIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.

<SegmentedControlIOS
  values={['One', 'Two']}
  selectedIndex={this.state.selectedIndex}
  onChange={(event) => {
    this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
  }}
/>

Props

ViewPropTypes props...

enabled?: PropTypes.bool

If false the user won't be able to interact with the control. Default value is true.

momentary?: PropTypes.bool

If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected.

onChange?: PropTypes.func

Callback that is called when the user taps a segment; passes the event as an argument

onValueChange?: PropTypes.func

Callback that is called when the user taps a segment; passes the segment's value as an argument

selectedIndex?: PropTypes.number

The index in props.values of the segment to be (pre)selected.

tintColor?: PropTypes.string

Accent color of the control.

values?: PropTypes.arrayOf(PropTypes.string)

The labels for the control's segment buttons, in order.

© 2015–2017 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://facebook.github.io/react-native/docs/segmentedcontrolios.html

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部