0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> iOS 独有组件之 SegmentedControlIOS

使用 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. 效果图
【Kevin Learn React Native】--> iOS 独有组件之 SegmentedControlIOS_ios


举报

相关推荐

0 条评论