npmchenwei111/app/views/borrowdetail/CompanyDetailStrategyWindow.js

test1111

/**
 * Created by apple on 2017/7/14.
 */
import React, { Component } from 'react'
import { Image, Modal, StyleSheet, Text, View } from 'react-native'
import { px2dp } from '../../utils/Px2dp'
import PageIndicateText from './NumberPageIndicatorView'
import Utils from '../../utils/Utils'
import Device from '../../utils/Device'
import { IndicatorViewPager } from 'rn-viewpager'
import Button from '../../common/views/Button'

class CompanyDetailStrategyWindow extends Component {

  constructor (props) {
    super(props)
    console.log(props, 'StrategyView')
    this.initialPage = 0
    this.state = {
      visible: false,
      currentPage: 0,
    }
  }

  show () {
    this.initialPage = this.state.currentPage
    this.setState({
      visible: true
    })
  }

  dismiss () {
    this.setState({
      visible: false
    })
  }

  _calculateSize () {
    let marginLeftRight = px2dp(30)
    let minMarginTopBottom = px2dp(40)

    let picHeight = Device.height - minMarginTopBottom * 2 - px2dp(40 + 80 + 20)
    picHeight = picHeight < px2dp(430) ? picHeight : px2dp(430)
    let picWidth = Device.width - marginLeftRight * 2
    picWidth = picWidth < px2dp(330) ? picWidth : px2dp(330)

    let rate = 860 / 540.0
    if (picHeight > rate * picWidth) {
      picHeight = picWidth * rate
    } else {
      picWidth = picHeight / rate
    }

    marginLeftRight = (Device.width - picWidth) / 2

    return {
      marginLeft: marginLeftRight,
      marginRight: marginLeftRight,
      swiperHeight: picHeight,
      swiperWidth: Device.width,
      picHeight: picHeight,
      picWidth: picWidth,
    }
  }

  render () {

    const picList = Utils.avoidNullArray(this.props.raidersPicList)
    const size = this._calculateSize()

    const pageTxt = picList[this.state.currentPage] ? picList[this.state.currentPage].raidersContent : ''

    console.log('CompanyDetailStrategy', size)
    console.log('CompanyDetailStrategy', picList)

    const currentPage = this.state.currentPage

    return (
      <Modal
        animationType={'fade'}
        transparent={true}
        visible={this.state.visible}
        onRequestClose={() => {
          this.dismiss()
        }}>
        <View
          style={styles.darkBg}
        >
          <PageIndicateText
            style={{width: Device.width, marginLeft: size.marginLeft}}
            currentPage={this.state.currentPage + 1}
            totalPage={picList.length}/>
          <IndicatorViewPager
            initialPage={this.initialPage}
            style={{
              marginTop: px2dp(10),
              width: size.swiperWidth,
              height: size.swiperHeight,
            }}
            onPageSelected={(args) => {
              this.setState({
                currentPage: args.position
              })
            }}>
            {
              picList.map((item, index) => {
                return this._renderPage(item.raidersPic, size.picWidth, size.picHeight, index)
              })
            }
          </IndicatorViewPager>

          <Text
            numberOfLines={4}
            style={{
              color: '#ffffff',
              minHeight: px2dp(90),
              marginLeft: size.marginLeft,
              marginRight: size.marginRight,
              marginTop: px2dp(10)
            }}>
            {pageTxt}
          </Text>

          {[
            this._renderTopClick((Device.height - size.swiperHeight) / 2 - 10),
            this._renderBottomClick((Device.height - size.swiperHeight) / 2 - 10)
          ]}
        </View>
      </Modal>
    )
  }

  _renderPage (url, witdh, height, index) {
    return (
      <View
        key={index}
        style={{
          backgroundColor: '#00000000',
          alignItems: 'center'
        }}>
        <Image
          style={[styles.image, {
            width: witdh,
            height: height,
          }]}
          source={{uri: url}}
        />
      </View>
    )
  }

  _renderTopClick (height) {
    return (
      <Button
        style={{
          height: height,
          width: Device.width,
          position: 'absolute',
          top: 0
        }}
        onPress={() => {
          this.dismiss()
        }}
      />
    )
  }

  _renderBottomClick (height) {
    return (
      <Button
        style={{
          height: height,
          width: Device.width,
          position: 'absolute',
          bottom: 0
        }}
        onPress={() => {
          this.dismiss()
        }}
      />
    )
  }
}

const styles = StyleSheet.create({

  darkBg: {
    flex: 1,
    backgroundColor: '#00000080',
    flexDirection: 'column',
    paddingTop: px2dp(20),
    paddingBottom: px2dp(20),
    width: Device.width,
    justifyContent: 'center',
  },

  swiper: {
    marginTop: px2dp(10),
    marginBottom: px2dp(10),
    alignItems: 'center',
    backgroundColor: 'transparent',
  },

  text: {
    color: '#ffffff',
    height: px2dp(90),
    marginTop: px2dp(10),
    marginLeft: px2dp(55),
    marginRight: px2dp(55),
  },

  image: {
    backgroundColor: 'transparent',
    borderRadius: 8,
    resizeMode: Image.resizeMode.cover
  },

  loadingView: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
  loadingImage: {
    width: px2dp(100),
    height: px2dp(33),
  },

  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
})

export default CompanyDetailStrategyWindow