跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.73

🚧 SegmentedControlIOS

已过时。 Use @react-native-community/segmented-control instead.

使用SegmentedControlIOS来在 iOS 设备上渲染一个UISegmentedControl组件。这是一个分段显示多个选项的组件。

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

enabled

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

类型必需
bool

momentary

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

类型必需
bool

onChange

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

类型必需
function

onValueChange

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

类型必需
function

selectedIndex

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

类型必需
number

tintColor

Accent color of the control.

类型必需
string

values

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

类型必需
array of string