React Native控件之Switch开关

时间:2022-09-04 09:57:46

这个组件很简单 主要有两个属性:开、关。。。。呵呵哒,,,

import React,{Component}from 'react';
import {
  AppRegistry,

  StyleSheet,
  Text,
  View,
  Switch,
} from 'react-native';

var SwitchDemo = React.createClass({
  getInitialState() {
    return {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text>
           Swtich实例
        </Text>
        <Switch
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>
    );
  }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('Allen', () => SwitchDemo);

  然后呈现的小效果是~~~~~React Native控件之Switch开关