iOS 活动指示器

Props

Edit on GitHub

animating bool 型

显示指示器(true，默认的)还是隐藏它(false)。

color 字符串型

Spinner 的前景颜色(默认为灰色)。

size 枚举型(“小”，“大”)

指示器的大小。小的高度为 20，大的高度为 36。

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var {
4. ActivityIndicatorIOS,
5. StyleSheet,
6. View,
7. } = React;
8. var TimerMixin = require('react-timer-mixin');
9. var ToggleAnimatingActivityIndicator = React.createClass({
10. mixins: [TimerMixin],
11. getInitialState: function() {
12. return {
13. animating: true,
14. };
15. },
16. setToggleTimeout: function() {
17. this.setTimeout(
18. () => {
19. this.setState({animating: !this.state.animating});
20. this.setToggleTimeout();
21. },
22. 1200
23. );
24. },
25. componentDidMount: function() {
26. this.setToggleTimeout();
27. },
28. render: function() {
29. return (
30. <ActivityIndicatorIOS
31. animating={this.state.animating}
32. style={[styles.centering, {height: 80}]}
33. size="large"
34. />
35. );
36. }
37. });
38. exports.framework = 'React';
39. exports.title = '<ActivityIndicatorIOS>';
40. exports.description = 'Animated loading indicators.';
41. exports.examples = [
42. {
43. title: 'Default (small, white)',
44. render: function() {
45. return (
46. <ActivityIndicatorIOS
47. style={[styles.centering, styles.gray, {height: 40}]}
48. color="white"
49. />
50. );
51. }
52. },
53. {
54. title: 'Gray',
55. render: function() {
56. return (
57. <View>
58. <ActivityIndicatorIOS
59. style={[styles.centering, {height: 40}]}
60. />
61. <ActivityIndicatorIOS
62. style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
63. />
64. </View>
65. );
66. }
67. },
68. {
69. title: 'Custom colors',
70. render: function() {
71. return (
72. <View style={styles.horizontal}>
73. <ActivityIndicatorIOS color="#0000ff" />
74. <ActivityIndicatorIOS color="#aa00aa" />
75. <ActivityIndicatorIOS color="#aa3300" />
76. <ActivityIndicatorIOS color="#00aa00" />
77. </View>
78. );
79. }
80. },
81. {
82. title: 'Large',
83. render: function() {
84. return (
85. <ActivityIndicatorIOS
86. style={[styles.centering, styles.gray, {height: 80}]}
87. color="white"
88. size="large"
89. />
90. );
91. }
92. },
93. {
94. title: 'Large, custom colors',
95. render: function() {
96. return (
97. <View style={styles.horizontal}>
98. <ActivityIndicatorIOS
99. size="large"
100. color="#0000ff"
101. />
102. <ActivityIndicatorIOS
103. size="large"
104. color="#aa00aa"
105. />
106. <ActivityIndicatorIOS
107. size="large"
108. color="#aa3300"
109. />
110. <ActivityIndicatorIOS
111. size="large"
112. color="#00aa00"
113. />
114. </View>
115. );
116. }
117. },
118. {
119. title: 'Start/stop',
120. render: function(): ReactElement {
121. return <ToggleAnimatingActivityIndicator />;
122. }
123. },
124. ];
125. var styles = StyleSheet.create({
126. centering: {
127. alignItems: 'center',
128. justifyContent: 'center',
129. },
130. gray: {
131. backgroundColor: '#cccccc',
132. },
133. horizontal: {
134. flexDirection: 'row',
135. justifyContent: 'space-around',
136. },
137. });