0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> Switch

跨平台通用的“开关”组件。

注意这是一个“受控组件”(controlled component)。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性,组件只会按一开始给定的value值来渲染且保持不变,看上去就像完全点不动。

属性

name

type

desc

disabled

bool

如果为true则禁用此组件的交互。

onValueChange

function

当值改变的时候调用此回调函数,参数为新的值。

thumbColor

​​color​​

开关上圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。

tintColor

​​color​​

关闭状态时的边框颜色(iOS)或背景颜色(Android)。

value

bool

表示此开关是否打开。默认为false(关闭状态)。

实例

1. 逻辑代码

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

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
turnOn: true,
turnOff: false
}
}
render() {
return (
<View style = {styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
Switch
</Text>
</View>
<View style={styles.view_layout}>
<Switch
onValueChange = {(value)=> {
this.setState({turnOff: value})
}}
style = {styles.switch}
value = {this.state.turnOff}/>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text: {
fontSize:20,
color:'white'
},
view_layout: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

},
switch: {
marginBottom: 10
}
});

2. 效果图
【Kevin Learn React Native】--> Switch_switch


举报

相关推荐

0 条评论