← React Native 中的 SegmentedControlIOS 组件的 momentary 属性
React Native 中的 SegmentedControlIOS 组件的 onChangeValue 属性 →
React Native 中的 SegmentedControlIOS 组件的 onChange 属性
React Native 中的 SegmentedControlIOS 组件的 onChange
属性用于设置 SegmentedControlIOS
组件中的 选项 被 触摸 时的回调方法
如果要获取触摸的选中项,可以通过回调参数 event.nativeEvent.selectedSegmentIndex
注意
onChange
和 onChangeValue
两个属性最大的不同点就是前者传递的参数是 触摸事件 而后者传递的是 选中项的文字
语法
<SegmentedControlIOS momentary={false} values={['One', 'Two']} selectedIndex={this.state.selectedIndex} onChange={(event) => { this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); }} />
导入模块
import { SegmentedControlIOS } from 'react-native';
属性说明
属性 | 类型 | 默认值 | 是否必传 | 平台 | 说明 |
---|---|---|---|---|---|
onChange | function | (event) | 否 | Android,iOS | 用于设置 SegmentedControlIOS 组件中的 选项 被 触摸 时的回调方法 |
范例
下面的范例,演示了如何使用 React Native 的 SegmentedControlIOS 组件的 onChange
属性
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 momentary={true} values={values} selectedIndex={selectedIndex} onChange={(event) => { this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); }} /> <Text>简单教程,简单编程 (https://www.twle.cn)</Text> </View> ); } }