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. 效果图

switch_demo.jpg