npmchenwei111/app/common/views/StatusView.js

test1111

/**
 * Created by chenwei on 2017/7/19.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import R from '../../assets/R'
import { px } from '../../utils/Px2dp'
import { ClickUtils } from '../../utils/ClickUtils'
import ActionBar from '../../bar/ActionBar'
/**
 * 加载状态判断页面
 */
class StatusView extends Component {

  /**
   * 属性说明
   *
   * 基本参数
   *
   * ...data  //见data
   *
   *
   */


  static DATA_FAIL = -1     //失败状态，显示数据出错页面
  static DATA_EMPTY = -2     //失败状态，数据为空
  static DATA_SUCCESS = 1   //成功状态，正常显示包裹的页面
  static DATA_LOADING = 0   //加载状态，显示加载页面（目前为空）

  static EMPTY_TXT_NET_ERROR = '数据加载出错\n请检查网络后重试'
  static EMPTY_TXT_DATA_EMPTY = '数据为空'

  constructor (props) {
    super(props)
    this._initData()
  }

  //初始化state
  _initData () {
    this.data = {
      empty_txt: StatusView.EMPTY_TXT_DATA_EMPTY, //只有当DATA_EMPTY状态时有效
      status: StatusView.DATA_LOADING,
      saveStatus: true,  //是否保存加载成功的状态，重刷时将不再显示刷新页面
      showActionBar: false,
      nav: null,
      screenProps: null,
      title: '',
      ...this.props.data
    }
  }

  //@Override 重写方法
  componentWillReceiveProps (nextProps) {
    this.data = {...this.data, ...nextProps.data}
  }

  _renderLoading () {
    return (
      <View style={{
        alignItems: 'center',
        flexDirection: 'column',
        flex: 1,
        backgroundColor: R.color.bg_color
      }}>
        {
          this.data.showActionBar && this.data.nav &&
          <ActionBar nav={this.data.nav}
                     screenProps={this.data.screenProps}
                     data={{
                       title: this.data.title
                     }}
          />
        }
        <View style={styles.container_center}>
          <Image style={styles.img_loading} source={R.img.gif_loading}/>
          <Text style={styles.status_txt}>{'加载中'}</Text>
        </View>
      </View>
    )
  }

  /**
   * 失败页面
   * @returns {XML}
   * @private
   */
  _renderFail () {

    const failTxt = this.data.status === StatusView.DATA_EMPTY ? this.data.empty_txt : StatusView.EMPTY_TXT_NET_ERROR

    return (
      <View style={{
        alignItems: 'center',
        flexDirection: 'column',
        flex: 1,
        backgroundColor: R.color.bg_color
      }}>
        {
          this.data.showActionBar && this.data.nav &&
          <ActionBar nav={this.data.nav}
                     screenProps={this.data.screenProps}
                     data={{
                       title: this.data.title
                     }}
          />
        }
        <TouchableWithoutFeedback
          onPress={ClickUtils.onPress(this.props.onPress)}>
          <View style={styles.container_center}>
            <Image style={styles.img_empty} source={R.img.ic_empty_page_img}/>
            <Text style={styles.status_txt}>{failTxt || '数据出错'}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    )
  }

  render () {
    if (this.data.status === StatusView.DATA_SUCCESS
      || (this.data.saveStatus && this.lastStatus === StatusView.DATA_SUCCESS)) {
      this.lastStatus = StatusView.DATA_SUCCESS
      return this.props.children
    }

    if (this.data.status === StatusView.DATA_LOADING) {
      this.lastStatus = StatusView.DATA_LOADING
      return this._renderLoading()
    }

    if (this.data.status === StatusView.DATA_EMPTY) {
      this.lastStatus = StatusView.DATA_EMPTY
      this.data.empty_txt = this.data.empty_txt || StatusView.EMPTY_TXT_DATA_EMPTY
      return this._renderFail()
    }

    this.lastStatus = StatusView.DATA_FAIL
    return this._renderFail()
  }

}

const styles = StyleSheet.create({
  container_center: {
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    flex: 1,
    backgroundColor: R.color.bg_color
  },
  img_empty: {
    width: px(73), height: px(73), marginTop: px(-100), marginBottom: px(10), resizeMode: 'contain'
  },
  img_loading: {
    height: px(40), width: px(100)
  },
  status_txt: {
    fontSize: 14,
    color: '#999999',
    textAlign: 'center',
    lineHeight: 24,
  }
})

export default StatusView