React Native 中文 - SegmentedControlIOS 组件 - React Native 中文文档

React Native 中的 SegmentedControlIOS 组件仅在 iOS 下使用，用于渲染一个 iOS 风格的 UISegmentedControl

iOS 的 UISegmentedControl 是一个用于分段显示多个选项的组件

注意

SegmentedControlIOS 组件仅能在 iOS 设备上使用，Android 设备是无效的

导入模块

import {SegmentedControlIOS} from 'react-native';

编程方式动态改变 `选中项`

如果你需要动态改变 SegmentedControlIOS 组件的 选中项，需要遵循以下步骤：

将 SegmentedControlIOS 组件的 选中项 的索引赋值给 React 组件的 状态属性 ( state )，比如

import React, {Component} from 'react';
import { SegmentedControlIOS } from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
        selectedIndex: 0
    }

然后动态改变 selectedIndex 值即可改变 SegmentedControlIOS 组件的选中项
```
this.setState({selectedIndex:1})
```

注意

当用户选择一个值并更改索引时，需要更新状态变量 selectedIndex

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

效果如下

属性

React Native 中的 SegmentedControlIOS 组件具有以下属性可以设置

属性	类型	是否必传	平台	说明
View props...	mixed	否	iOS	视图类组件公共属性
enabled	bool	否	iOS	是否可用，如果设置为 false,会显示但不可点击
momentary	bool	否	iOS	是否高亮显示选中项，false 不高亮，但不会影响 `onValueChange` 事件
onChange	function	否	iOS	当用户点击某个选项时触发该回调，传递的是点击事件
onValueChange	function	否	iOS	当用户点击某个选项时触发该回调，传递的是点击的选项的索引值
selectedIndex	integer	否	iOS	用于设置默认的选中项
tintColor	Color	否	iOS	设置 SegmentedControlIOS 的主体色
values	array	否	iOS	设置 SegmentedControlIOS 组件每一个选项的显示的文字

注意

onChange 和 onChangeValue 两个属性最大的不同点就是前者传递的参数是 触摸事件 而后者传递的是 选中项的文字
values 只用于选项要显示的标签，并不用于 onChangeValue 属性的返回值

范例

下面的范例，演示了如何使用 SegmentedControlIOS 组件

import React, {Component} from 'react';
import {Text,View, SegmentedControlIOS} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
        selectedIndex:0,
        values:['你','我','它']
    }
  }

  render() {

    const {selectedIndex,values} = this.state

    return (
      <View>
            <SegmentedControlIOS
                values={values}
                selectedIndex={selectedIndex}
                onChange={(event) => {
                    this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
                }}
            />
            <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
        </View>
    );
  }
}

React Native 中文 - SegmentedControlIOS 组件

注意

导入模块

编程方式动态改变 选中项

注意

属性

注意

范例

React Native 中文文档

编程方式动态改变 `选中项`