美特派Demo1

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from "react";

import {

  Platform,

  StyleSheet,

  Text,

  View,

  Image,

  FlatList

} from "react-native";

export default class Demo1 extends Component {

  constructor(props) {

    super(props);

    this.state = {

      arr: ["全部", "小吃炸串", "简餐便当", "地方菜系", "香辣茄子", "宫保鸡丁"]

    };

  }

  render() {

    return (

     

       

          style={{

            flexDirection: "row",

            justifyContent: "space-between",

            backgroundColor: "#00A9FF",

            height: 66

          }}

        >

         

            style={{ alignItems: "center", alignSelf: "center" }}

            source={require("./../img/arrow-left.png")}

          />

         

            style={{

              alignItems: "center",

              alignSelf: "center",

              fontSize: 20,

              color: "#FFFFFF"

            }}

          >

            美食{" "}

         

         

       

       

          style={{

            marginTop: 1,

            flexDirection: "row",

            justifyContent: "space-around",

            backgroundColor: "#00A9FF",

            height: 66

          }}

        >

         

            horizontal={true}

            showsHorizontalScrollIndicator={false}

            style={{ width: 100, height: 100 }}

            data={this.state.arr}

            renderItem={({ item }) => (

             

                style={{

                  alignSelf: "center",

                  alignItems: "center",

                  margin: 5,

                  marginLeft: 20,

                  marginRight: 20,

                  flexDirection: "row",

                  justifyContent: "space-around",

                  backgroundColor: "#00A9FF"

                }}

              >

               

                  style={{

                    alignItems: "center",

                    alignSelf: "center",

                    textAlign: "center",

                    marginBottom: 30

                  }}

                >

                  {item}

               

             

            )}

          />

         

            style={{ alignItems: "center", alignSelf: "center" }}

            source={require("./../img/arrow-bottom.png")}

          />

       

       

          style={{

            flexDirection: "row",

            justifyContent: "space-between",

            marginTop: 10

          }}

        >

          省心套餐

         

            更多

            》

         

       

       

          style={{

            flexDirection: "row",

            justifyContent: "space-around",

            marginTop: 5,

            margin: 10

          }}

        >

         

           

           

              水煮肉片+米饭...

           

            22人好评

           

              ￥16

             

                style={{

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C",

                  margin: 3

                }}

              >

                满20减2

             

           

         

         

           

            套餐一

            11人好评

           

              ￥16

             

                style={{

                  margin: 3,

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C"

                }}

              >

                满20减5

             

           

         

         

           

            皮蛋瘦肉粥

            65人好评

           

              ￥7

             

                style={{

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C",

                  margin: 3

                }}

              >

                满15减5

             

           

         

       

       

          style={{

            flexDirection: "row",

            justifyContent: "space-around",

            marginTop: 10

          }}

        >

         

            综合排序

           

              style={{ marginTop: 5 }}

              source={require("./../img/arr-bottom.png")}

            />

         

          距离最近

          品质联盟

         

            筛选

           

              style={{ marginBottom: 15 }}

              source={require("./../img/filter.png")}

            />

         

       

        {/* 下部分 */}

        {/* 开始标签 */}

       

         

         

            味小煲

           

             

             

             

             

             

              4.8月售2257单

           

           

              ￥15起送|配送费￥1

           

           

              粤菜 品质联盟

           

           

             

                style={{

                  fontSize: 18,

                  borderRadius: 3,

                  backgroundColor: "red",

                  color: "#FFFFFF"

                }}

              >

                减

             

              满18减3，满25减5，满38减8，满66.... 26个活动

             

           

           

             

                style={{

                  fontSize: 18,

                  borderRadius: 3,

                  backgroundColor: "red",

                  color: "#FFFFFF"

                }}

              >

                折

             

              单品折扣

           

         

          {/* 下部分的结束标签 */}

       

        {/* 下面是最外面结束的标签 */}

     

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: "#F5FCFF"

  }

});