uatcomponent/src/container/recommendProductList/view/loading.js

公司内部使用自定义简单组件

/**
* 备注：加载中
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		ActivityIndicator,
		Animated,
} from 'react-native';

type Props = {
		style : ViewStyle,
};
type State = {
	scale : Animated.Value,
};

const WIDTH:Number = 60;

export class Loading extends Component <Props,State>{

		

		static defaultProps :Props = {
		}
		state:State={
			scale : new Animated.Value(1),
		}

		startAnimater = (isStart:Boolean)=>{
			Animated.timing(
				this.state.scale,
				{
					toValue:isStart?0.7:1,
					duration:200,
				}
			).start(()=>{
				this.startAnimater(!isStart);
			})
		}
		componentDidMount(){
			this.startAnimater(true);
		}

		render(){
				const {style} = this.props
				const {scale} = this.state;
				return (
						<View style={[styles.container,style]}>
								
								<Animated.View style={{
									width:WIDTH,
									height:WIDTH,
									borderRadius: WIDTH/2,
									transform:[
										{scaleX:scale},
										{scaleY:scale},
									],
									backgroundColor: 'rgb(20,156,152)',
									opacity:scale,
								}} />
								<Text style={styles.words}>正在获取数据</Text>
						</View>
				)
		}
}

const styles = StyleSheet.create({
	container:{width:'100%',height:200,alignItems:'center',justifyContent:'center',backgroundColor: 'white',},
	words:{marginTop:10,color:'#e1e1e1'},
})