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

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

/**
* 备注：推荐商品列表底部状态视图
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		ActivityIndicator,
} from 'react-native';
import { FooterStatus, } from "../../../model";
type Props = {
		style : ViewStyle,
		type  : FooterStatus,
};
type State = {};

export class Footer extends Component <Props,State>{
		static defaultProps :Props = {
			type : 'noMore',
		}
		state:State={
		}

		/**一般情况 */
		normalRender = ()=>{
			return (
				<View style={styles.container}>
						<Text style={styles.txt}>点击加载更多</Text>
				</View>
			)
		}

		/**没有更多 */
		noMoreRender = ()=>{
			return (
				<View style={styles.container}>
						<Text style={styles.txt}>没有更多推荐商品</Text>
				</View>
			)
		}

		/**加载出错 */
		failRender = ()=>{
			return (
				<View style={styles.container}>
						<Text style={styles.txt}>获取更多推荐出错{'\n'}点击加载重试</Text>
				</View>
			)
		}

		/**正在加载更多 */
		loadMoreRender = ()=>{
			return (
				<View style={styles.container}>
						<ActivityIndicator animating={true}/>
						<Text style={styles.txt}>点击加载更多</Text>
				</View>
			)
		}


		bodyRender = (type:FooterStatus):React.ReactElement=>{
			switch(type){
				case 'noMore':return this.noMoreRender();
				case 'normal':return this.normalRender();
				case 'loading':return this.loadMoreRender();
				case 'loadFail':return this.failRender();
				case 'hide':
				default :return <View />
			}
		}

		render(){
				const {style,type} = this.props
				return (
						<View style={[styles.container,style]}>
								{this.bodyRender(type)}
						</View>
				)
		}
}

const styles = StyleSheet.create({
		container:{},
		container : {width:'100%',height:50,alignItems:'center',justifyContent:'center',flexDirection:'row'},
		txt:{color:'gray'},
})