产品详情页

@@ -5,7 +5,9 @@ import {
   View,
   Image,
   Dimensions,
-  ScrollView
+  ScrollView,
+  Text,
+  TouchableOpacity,
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 
@@ -16,17 +18,20 @@ export default class CommonImageView extends Component {
       products: [
         {
           headerImage: require("../assets/home/product_header_1.jpg"),
-          title: "",
-          subscribe: "",
-          price: ""
-        },{
+          title: "平安e生保2017版-100万（有社保含新农合）",
+          subscribe: "200万医疗险/续保至99岁免审核",
+          price: "￥174.00",
+          detailImage: "",
+        },
+        {
           headerImage: require("../assets/home/product_header_2.jpg"),
-          title: "",
-          subscribe: "",
-          price: "",
+          title: "泰康在线“住院宝”必备版（0-49周岁）",
+          subscribe: "承保疾病，意外伤害，性价比高，住院有补贴，30-49岁一家三口可买",
+          price: "￥249.00",
+          detailImage: "",
         }
       ]
-    }
+    };
   }
   render() {
     console.log("Image  index", this.props.navigation.state.params.index);
@@ -34,8 +39,26 @@ export default class CommonImageView extends Component {
     const item = this.state.products[index];
     return (
       <View style={styles.container}>
-        <ScrollView>
-          
+        <ScrollView style={styles.scrollViewContainer}>
+          <View style={styles.headerContainer}>
+            {/* 顶部图片 */}
+            <Image
+              style={styles.headerImage}
+              resizeMode="contain"
+              source={item.headerImage}
+            />
+            {/* 标题 */}
+            <View style={styles.titleContainer}>
+              <Text style={styles.title}>{item.title}</Text>
+              <Text style={styles.subscribe}>{item.subscribe}</Text>
+            </View>
+          </View>
+          {/* 产品特色 */}
+          <View style={styles.midContaier}>
+            <Image source={require("../assets/home/ic_feature.png")} style={{width: 16, height: 17,}} />
+            <Text style={styles.midText}>产品特色</Text>
+          </View>
+          {/* 图片详情 */}
           {index == 0 ? (
             <Image
               style={styles.imgOne}
@@ -43,13 +66,22 @@ export default class CommonImageView extends Component {
               source={require("../assets/home/product_long_1.jpg")}
             />
           ) : (
-            <Image
-              style={styles.imgTwo}
-              resizeMode="contain"
-              source={require("../assets/home/product_long_2.jpg")}
-            />
+          <Image
+            style={styles.imgTwo}
+            resizeMode="contain"
+            source={require("../assets/home/product_long_2.jpg")}
+          />
           )}
         </ScrollView>
+        {/* 悬浮按钮 */}
+        <View style={styles.footer}>
+          <View style={styles.footerLeft}>
+            <Text style={styles.price}>{item.price}</Text>
+          </View>
+          <TouchableOpacity style={styles.footerRight}>
+            <Text style={styles.button}>立即投保</Text>
+          </TouchableOpacity>
+        </View>
       </View>
     );
   }
@@ -57,15 +89,81 @@ export default class CommonImageView extends Component {
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     justifyContent: "flex-start",
-    backgroundColor: "#EFEFEF",
+    backgroundColor: "#EFEFEF"
+  },
+  scrollViewContainer: {},
+  headerContainer: {},
+  headerImage: {
+    width: Dimensions.get("window").width,
+    height: Dimensions.get("window").width * 300 / 750
+  },
+  titleContainer: {
+    backgroundColor: "white",
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  title: {
+    fontSize: 16,
+    color: "#242424",
+    lineHeight: 22
+  },
+  subscribe: {
+    fontSize: 13,
+    color: "#7A7A7A",
+    lineHeight: 15
+  },
+  midContaier: {
+    marginTop: 10,
+    height: 45,
+    backgroundColor: "white",
+    flexDirection: "row",
+    paddingLeft: 13,
+    alignItems: "center",
+  },
+  midText: {
+    marginLeft: 10,
+    fontSize: 15,
+    color: "#242424",
   },
   imgOne: {
     width: Dimensions.get("window").width,
-    height: Dimensions.get("window").width * 3118 / 640,
+    height: Dimensions.get("window").width * 3118 / 640
   },
   imgTwo: {
     width: Dimensions.get("window").width,
-    height: Dimensions.get("window").width * 1651 / 690,
-  }
+    height: Dimensions.get("window").width * 1651 / 690
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    backgroundColor: "white",
+    height: 49,
+    width: Dimensions.get("window").width,
+    flexDirection: "row",
+    flex: 1,
+  },
+  footerLeft: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "flex-start",
+    paddingLeft: 15,
+  },
+  price: {
+    color: "#1B9341",
+    fontSize: 18,
+  },
+  footerRight: {
+    backgroundColor: "#1B9341",
+    width: 144,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  button: {
+    color: "white",
+    fontSize: 16,
+  },
 });

@@ -20,18 +20,12 @@ export default class AllProduct extends Component {
       ListData: [
         {
           title: "平安e生保2017版-100万（有社保含新农合）",
-          time: "刚刚",
-          // url: "http://hankschan.legendh5.com/h5/b8302dac-0563-478c-ff82-ba8ab20c1cb3.html",
-          url: require("../../assets/home/product_long_1.jpg"),
           Subtitle: "200万医疗险，续保至99岁免审核",
           imgurl: require("../../assets/home/product_1.png")
         },
         {
           title: "泰康在线“住院宝”必备版（0-49周岁）",
-          time: "刚刚",
           Subtitle: "疾病意外全面保障，补充社保不足，公共交通意外双倍赔付",
-          // url: "http://hankschan.legendh5.com/h5/f782ab69-6515-3e70-025a-5da78f1f745f.html",
-          url: require("../../assets/home/product_long_2.jpg"),
           imgurl: require("../../assets/home/product_2.png")
         },
       ]