React Native 中文 - SegmentedControlIOS 组件

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

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

注意

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

导入模块

import {SegmentedControlIOS} from 'react-native';

编程方式动态改变 选中项

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

  1. 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
        }
    
  2. 然后动态改变 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 组件每一个选项的显示的文字

注意

  1. onChangeonChangeValue 两个属性最大的不同点就是前者传递的参数是 触摸事件 而后者传递的是 选中项的文字
  2. 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 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.