React Native 互動元件之 Switch

跨平臺通用的“開關”元件。

注意這是一個“受控元件”（controlled component）。你必須使用onValueChange回撥來更新value屬性以響應使用者的操作。如果不更新value屬性，元件只會按一開始給定的value值來渲染且保持不變，看上去就像完全點不動。

屬性

例項

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