efunbox-mobile-8/pages/components/Header.js

/** 
 * @param: uri String, username String,flowerNumber String, onPressCallback function
 *
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from "react-native";
import Dimensions from '../utils/dimensions'

/** 因没有图，所以Image先用颜色代替，有图可替换 */

type Props = {};

const styles = StyleSheet.create({
  wrapper: {
    width: Dimensions.width,
    height: 72,
    flex: 1,
    alignItems: "center",
    // backgroundColor: 'red',
    justifyContent: "center",
    flexDirection: "row"
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 50,
    marginLeft: 11,
    marginRight: 11
  },
  leftBox:{
    flex: 1,
    flexDirection: "column"
  },
  userName:{
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "left",
    textAlignVertical: "bottom",
    color: "#3f3f3f"
  },
  leftBottomRow: {
    flexDirection: "row",
    alignItems: "center"
  },
  flowerIcon:{
    marginLeft: 10,
    alignItems: "center",
    justifyContent: "center",
    width: 27,
    height: 14
  },
  flowerNumber:{
    textAlignVertical: "center",
    marginLeft: 3
  }
})

export default class Header extends Component<Props> {
  render() {
    return (
      <View
        style={styles.wrapper}
      >
        <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
          <Image
            source={this.props.uri ? {
              uri: this.props.uri
            } : require('../images/userInfo/default_photo.png')}
            style={styles.avatar}
          />
        </TouchableOpacity>
        <View
          style={styles.leftBox}
        >
          <View style={styles.leftBottomRow}>
            <Text
              style={styles.userName}
            >
              {this.props.isVisitor ? '新用户登录送7天VIP' : this.props.username}
            </Text>
            { 
              this.props.isVisitor ?
              null
              :
              <Image
                source={this.props.isVip ? require("../images/common/vip.png") : require("../images/common/novip.png")}
                style={styles.flowerIcon}
              />
            }
          </View>
          <TouchableOpacity activeOpacity={1} onPress={ () => this.click()}>
            <Text
              style={styles.flowerNumber}
            >
              {this.props.isVisitor ? '立即登录' : this.props.isVip ? '' : '开通VIP'}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
  click() {
    // alert(this.props.isVisitor)
    // this.props.nav('Loading')
    if (this.props.isVisitor) {
      this.props.nav('Login')
    } else if (!this.props.isVip) {
      this.props.nav('Buy')
    }
    
  }
}
/**

      使用方法
      <Header
          uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
          username="卡通笨笨熊"
          flowerNumber="123234"
          onPress={() => this.toNextPage("MainActivity")}
        />


 */