iOS 开关

使用 SwitchIOS 在 iOS 上呈现出布尔型的输入。这是一个控件组件，所以为了更新组件，你必须使用 onValueChange 回调并且更新值value。否则的话用户的改变会被立即反映到 props.value ，这是一个真理。

属性

Edit on GitHub

disabled 布尔型

如果值为真，那么用户将不能切换开关。默认值为假。

onTintColor 字符串型

当开关打开时候的背景颜色。

onValueChange 函数

当用户切换开关时，调用回调函数。

thumbTintColor 字符串型

开关按钮的背景颜色。

tintColor 字符串型

当开关关闭后的背景颜色。

value 布尔型

开关的值，如果为真，开关会打开。默认值为假。

例子

Edit on GitHub

  1. 'use strict';
  2. var React = require('react-native');
  3. var {
  4.   SwitchIOS,
  5.   Text,
  6.   View
  7. } = React;
  8. var BasicSwitchExample = React.createClass({
  9.   getInitialState() {
  10.     return {
  11.       trueSwitchIsOn: true,
  12.       falseSwitchIsOn: false,
  13.     };
  14.   },
  15.   render() {
  16.     return (
  17.       <View>
  18.         <SwitchIOS
  19.           onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
  20.           style={{marginBottom: 10}}
  21.           value={this.state.falseSwitchIsOn} />
  22.         <SwitchIOS
  23.           onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
  24.           value={this.state.trueSwitchIsOn} />
  25.       </View>
  26.     );
  27.   }
  28. });
  29. var DisabledSwitchExample = React.createClass({
  30.   render() {
  31.     return (
  32.       <View>
  33.         <SwitchIOS
  34.           disabled={true}
  35.           style={{marginBottom: 10}}
  36.           value={true} />
  37.         <SwitchIOS
  38.           disabled={true}
  39.           value={false} />
  40.       </View>
  41.     );
  42.   },
  43. });
  44. var ColorSwitchExample = React.createClass({
  45.   getInitialState() {
  46.     return {
  47.       colorTrueSwitchIsOn: true,
  48.       colorFalseSwitchIsOn: false,
  49.     };
  50.   },
  51.   render() {
  52.     return (
  53.       <View>
  54.         <SwitchIOS
  55.           onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
  56.           onTintColor="#00ff00"
  57.           style={{marginBottom: 10}}
  58.           thumbTintColor="#0000ff"
  59.           tintColor="#ff0000"
  60.           value={this.state.colorFalseSwitchIsOn} />
  61.         <SwitchIOS
  62.           onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
  63.           onTintColor="#00ff00"
  64.           thumbTintColor="#0000ff"
  65.           tintColor="#ff0000"
  66.           value={this.state.colorTrueSwitchIsOn} />
  67.       </View>
  68.     );
  69.   },
  70. });
  71. var EventSwitchExample = React.createClass({
  72.   getInitialState() {
  73.     return {
  74.       eventSwitchIsOn: false,
  75.       eventSwitchRegressionIsOn: true,
  76.     };
  77.   },
  78.   render() {
  79.     return (
  80.       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  81.         <View>
  82.           <SwitchIOS
  83.             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
  84.             style={{marginBottom: 10}}
  85.             value={this.state.eventSwitchIsOn} />
  86.           <SwitchIOS
  87.             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
  88.             style={{marginBottom: 10}}
  89.             value={this.state.eventSwitchIsOn} />
  90.             <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
  91.         </View>
  92.         <View>
  93.           <SwitchIOS
  94.             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
  95.             style={{marginBottom: 10}}
  96.             value={this.state.eventSwitchRegressionIsOn} />
  97.           <SwitchIOS
  98.             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
  99.             style={{marginBottom: 10}}
  100.             value={this.state.eventSwitchRegressionIsOn} />
  101.           <Text>{this.state.eventSwitchRegressionIsOn ? "On" : "Off"}</Text>
  102.         </View>
  103.       </View>
  104.     );
  105.   }
  106. });
  107. exports.title = '<SwitchIOS>';
  108. exports.displayName = 'SwitchExample';
  109. exports.description = 'Native boolean input';
  110. exports.examples = [
  111.   {
  112.     title: 'Switches can be set to true or false',
  113.     render(): ReactElement { return <BasicSwitchExample />; }
  114.   },
  115.   {
  116.     title: 'Switches can be disabled',
  117.     render(): ReactElement { return <DisabledSwitchExample />; }
  118.   },
  119.   {
  120.     title: 'Custom colors can be provided',
  121.     render(): ReactElement { return <ColorSwitchExample />; }
  122.   },
  123.   {
  124.     title: 'Change events can be detected',
  125.     render(): ReactElement { return <EventSwitchExample />; }
  126.   },
  127.   {
  128.     title: 'Switches are controlled components',
  129.     render(): ReactElement { return <SwitchIOS />; }
  130.   }
  131. ];