iOS 開關(guān)

使用 SwitchIOS 在 iOS 上呈現(xiàn)出布爾型的輸入。這是一個控件組件，所以為了更新組件，你必須使用 onValueChange回調(diào)并且更新值value。否則的話用戶的改變會被立即反映到 props.value ，這是一個真理。

屬性

Edit on GitHub

disabled 布爾型

如果值為真，那么用戶將不能切換開關(guān)。默認值為假。

onTintColor 字符串型

當開關(guān)打開時候的背景顏色。

onValueChange 函數(shù)

當用戶切換開關(guān)時，調(diào)用回調(diào)函數(shù)。

thumbTintColor 字符串型

開關(guān)按鈕的背景顏色。

tintColor 字符串型

當開關(guān)關(guān)閉后的背景顏色。

value 布爾型

開關(guān)的值，如果為真，開關(guān)會打開。默認值為假。

例子

Edit on GitHub

'use strict';var React = require('react-native');var {
  SwitchIOS,
  Text,
  View
} = React;var BasicSwitchExample = React.createClass({
  getInitialState() {    return {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    };
  },
  render() {    return (
      <View>
        <SwitchIOS
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom: 10}}          value={this.state.falseSwitchIsOn} />
        <SwitchIOS
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}          value={this.state.trueSwitchIsOn} />
      </View>
    );
  }
});var DisabledSwitchExample = React.createClass({
  render() {    return (
      <View>
        <SwitchIOS
          disabled={true}
          style={{marginBottom: 10}}          value={true} />
        <SwitchIOS
          disabled={true}          value={false} />
      </View>
    );
  },
});var ColorSwitchExample = React.createClass({
  getInitialState() {    return {
      colorTrueSwitchIsOn: true,
      colorFalseSwitchIsOn: false,
    };
  },
  render() {    return (
      <View>
        <SwitchIOS
          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
          onTintColor="#00ff00"
          style={{marginBottom: 10}}
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorFalseSwitchIsOn} />
        <SwitchIOS
          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
          onTintColor="#00ff00"
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorTrueSwitchIsOn} />
      </View>
    );
  },
});var EventSwitchExample = React.createClass({
  getInitialState() {    return {
      eventSwitchIsOn: false,
      eventSwitchRegressionIsOn: true,
    };
  },
  render() {    return (
      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <View>
          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}            value={this.state.eventSwitchIsOn} />
          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}            value={this.state.eventSwitchIsOn} />
            <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
        </View>
        <View>
          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}            value={this.state.eventSwitchRegressionIsOn} />
          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}            value={this.state.eventSwitchRegressionIsOn} />
          <Text>{this.state.eventSwitchRegressionIsOn ? "On" : "Off"}</Text>
        </View>
      </View>
    );
  }
});
exports.title = '<SwitchIOS>';
exports.displayName = 'SwitchExample';
exports.description = 'Native boolean input';
exports.examples = [
  {
    title: 'Switches can be set to true or false',
    render(): ReactElement { return <BasicSwitchExample />; }
  },
  {
    title: 'Switches can be disabled',
    render(): ReactElement { return <DisabledSwitchExample />; }
  },
  {
    title: 'Custom colors can be provided',
    render(): ReactElement { return <ColorSwitchExample />; }
  },
  {
    title: 'Change events can be detected',
    render(): ReactElement { return <EventSwitchExample />; }
  },
  {
    title: 'Switches are controlled components',
    render(): ReactElement { return <SwitchIOS />; }
  }
];