npmchenwei111/app/bar/ActionBar.js

test1111

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

import React, { Component } from 'react'
import { BackHandler, DeviceEventEmitter, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import BarStyles from './BarStyles'
import { px } from '../utils/Px2dp'
import Device from '../utils/Device'
import BarEvent from './BarEvent'
import Display from '../common/views/Display'

import YTInvokeBackKey from '../../src/native/YTInvokeBackKey'
import NavigationUtils from '../utils/NavigationUtils'
import { ClickUtils } from '../utils/ClickUtils'
import ActionBarManager from '../manager/ActionBarManager'
import Sensors from '../constant/Sensors'

const PropTypes = require('prop-types')

class ActionBar extends Component {

  //设置必须属性的检测
  static propTypes = {
    nav: PropTypes.object.isRequired,
    screenProps: PropTypes.object
  }

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

  /**
   * 初始化data
   * @private
   */
  _initData () {
    this.data = this._getDefault(this.props)
  }

  //适配IOS是同一个ActionBar控件，所以每次都得用初始值更新data
  _getDefault (props) {
    return {
      title: '',
      hideBack: false,
      style: 'default',  //white|black|transparent
      actions: [], // [{icon: R.img.carrier_logo, event: BarEvent.MORE,onPress}]
      showKefu: false,
      sensors: {},
      sysBack: NavigationUtils.sysBack(props.nav, props.screenProps),
      ...props.data
    }
  }

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

  //触发返回按钮
  _goBack () {
    console.log('back', this.data)
    this.data.sysBack ? YTInvokeBackKey.back() : this.props.nav.goBack()
  }

  _backHandle = () => {
    console.log('AndroidBackManager backCalled ', this.data.sysBack, this.props.nav)

    if (this.data.sysBack && ActionBarManager.isTop(this)) {
      YTInvokeBackKey.back()
    }

    return false
  }

  componentDidMount () {
    ActionBarManager.pushBar(this)
    console.log('ActionBar componentDidMount')
    BackHandler.addEventListener('hardwareBackPress', this._backHandle)
  }

  componentWillUnmount () {
    ActionBarManager.popBar()
    console.log('ActionBar componentWillUnmount')
    BackHandler.removeEventListener('hardwareBackPress', this._backHandle)
  }

  render () {

    const barStyle = BarStyles.get(this.data.style)

    return (
      <View style={[{flexDirection: 'column', alignItems: 'center'}, this.props.style]}>
        <View
          style={{
            height: Device.withStatusBar(0),
            width: Device.width,
            backgroundColor: barStyle === BarStyles.white ? '#cccccc' : barStyle.backgroundColor
          }}/>

        <View style={[{backgroundColor: barStyle.backgroundColor}, styles.container]}>

          <View style={[styles.leftActions, {
            position: 'absolute',
            left: 0,
          }]}>
            {
              this._renderBackItem()
            }
          </View>

          <Text style={{color: barStyle.titleColor, fontSize: barStyle.titleSize}}>
            {this.data.title}
          </Text>

          <View style={[styles.rightActions, {
            position: 'absolute', right: 0,
          }]}>
            {
              this._renderActionItem()
            }
          </View>

          <Display visible={barStyle.line}>
            <View style={{
              position: 'absolute', bottom: 0,
              height: px(0.5),
              width: Device.width,
              backgroundColor: barStyle.lineColor,
            }}/>
          </Display>
        </View>
      </View>
    )
  }

  /**
   * 渲染返回按钮
   * @returns {XML}
   * @private
   */
  _renderBackItem () {
    const barStyle = BarStyles.get(this.data.style)
    return <Display visible={!this.data.hideBack}>
      <TouchableOpacity style={styles.iconPress}
                        onPress={() => {
                          if (this.props.sensors && this.props.sensors.back) {
                            Sensors.analyseContent(this.props.sensors.back)
                          }
                          this._goBack()
                        }}>
        <Image style={{resizeMode: 'contain', width: px(23), height: px(23)}} source={barStyle.backSrc}/>
      </TouchableOpacity>
    </Display>
  }

  /**
   * 渲染右侧的布局
   * @returns {Array}
   * @private
   */
  _renderActionItem () {
    let itemAry = []
    this.data.actions = this.data.actions || []
    for (let i = 0; i < this.data.actions.length; i++) {
      let action = this.data.actions[i]
      itemAry.push(
        <TouchableOpacity key={i}
                          style={[styles.iconPress]}
                          activeOpacity={0.7}
                          onPress={ClickUtils.onPress(() => {
                            if (typeof action.onPress === 'function') {
                              action.onPress()
                            }
                            if (action.event) {
                              DeviceEventEmitter.emit(BarEvent.EVENT, action)
                            }
                          })}>
          <Image style={{resizeMode: 'contain', width: px(23), height: px(23)}} source={action.icon}/>
        </TouchableOpacity>
      )
    }

    // todo 隐藏客服
    // if (this.data.showKefu) {
    //   itemAry.push(
    //     <TouchableOpacity key={itemAry.length}
    //                       style={[styles.iconPress]}
    //                       activeOpacity={0.7}
    //                       onPress={ClickUtils.onPress(() => {
    //                         if (this.props.sensors && this.props.sensors.kefu) {
    //                           Sensors.analyseContent(this.props.sensors.kefu)
    //                         }
    //                         YTBorrowUtils.toChatKeFu()
    //                       })}>
    //       <Text style={{fontSize: sp(14), color: '#fff'}}>{'在线客服'}</Text>
    //     </TouchableOpacity>
    //   )
    // }

    return itemAry
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',     //row,column
    justifyContent: 'center', //主轴方向
    alignItems: 'center', //垂直主轴方向
    height: Device.statusBarPx,
    width: Device.width,
  },

  iconPress: {
    padding: px(8),
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },

  leftActions: {
    paddingLeft: px(5),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start'
  },

  rightActions: {
    paddingRight: px(8),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end'
  }
})

export default ActionBar