grid 框架OK

罗广聪
Commit dbf1f611f3bdf7e82292374c266d2fe7be0fa5e7 dbf1f611 1 parent 52f8bef6
Showing 3 changed files with 99 additions and 5 deletions
package.json
src/pages/Home/AISolution/Solution.js
yarn.lock
--- a/package.json
View file @dbf1f61
+++ b/package.json
View file @dbf1f61
@@ -9,6 +9,7 @@
 	"dependencies": {
 		"react": "16.0.0-alpha.12",
 		"react-native": "0.48.1",
+		"react-native-easy-grid": "^0.1.15",
 		"react-native-swiper": "^1.5.11",
 		"react-navigation": "^1.0.0-beta.11"
 	},
--- a/src/pages/Home/AISolution/Solution.js
View file @dbf1f61
+++ b/src/pages/Home/AISolution/Solution.js
View file @dbf1f61
@@ -11,11 +11,35 @@ import {
   Dimensions
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
+import { Col, Row, Grid } from "react-native-easy-grid";
 export default class Home extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      gridData: {
+        title: ["角色","建议产品","建议保额","保险年限","缴费期限","年缴保费"],
+        products: [{
+          name: "成人意外险",
+          price: "50W",
+          long: "1年",
+          year: "20年",
+          eachyear: "150元",
+        },{
+          name: "成人意外险",
+          price: "50W",
+          long: "1年",
+          year: "20年",
+          eachyear: "150元",
+        },{
+          name: "成人意外险",
+          price: "50W",
+          long: "1年",
+          year: "20年",
+          eachyear: "150元",
+        }]
+      }
+    };
   }
   componentWillMount() {}
@@ -52,6 +76,7 @@ export default class Home extends Component {
   render() {
     console.log("solution", this.props.navigation.state.params.answerList);
     const { navigate } = this.props.navigation;
+    const { gridData } = this.state;
     return (
       <View style={styles.container}>
         <View style={styles.ownContaier}>
@@ -94,9 +119,42 @@ export default class Home extends Component {
               <Text style={styles.headerTitle}>保险配置方案</Text>
             </View>
           </View>
-          <View style={styles.tableContainer}>
+          <ScrollView style={styles.tableContainer}>
-            <Text>表格</Text>
+            <Grid>
-          </View>
+              <Row>
+                {gridData.title.map((item,index) => {
+                  return (
+                    <Col key={index} style={styles.gridtitleContaier}><Text style={styles.gridheaderText}>{item}</Text></Col>
+                  )
+                })}
+              </Row>
+              <Row>
+                <Col style={styles.actor} size={1}>
+                  <Text style={styles.contentText}>父亲</Text>
+                  <Text style={styles.contentText}>42岁</Text>
+                </Col>
+                <Col size={5}>
+                  {
+                    gridData.products.map((item,index) => {
+                      return (
+                        <Row key={index}>
+                          <Col><Text style={styles.contentText}>{item.name}</Text></Col>
+                          <Col><Text style={styles.contentText}>{item.price}</Text></Col>
+                          <Col><Text style={styles.contentText}>{item.long}</Text></Col>
+                          <Col><Text style={styles.contentText}>{item.year}</Text></Col>
+                          <Col><Text style={styles.contentText}>{item.eachyear}</Text></Col>
+                        </Row>
+                      )
+                    })
+                  }
+                  <Row>
+                    <Text>1200</Text>
+                    <Text>元/年</Text>
+                  </Row>
+                </Col>
+              </Row>
+            </Grid>
+          </ScrollView>
         </View>
       </View>
     );
@@ -171,5 +229,34 @@ const styles = StyleSheet.create({
   configureContaier: {
     backgroundColor: "white",
     marginTop: 10
+  },
+  tableContainer: {
+    marginLeft: 18,
+    paddingRight: 18,
+    borderStyle: "solid",
+    borderColor: "#E8E8E8",
+    borderTopWidth: 0.5,
+    paddingVertical: 12,
+  },
+  gridtitleContaier: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 8,
+    backgroundColor: "#1B9341",
+    borderColor: "#E8E8E8",
+    borderStyle: "solid",
+    borderLeftWidth: 0.5,
+  },
+  gridheaderText: {
+    fontSize: 11,
+    color: "white",
+  },
+  actor: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  contentText: {
+    fontSize: 12,
+    lineHeight: 17,
   }
 });
--- a/yarn.lock
View file @dbf1f61
+++ b/yarn.lock
View file @dbf1f61
@@ -2605,7 +2605,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.11.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.4"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -3251,6 +3251,12 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
+react-native-easy-grid@^0.1.15:
+  version "0.1.15"
+  resolved "http://registry.npm.taobao.org/react-native-easy-grid/download/react-native-easy-grid-0.1.15.tgz#02939ae032d74662b50c9540d902c79866ba638a"
+  dependencies:
+    lodash "^4.11.1"
+
 react-native-swiper@^1.5.11:
   version "1.5.11"
   resolved "http://registry.npm.taobao.org/react-native-swiper/download/react-native-swiper-1.5.11.tgz#2d46ded43f383dbde4540d513cb4eaaa60eaed61"