npmchenwei111/app/common/views/BackgroundView.js

test1111

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

import React, { Component } from 'react'
import { Image, StyleSheet, View } from 'react-native'

/**
 * 背景视图
 */
class BackgroundView extends Component {

  /**
   * 属性说明
   *
   * 基本参数
   *
   * ...data 见_initData() //参数存放在data里
   *
   *
   *
   */

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

  //初始化state
  _initData () {
    this.data = {
      source: null,   //设置图片的source，用法与Image相同，可被props覆盖
      backgroundColor: '#00000000',//设置背景色，与source兼容，可被props覆盖
      ...this.props.data
    }
  }

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

  render () {
    return (
      this.data.source ? this._renderImageBackground() : this._renderViewBackground()
    )
  }

  _renderViewBackground () {
    return <View
      {...this.props}
      style={
        [styles.container, {
          backgroundColor: this.data.backgroundColor,
          resizeMode: 'cover'
        }, this.props.style]
      }>
      {this.props.children}
    </View>
  }

  _renderImageBackground () {

    return <Image
      source={this.data.source}
      {...this.props}
      style={[{
        backgroundColor: this.data.backgroundColor
      }, this.props.style]
      }>
      {this.props.children}
    </Image>
  }

}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default BackgroundView