npmchenwei111/app/views/bar/PopActionsWindow.js

test1111

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

import React, { Component } from 'react'
import { DeviceEventEmitter, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import R from '../../assets/R'
import { px, sp } from '../../utils/Px2dp'
import Device from '../../utils/Device'
import BarEvent from '../../bar/BarEvent'
import Button from '../../common/views/Button'

const PropTypes = require('prop-types')

class PopActionsWindow extends Component {

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

  //初始化state
  _initData () {
    this.state = {
      visible: false,
    }
    this.data = {
      actions: [],
      ...this.props.data
    }
  }

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

  show () {
    this.setState({
      visible: true
    })
  }

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

  render () {

    console.log('PopActionsView', this.data)
    return (
      <Modal
        animationType={'fade'}
        transparent={true}
        visible={this.state.visible}
        onRequestClose={() => {
          this.dismiss()
        }}>
        <Button
          style={[styles.container, this.props.style]}
          onPress={() => {
            this.dismiss()
          }}>
          <View style={styles.view}>
            {
              this._readerList()
            }
          </View>
        </Button>
      </Modal>
    )
  }

  /**
   * 渲染actions
   * @returns {Array}
   * @private
   */
  _readerList () {
    let arr = []
    for (let item of  this.data.actions) {
      if (!item.hidden)
        arr.push(this._renderItem(item, arr.length))
    }
    return arr
  }

  _renderItem (item, i) {
    return <TouchableOpacity
      key={i}
      activeOpacity={0.7}
      onPress={() => {
        DeviceEventEmitter.emit(BarEvent.EVENT, item)
        this.dismiss()
      }}>
      <View style={styles.item}>
        <Image
          source={item.icon}
          style={{resizeMode: 'contain', marginLeft: px(12), width: px(16), height: px(16)}}
        />
        <Text style={{
          marginLeft: px(6), fontSize: sp(14), color: '#666666'
        }}>{item.text}</Text>

      </View>
    </TouchableOpacity>

  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    width: Device.width,
  },
  view: {
    marginRight: px(16),
    marginTop: Device.withStatusBar(30),
    backgroundColor: R.color.white,
    flexDirection: 'column',
    borderRadius: px(6),
    paddingTop: px(12),
    paddingBottom: px(12),
    elevation: px(10),
    shadowOpacity: 0.38,
    shadowRadius: px(6),
    shadowOffset: {h: 0, w: 0},
  },
  item: {
    width: px(100),
    backgroundColor: R.color.white,
    flexDirection: 'row',
    alignItems: 'center',
    padding: px(8)
  }
})
export default PopActionsWindow