美特派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 (

      <View>

        <View

          style={{

            flexDirection: "row",

            justifyContent: "space-between",

            backgroundColor: "#00A9FF",

            height: 66

          }}

        >

          <Image

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

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

          />

          <Text

            style={{

              alignItems: "center",

              alignSelf: "center",

              fontSize: 20,

              color: "#FFFFFF"

            }}

          >

            美食{" "}

          </Text>

          <Text />

        </View>

        <View

          style={{

            marginTop: 1,

            flexDirection: "row",

            justifyContent: "space-around",

            backgroundColor: "#00A9FF",

            height: 66

          }}

        >

          <FlatList

            horizontal={true}

            showsHorizontalScrollIndicator={false}

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

            data={this.state.arr}

            renderItem={({ item }) => (

              <View

                style={{

                  alignSelf: "center",

                  alignItems: "center",

                  margin: 5,

                  marginLeft: 20,

                  marginRight: 20,

                  flexDirection: "row",

                  justifyContent: "space-around",

                  backgroundColor: "#00A9FF"

                }}

              >

                <Text

                  style={{

                    alignItems: "center",

                    alignSelf: "center",

                    textAlign: "center",

                    marginBottom: 30

                  }}

                >

                  {item}

                </Text>

              </View>

            )}

          />

          <Image

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

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

          />

        </View>

        <View

          style={{

            flexDirection: "row",

            justifyContent: "space-between",

            marginTop: 10

          }}

        >

          <Text style={{ fontSize: 20, color: "#000000" }}>省心套餐</Text>

          <View style={{ flexDirection: "row" }}>

            <Text style={{ fontSize: 18 }}>更多</Text>

            <Text style={{ fontSize: 18 }}>》</Text>

          </View>

        </View>

        <View

          style={{

            flexDirection: "row",

            justifyContent: "space-around",

            marginTop: 5,

            margin: 10

          }}

        >

          <View>

            <Image source={require("./../img/shuizhuroupian.png")} />

            <Text style={{ fontSize: 18, color: "#000000" }}>

              水煮肉片+米饭...

            </Text>

            <Text>22人好评</Text>

            <View style={{ flexDirection: "row" }}>

              <Text style={{ fontSize: 17, color: "#000000" }}>￥16</Text>

              <Text

                style={{

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C",

                  margin: 3

                }}

              >

                满20减2

              </Text>

            </View>

          </View>

          <View>

            <Image source={require("./../img/hanbao.png")} />

            <Text>套餐一</Text>

            <Text>11人好评</Text>

            <View style={{ flexDirection: "row" }}>

              <Text style={{ fontSize: 17, color: "#000000" }}>￥16</Text>

              <Text

                style={{

                  margin: 3,

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C"

                }}

              >

                满20减5

              </Text>

            </View>

          </View>

          <View>

            <Image source={require("./../img/chaomian.png")} />

            <Text>皮蛋瘦肉粥</Text>

            <Text>65人好评</Text>

            <View style={{ flexDirection: "row" }}>

              <Text style={{ fontSize: 17, color: "#000000" }}>￥7</Text>

              <Text

                style={{

                  borderWidth: 1,

                  borderColor: "#F82C2C",

                  color: "#F82C2C",

                  margin: 3

                }}

              >

                满15减5

              </Text>

            </View>

          </View>

        </View>

        <View

          style={{

            flexDirection: "row",

            justifyContent: "space-around",

            marginTop: 10

          }}

        >

          <View style={{ flexDirection: "row" }}>

            <Text>综合排序</Text>

            <Image

              style={{ marginTop: 5 }}

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

            />

          </View>

          <Text>距离最近</Text>

          <Text>品质联盟</Text>

          <View style={{ flexDirection: "row" }}>

            <Text>筛选</Text>

            <Image

              style={{ marginBottom: 15 }}

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

            />

          </View>

        </View>

        {/* 下部分 */}

        {/* 开始标签 */}

        <View style={{ flexDirection: "row" }}>

          <Image source={require("./../img/maite.png")} />

          <View style={{ flexDirection: "column", marginLeft: 20 }}>

            <Text style={{ fontSize: 19, color: "#000000" }}>味小煲</Text>

            <View style={{ flexDirection: "row", marginTop: 10 }}>

              <Image source={require("./../img/xing.png")} />

              <Image source={require("./../img/xing.png")} />

              <Image source={require("./../img/xing.png")} />

              <Image source={require("./../img/xing.png")} />

              <Image source={require("./../img/xing.png")} />

              <Text>4.8月售2257单</Text>

            </View>

            <View style={{ flexDirection: "row", marginTop: 13 }}>

              <Text>￥15起送|配送费￥1</Text>

            </View>

            <View style={{ flexDirection: "row" }}>

              <Text>粤菜 品质联盟</Text>

            </View>

            <View style={{ flexDirection: "row", marginTop: 15 }}>

              <Text

                style={{

                  fontSize: 18,

                  borderRadius: 3,

                  backgroundColor: "red",

                  color: "#FFFFFF"

                }}

              >

                减

              </Text>

              <Text>满18减3，满25减5，满38减8，满66.... 26个活动</Text>

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

            </View>

            <View style={{ flexDirection: "row", marginTop: 8 }}>

              <Text

                style={{

                  fontSize: 18,

                  borderRadius: 3,

                  backgroundColor: "red",

                  color: "#FFFFFF"

                }}

              >

                折

              </Text>

              <Text>单品折扣</Text>

            </View>

          </View>

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

        </View>

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

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: "#F5FCFF"

  }

});