'Header组件样式分离，jsx结构简化'

package-lock.json

@@ -2832,13 +2832,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2851,18 +2849,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2965,8 +2960,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2976,7 +2970,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2989,20 +2982,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3019,7 +3009,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3092,8 +3081,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3103,7 +3091,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3209,7 +3196,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

pages/components/Header.js

@@ -1,114 +1,105 @@
+/** 
+ * @param: uri String, username String,flowerNumber String, onPressCallback function
+ *
+ */
+
 import React, { Component } from "react";
 import {
-  Platform,
   StyleSheet,
   Text,
   View,
   Image,
   TouchableOpacity,
-  ImageBackground,
-  Button,
-  Dimensions,
-  DeviceEventEmitter
 } from "react-native";
+import Dimensions from '../utils/dimensions'
 
 /** 因没有图，所以Image先用颜色代替，有图可替换 */
-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;
+
+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={{
-            width: this.props.width,
-            height: this.props.height,
-            flexDirection: "column"
-          }}
+          style={styles.wrapper}
         >
-          <View style={{ flex: 1 }} />
-          <View
-            style={{
-              flex: 1,
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "row"
+          <Image
+            source={{
+              uri: this.props.uri
             }}
+            style={styles.avatar}
+          />
+          <View
+            style={styles.leftBox}
           >
-            <Image
-              source={{
-                uri: this.props.uri
-              }}
-              style={{
-                width: 60,
-                height: 60,
-                borderRadius: 50
-              }}
-            />
-            <View
-              style={{
-                flex: 0.1
-              }}
-            />
+            <Text
+              style={styles.userName}
+            >
+              {this.props.username}
+            </Text>
             <View
-              style={{
-                flex: 10,
-                width: "100%",
-                height: "100%",
-                flexDirection: "column"
-              }}
+              style={styles.leftBottomRow}
             >
+              <Image
+                // source={{
+                //   uri: this.props.uri
+                // }}
+                style={styles.flowerIcon}
+              />
               <Text
-                style={{
-                  width: "100%",
-                  height: "50%",
-                  fontSize: 18,
-                  fontWeight: "bold",
-                  textAlign: "left",
-                  textAlignVertical: "bottom"
-                }}
+                style={styles.flowerNumber}
               >
-                {this.props.username}
+                {this.props.flowerNumber}
               </Text>
-              <View
-                style={{
-                  flex: 2,
-                  flexDirection: "row"
-                }}
-              >
-                <Image
-                  // source={{
-                  //   uri: this.props.uri
-                  // }}
-                  style={{
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    backgroundColor: "blue"
-                  }}
-                />
-                <Text
-                  style={{
-                    flex: 1,
-                    textAlignVertical: "center",
-                    marginLeft: 2
-                  }}
-                >
-                  {this.props.flowerNumber}
-                </Text>
-              </View>
             </View>
           </View>
-          <View style={{ flex: 1 }} />
         </View>
       </TouchableOpacity>
     );
@@ -119,8 +110,6 @@ export default class Header extends Component<Props> {
       使用方法
       <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")}

pages/components/SchoolAge.js

@@ -20,12 +20,7 @@ import {
 } from "react-native";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
-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 = {};
 export default class SchoolAge extends BasePage {

pages/utils/dimensions.js

@@ -0,0 +1,34 @@
+let {Dimensions,StatusBar,Platform,PixelRatio} = require('react-native');
+
+let {width,scale,height,fontScale} = Dimensions.get("window");
+let isIOS = Platform.OS == "ios";
+let statusBarHeight = isIOS? 20: StatusBar.currentHeight;
+let pixelRatio = PixelRatio;
+fontScale = scale;
+
+
+export default Dimensions  = {
+	get:Dimensions.get,
+	screenWidth:width,
+	screenHeight:height,
+	screenScale:scale,
+	width:width,
+	height:height,
+	scale:scale,
+	fontScale:fontScale,
+	statusBarHeight:statusBarHeight,
+	contentHeight:height-statusBarHeight,
+	pixelRatio: pixelRatio,
+	getFontSize:function(size){
+		return size*fontScale;
+	},
+	getWidth:function(width){
+		return width*fontScale;
+	},
+	getHeight:function(height){
+		return height*fontScale;
+	},
+	size:{
+		"1":1*fontScale
+	}
+}