elephant-com/Header.js

the general component for elephant washing shoes

import React, { Component } from 'react';
import { Platform, TouchableOpacity, View, Text, StatusBar } from 'react-native';
import { Icon } from 'antd-mobile';

const statusHeight = Platform.OS === 'ios' ? 20 : 24;
const styles = {
  box: {
    height: 48 + statusHeight,
    backgroundColor: '#00abea',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: statusHeight,
  },
  back: { flex: 1 },
  title: {
    color: '#fff',
    fontSize: 18,
    alignSelf: 'center',
  },
  titleView: {
    justifyContent: 'center',
    flex: 1,
    alignContent: 'center',
  },
  rightBox: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    flex: 1 },
};

/* eslint-disable no-mixed-operators */
export default class Header extends Component {
  render() {
    const { title, children, navigation } = this.props;
    return (<View style={styles.box}>
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.1)" />
      <TouchableOpacity onPress={() => navigation.goBack()} style={styles.back}>
        <Icon type="left" color="#fff" size={20} />

      </TouchableOpacity>
      <View style={styles.titleView}>
        <Text style={styles.title}>
          {title || navigation.state.params && navigation.state.params.title || '未设置标题'}
        </Text>
      </View>

      <View style={styles.rightBox}>
        {children}
      </View>
    </View>);
  }
}