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. });