npmchenwei111/app/public/authentication/views/IDCardPhotoItemLayout.js

test1111

import React, { Component } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import R from '../../../assets/R'
import { px2dp, sp } from '../../../utils/Px2dp'

class IDCardPhotoItemLayout extends Component {

  constructor (props) {
    super(props)
  }

  componentDidMount () {
  }

  render () {
    let btnData = this.props.btnData || {}
    let {img, defaultImg, enable} = btnData

    if (img && img.startsWith('/storage/')) {
      img = 'file://' + img
    }
    if (img && img.length > 3 && !img.startsWith('file://')) {
      img = 'data:image/jpeg;base64,' + btnData.img
    }
    return (
      <View style={styles.uploadItemWrap}>
        <View style={styles.help}>
          <Text style={{color: '#3887FD', fontSize: sp(16)}}>{btnData.title}</Text>
          <Text style={{fontSize: sp(14), color: '#a0a0a0', marginTop: px2dp(8)}}>{btnData.desc}</Text>
        </View>
        <TouchableOpacity
          activeOpacity={this.props.onPress && enable ? 0.7 : 1.0}
          onPress={
            enable && this.props.onPress
          }
          style={{alignItems: 'center'}}>
          {
            (img && img.length > 3) ? (
              <View style={styles.idPhotoWrap}>
                <Image style={styles.idPhotoContent} source={{uri: img}}/>
              </View>
            ) : (
              <View style={styles.idPhotoWrap}>
                <Image style={styles.idPhotoContent} source={defaultImg}/>
                <Image style={styles.takeBtn}
                       source={ enable ? R.img.ic_take_photo : R.img.ic_take_photo_gray}/>
              </View>
            )
          }
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  uploadItemWrap: {
    paddingBottom: px2dp(20),
    backgroundColor: '#fff'
  },
  help: {
    paddingHorizontal: px2dp(68),
    paddingVertical: px2dp(10)
  },
  idPhotoWrap: {
    width: px2dp(258),
    height: px2dp(160),
    position: 'relative'
  },
  idPhotoContent: {
    width: px2dp(258),
    height: px2dp(160)
  },
  takeBtn: {
    width: px2dp(60),
    height: px2dp(60),
    position: 'absolute',
    right: px2dp(10),
    top: px2dp(10)
  }
})

export default IDCardPhotoItemLayout