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:{
    width: 320,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "left",
    textAlignVertical: "bottom",
    color: "#3f3f3f"
  },
  leftBottomRow: {
    flexDirection: "row",
    alignItems: "center"
  },
  flowerIcon:{
    alignItems: "center",
    justifyContent: "center",
    width: 12,
    height: 12,
    backgroundColor: "blue"
  },
  flowerNumber:{
    textAlignVertical: "center",
    marginLeft: 3
  }
})

export default class Header extends Component<Props> {
  render() {
    return (
      <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
        <View
          style={styles.wrapper}
        >
          <Image
            source={{
              uri: this.props.uri
            }}
            style={styles.avatar}
          />
          <View
            style={styles.leftBox}
          >
            <Text
              style={styles.userName}
            >
              {this.props.username}
            </Text>
            <View
              style={styles.leftBottomRow}
            >
              <Image
                // source={{
                //   uri: this.props.uri
                // }}
                style={styles.flowerIcon}
              />
              <Text
                style={styles.flowerNumber}
              >
                {this.props.flowerNumber}
              </Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}
/**

      使用方法
      <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")}
        />


 */