SwitchAndroid

标准的 Android 双态切换组件

属性

disable bool

如果为 true，则该组件不能进行交互。

onValueChange function

当值发生变化时调用新的值。

testID string

用于在端到端测试中查找此视图。

value bool

开关的布尔值。

例子

1. 'use strict';

3. var React = require('React');

5. var SwitchAndroid = require('SwitchAndroid');
6. var Text = require('Text');
7. var UIExplorerBlock = require('UIExplorerBlock');
8. var UIExplorerPage = require('UIExplorerPage');

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

16. getInitialState : function() {
17. return {
18. trueSwitchIsOn: true,
19. falseSwitchIsOn: false,
20. colorTrueSwitchIsOn: true,
21. colorFalseSwitchIsOn: false,
22. eventSwitchIsOn: false,
23. };
24. },

26. render: function() {
27. return (
28. <UIExplorerPage title="<SwitchAndroid>">
29. <UIExplorerBlock title="Switches can be set to true or false">
30. <SwitchAndroid
31. onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
32. style={{marginBottom: 10}}
33. value={this.state.falseSwitchIsOn} />
34. <SwitchAndroid
35. onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
36. value={this.state.trueSwitchIsOn} />
37. </UIExplorerBlock>
38. <UIExplorerBlock title="Switches can be disabled">
39. <SwitchAndroid
40. disabled={true}
41. style={{marginBottom: 10}}
42. value={true} />
43. <SwitchAndroid
44. disabled={true}
45. value={false} />
46. </UIExplorerBlock>
47. <UIExplorerBlock title="Change events can be detected">
48. <SwitchAndroid
49. onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
50. style={{marginBottom: 10}}
51. value={this.state.eventSwitchIsOn} />
52. <SwitchAndroid
53. onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
54. style={{marginBottom: 10}}
55. value={this.state.eventSwitchIsOn} />
56. <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
57. </UIExplorerBlock>
58. <UIExplorerBlock title="Switches are controlled components">
59. <SwitchAndroid />
60. <SwitchAndroid value={true} />
61. </UIExplorerBlock>
62. </UIExplorerPage>
63. );
64. }
65. });

67. module.exports = SwitchAndroidExample;