react-native之ActivityIndicator组件

环境

react-native 0.57
iphone X模拟器测试

以后会补全安卓的测试

一、官方例子及效果图(官方ActivityIndicator)

import React, {
  Component
} from 'react'
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  View,
} from 'react-native'
export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})

效果图

二、Props介绍

animating

是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。

类型	必填
bool	否

---

color

滚轮的前景颜色（默认为灰色）。

类型	必填
color	否

---

size

指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。

类型	必填
enum('small', 'large'), number	否

---

hidesWhenStopped

在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。

类型	必填	平台
bool	否	iOS

三、尝试看源码

export interface ActivityIndicatorProps extends ViewProps {
    /**
     * Whether to show the indicator (true, the default) or hide it (false).
     */
    animating?: boolean;

    /**
     * The foreground color of the spinner (default is gray).
     */
    color?: string;

    /**
     * Whether the indicator should hide when not animating (true by default).
     */
    hidesWhenStopped?: boolean;

    /**
     * Size of the indicator.
     * Small has a height of 20, large has a height of 36.
     *
     * enum('small', 'large')
     */
    size?: number | "small" | "large";

    style?: StyleProp<ViewStyle>;
}

declare class ActivityIndicatorComponent extends React.Component<ActivityIndicatorProps> {}
declare const ActivityIndicatorBase: Constructor<NativeMethodsMixin> & typeof ActivityIndicatorComponent;
export class ActivityIndicator extends ActivityIndicatorBase {}

以上是官方里面的代码，这里面都只是Props而已，真正怎么实现的，由于我不会原生开发，所以就不再深究了，如果以后步入了，就一篇记录下来。

四、封装基于ActivityIndicator组件的Loading组件

组件介绍：
这个组件也就是在这个组件的下方加一行文字，以此来达到提示的作用，这个组件并不能通过npm下载到自己的项目中，如果看到的有需求，那么可以自己写一个，没有时间的话可以使用对应的插件和复制我写的，如果在使用我的过程中遇到bug，比如说跟其他组件出现不兼容，可以留言，我们一块解决。
需求来源：
在登录过程中，有时候由于网络不好并不能立即登录成功，需要等待后台的反馈；还有就是保存数据到本地的时候，这个过程也是异步的，有时候我们需要保存成功以后告诉使用者，而在使用者按下按钮到保存成功需要时间。
准备工作：
需要安装prop-types 库；安装方法，在自己的项目下输入：

npm install --save prop-types

然后在封装的组件里面导入：

import PropTypes from 'prop-types';

之所以要导入这个组件，因为随着React的升级，现在React官方不支持PropTypes，需要安装这个库才能成功。
组件代码

import React,{Component} from 'react'
import {
    View,
    ActivityIndicator,
    Text,
    Dimensions,
    Platform,
    StatusBar
} from 'react-native'
import PropTypes from 'prop-types';
export default class Loading extends Component{
    
    static defaultProps = {
        animating:true,
        hidesWhenStopped:true,
        size:'small',
        color:'#999'
    };
    static propTypes = {
        // 整个Loading的样式
        loadingStyle:PropTypes.object,
        //加载器的颜色
        color:PropTypes.string,
        //加载器的大小，只有两个值：small|large，以下三个跟ActivityIndicator的样式相同
        size:PropTypes.string,
        animating:PropTypes.bool,
        hidesWhenStopped:PropTypes.bool,
        //文本的样式，也就是下面显示字体的样式
        textStyle:PropTypes.object,
        //要显示的文本，这个是必要值，不能为空
        text:PropTypes.string.isRequired
    }

    render() {
        let {loadingStyle,color,size,animating,hidesWhenStopped,textStyle,text} = this.props
        let {width,height} = Dimensions.get('screen')
        if (Platform.OS === 'android') {
            height += StatusBar.currentHeight
        }
        return (
            <View style={{flex:1,alignItems:'center',position:'absolute',justifyContent:'center',width:width,height:height,...loadingStyle}}>
                <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} color={color} size={size} />
                <Text style={{fontSize:12,marginTop:5,...textStyle}}>{text}</Text>
            </View>
        )
    }
}

写测试代码

import React, {
  Component
} from 'react'
import {
  View,
} from 'react-native'
import Loading from './component/Loading'
export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <Loading text={'加载中'} color={'red'} />
      </View>
    )
  }
}

看效果图

使用封装组件的效果图