/**

* 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: ["全部", "小吃炸串", "簡(jiǎn)餐便當(dāng)", "地方菜系", "香辣茄子", "宮保雞丁"]

? ? };

? }

? 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人好評(píng)</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人好評(píng)</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人好評(píng)</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>品質(zhì)聯(lián)盟</Text>

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

? ? ? ? ? ? <Text>篩選</Text>

? ? ? ? ? ? <Image

? ? ? ? ? ? ? style={{ marginBottom: 15 }}

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

? ? ? ? ? ? />

? ? ? ? ? </View>

? ? ? ? </View>

? ? ? ? {/* 下部分 */}

? ? ? ? {/* 開(kāi)始標(biāo)簽 */}

? ? ? ? <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起送|配送費(fèi)￥1</Text>

? ? ? ? ? ? </View>

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

? ? ? ? ? ? ? <Text>粵菜 品質(zhì)聯(lián)盟</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個(gè)活動(dòng)</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>

? ? ? ? ? {/* 下部分的結(jié)束標(biāo)簽 */}

? ? ? ? </View>

? ? ? ? {/* 下面是最外面結(jié)束的標(biāo)簽 */}

? ? ? </View>

? ? );

? }

}

const styles = StyleSheet.create({

? container: {

? ? flex: 1,

? ? justifyContent: "center",

? ? alignItems: "center",

? ? backgroundColor: "#F5FCFF"

? }

});