146 строки
2.2 KiB
Markdown
146 строки
2.2 KiB
Markdown
---
|
|
id: segmentedcontrolios
|
|
title: SegmentedControlIOS
|
|
layout: docs
|
|
category: components
|
|
permalink: docs/segmentedcontrolios.html
|
|
next: slider
|
|
previous: sectionlist
|
|
---
|
|
Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
|
|
|
|
#### Programmatically changing selected index
|
|
|
|
The selected index can be changed on the fly by assigning the
|
|
selectedIndex 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
|
|
|
|
- [View props...](docs/view.html#props)
|
|
- [`enabled`](docs/segmentedcontrolios.html#enabled)
|
|
- [`momentary`](docs/segmentedcontrolios.html#momentary)
|
|
- [`onChange`](docs/segmentedcontrolios.html#onchange)
|
|
- [`onValueChange`](docs/segmentedcontrolios.html#onvaluechange)
|
|
- [`selectedIndex`](docs/segmentedcontrolios.html#selectedindex)
|
|
- [`tintColor`](docs/segmentedcontrolios.html#tintcolor)
|
|
- [`values`](docs/segmentedcontrolios.html#values)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
# Reference
|
|
|
|
## Props
|
|
|
|
### `enabled`
|
|
|
|
If false the user won't be able to interact with the control.
|
|
Default value is true.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| bool | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `momentary`
|
|
|
|
If true, then selecting a segment won't persist visually.
|
|
The `onValueChange` callback will still work as expected.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| bool | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `onChange`
|
|
|
|
Callback that is called when the user taps a segment;
|
|
passes the event as an argument
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| function | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `onValueChange`
|
|
|
|
Callback that is called when the user taps a segment;
|
|
passes the segment's value as an argument
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| function | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `selectedIndex`
|
|
|
|
The index in `props.values` of the segment to be (pre)selected.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| number | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `tintColor`
|
|
|
|
Accent color of the control.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| string | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `values`
|
|
|
|
The labels for the control's segment buttons, in order.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| array of string | No |
|
|
|
|
|
|
|
|
|
|
|
|
|