SwitchAndroid

標(biāo)準(zhǔn)的 Android 雙態(tài)切換組件

屬性

disable bool

如果為 true，則該組件不能進(jìn)行交互。

onValueChange function

當(dāng)值發(fā)生變化時(shí)調(diào)用新的值。

testID string

用于在端到端測(cè)試中查找此視圖。

value bool

開(kāi)關(guān)的布爾值。

其他屬性：

android:showText：設(shè)置on/off的時(shí)候是否顯示文字,boolean 

android:splitTrack：是否設(shè)置一個(gè)間隙，讓滑塊與底部圖片分隔,boolean 

android:switchMinWidth：設(shè)置開(kāi)關(guān)的最小寬度 

android:switchPadding：設(shè)置滑塊內(nèi)文字的間隔 

android:switchTextAppearance：設(shè)置開(kāi)關(guān)的文字外觀，暫時(shí)沒(méi)發(fā)現(xiàn)有什么用… 

android:textOff：按鈕沒(méi)有被選中時(shí)顯示的文字 

android:textOn：按鈕被選中時(shí)顯示的文字 

android:textStyle：文字風(fēng)格，粗體，斜體寫(xiě)劃線(xiàn)那些 

android:track：底部的圖片 

android:thumb：滑塊的圖片 

例子

    'use strict';

    var React = require('React');

    var SwitchAndroid = require('SwitchAndroid');
    var Text = require('Text');
    var UIExplorerBlock = require('UIExplorerBlock');
    var UIExplorerPage = require('UIExplorerPage');

    var SwitchAndroidExample = React.createClass({
      statics: {
        title: '<SwitchAndroid>',
        description: 'Standard Android two-state toggle component'
      },

      getInitialState : function() {        return {
          trueSwitchIsOn: true,
          falseSwitchIsOn: false,
          colorTrueSwitchIsOn: true,
          colorFalseSwitchIsOn: false,
          eventSwitchIsOn: false,
        };
      },

      render: function() {        return (
          <UIExplorerPage title="<SwitchAndroid>">
            <UIExplorerBlock title="Switches can be set to true or false">
              <SwitchAndroid
                onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
                style={{marginBottom: 10}}
                value={this.state.falseSwitchIsOn} />
              <SwitchAndroid
                onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
                value={this.state.trueSwitchIsOn} />
            </UIExplorerBlock>
            <UIExplorerBlock title="Switches can be disabled">
              <SwitchAndroid
                disabled={true}
                style={{marginBottom: 10}}
                value={true} />
              <SwitchAndroid
                disabled={true}
                value={false} />
           </UIExplorerBlock>
           <UIExplorerBlock title="Change events can be detected">
             <SwitchAndroid
               onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
               style={{marginBottom: 10}}
               value={this.state.eventSwitchIsOn} />
             <SwitchAndroid
               onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
               style={{marginBottom: 10}}
               value={this.state.eventSwitchIsOn} />
             <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
          </UIExplorerBlock>
          <UIExplorerBlock title="Switches are controlled components">
            <SwitchAndroid />
            <SwitchAndroid value={true} />
          </UIExplorerBlock>
        </UIExplorerPage>
       );
     }
    });

    module.exports = SwitchAndroidExample;