环境
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>
)
}
}
看效果图
使用封装组件的效果图
