1.提交头部组件

pages/components/Header.js

@@ -0,0 +1,128 @@
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  Button,
+  Dimensions,
+  DeviceEventEmitter
+} from "react-native";
+
+const instructions = Platform.select({
+  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+  android:
+    "Double tap R on your keyboard to reload,\n" +
+    "Shake or press menu button for dev menu"
+});
+
+type Props = {};
+var width = Dimensions.get("window").width;
+var height = Dimensions.get("window").height;
+export default class Header extends Component<Props> {
+  render() {
+    return (
+      <TouchableOpacity onPress={this.props.onPress}>
+        <View
+          style={{
+            width: this.props.width,
+            height: this.props.height,
+            flexDirection: "column"
+          }}
+        >
+          <View style={{ flex: 1 }} />
+          <View
+            style={{
+              flex: 1,
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "row"
+            }}
+          >
+            <Image
+              source={{
+                uri: this.props.uri
+              }}
+              style={{
+                width: 60,
+                height: 60,
+                borderRadius: 50
+              }}
+            />
+            <View
+              style={{
+                flex: 0.1
+              }}
+            />
+            <View
+              style={{
+                flex: 10,
+                width: "100%",
+                height: "100%",
+                flexDirection: "column"
+              }}
+            >
+              <Text
+                style={{
+                  width: "100%",
+                  height: "50%",
+                  fontSize: 18,
+                  fontWeight: "bold",
+                  textAlign: "left",
+                  textAlignVertical: "bottom"
+                }}
+              >
+                {this.props.username}
+              </Text>
+              <View
+                style={{
+                  flex: 2,
+                  flexDirection: "row"
+                }}
+              >
+                <Image
+                  source={{
+                    uri: this.props.uri
+                  }}
+                  style={{
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20
+                  }}
+                />
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlignVertical: "center",
+                    marginLeft: 2
+                  }}
+                >
+                  {this.props.flowerNumber}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View style={{ flex: 1 }} />
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+/**
+
+      使用方法
+      <Header
+          uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
+          width={400}
+          height={150}
+          username="卡通笨笨熊"
+          flowerNumber="123234"
+          onPress={() => this.toNextPage("MainActivity")}
+        />
+
+
+ */