使用 SegmentedControlIOS 来在 iOS 设备上渲染一个 UISegmentedControl 组件。这是一个分段显示多个选项的组件。
属性
名称 | 类型 | 必填 | 说明 |
enabled | bool | 否 | 是否禁用 |
momentary | bool | 否 | 选中后背景颜色很快消失 |
onChange | function | 否 | 选项发生变化时调用 |
onValueChange | function | 否 | 选项发生变化时调用 |
selectedIndex | number | 否 | 一开始被选中的索引 |
tintColor | string | 否 | 背景、边框、字体颜色 |
values | array of string | 否 | 数据 |
实例
1. 逻辑代码
import React, {Component} from 'react';
import {
StyleSheet,
Alert,
SegmentedControlIOS,
View
} from 'react-native';
export default class App extends Component {
_onChange = (event)=>{
var s = 'onChange参数属性:selectedSegmentIndex：'+
event.nativeEvent.selectedSegmentIndex+'\n'+
'target:'+event.nativeEvent.target+'\n'+
'value:'+event.nativeEvent.value;
Alert.alert(s);
}
onValueChange = (value)=>{
Alert.alert('onValueChange:'+value);
}
render() {
return (
<View style={styles.container}>
<SegmentedControlIOS
style = {styles.segmented}
selectedIndex = {1}
onChange = {this._onChange}
onValueChange = {this.onValueChange}
tintColor = 'blue'
values = {['关注','论坛','发现']}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
segmented: {
marginTop:40
}
});2. 效果图
