RN-美团布局

//美团布局

import React, { Component } from "react";
import { View, Text } from "react-native";
import Header from "./Header";
import Menu from "./Menu";
import Title from "./Title";
import Ji from "./Ji";

export default class Mei extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View>
        <Header />
        <Menu />
        <Title />
        <Ji />
      </View>
    );
  }
}
//餐单

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.column}>
        <View style={[styles.column, styles.xian]}>
          <View style={[styles.row, styles.img]}>
            <Image style={styles.tu} source={require("./img/huoguo.png")} />
            <Image style={styles.tu} source={require("./img/tiandian.png")} />
            <Image style={styles.tu} source={require("./img/zizhucang.png")} />
            <Image style={styles.tu} source={require("./img/xiaochi.png")} />
          </View>
          <View style={[styles.row, styles.zi]}>
            <Text>火锅</Text>
            <Text>甜点饮品</Text>
            <Text>自助餐</Text>
            <Text>小吃快餐</Text>
          </View>
        </View>
        <View style={styles.column}>
          <View style={[styles.row, styles.img]}>
            <Image style={styles.tu} source={require("./img/xican.png")} />
            <Image style={styles.tu} source={require("./img/shaokao.png")} />
            <Image style={styles.tu} source={require("./img/kaoyu.png")} />
            <Image style={styles.tu} source={require("./img/haixian.png")} />
          </View>
          <View style={[styles.row, styles.zi]}>
            <Text>西餐</Text>
            <Text>烧烤烤肉</Text>
            <Text>香锅烤鱼</Text>
            <Text>海鲜</Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  row: {
    flexDirection: "row"
  },
  column: {
    flexDirection: "column"
  },
  img: {
    marginTop: 10,
    width: "100%",
    justifyContent: "space-around"
  },
  tu: {
    width: 50,
    height: 50
  },
  xian: {
    borderTopWidth: 1,
    borderTopColor: "#CBCCCD"
  },
  zi: {
    width: "100%",
    justifyContent: "space-around",
    marginLeft: 8
  }
});
//筛选

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export default class Title extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={[styles.row, styles.pai, styles.xian]}>
        <View styles={styles.row}>
          <Text style={styles.wai}>全部类目</Text>
          <Image style={styles.img} source={require("./img/arrow-down.png")} />
        </View>
        <View styles={styles.row}>
          <Text style={styles.wai}>附近商家</Text>
          <Image style={styles.img} source={require("./img/arrow-down.png")} />
        </View>
        <View styles={styles.row}>
          <Text style={styles.wai}>智能排序</Text>
          <Image style={styles.img} source={require("./img/arrow-down.png")} />
        </View>
        <View styles={styles.row}>
          <Text style={styles.wai}>筛选</Text>
          <Image style={styles.img} source={require("./img/arrow-down.png")} />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  row: {
    flexDirection: "row"
  },
  pai: {
    width: "100%",
    justifyContent: "space-around"
  },
  img: {
    width: 10,
    height: 18,
    position: "absolute",
    top: 6,
    right: -5
  },
  xian: {
    marginTop: 15,
    borderTopColor: "#C6C8C9",
    borderTopWidth: 15,
    borderBottomColor: "#C6C8C9",
    borderBottomWidth: 1
  },
  wai: {
    padding: 10
  }
});
 

//店家   吉野家   布局

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export default class Ji extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={[styles.row, styles.di]}>
        <View style={styles.tu}>
          <Image source={require("./img/jiyejia.jpg")} />
        </View>
        <View style={styles.column}>
          <Text style={styles.ji}>吉野家 (东方新天地店)</Text>
          <View style={styles.row}>
            <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/banxing.png")} />
            <Text style={styles.yuan}> ￥ 30/人</Text>
            <Text style={styles.you}>王府井/东单 714m</Text>
          </View>
          <View style={styles.row}>
            <Text style={styles.yuan}>日式快餐</Text>
            <Text style={styles.duo}> 回头客多</Text>
          </View>
          <Text style={styles.wai}> 支持外卖</Text>
          <View style={[styles.row, styles.xian]}>
            <Text style={styles.tuan}>团</Text>
            <Text style={styles.tang}>
              14元唐氏鱼香肉丝，14元烧鸭饭套餐，22元...
            </Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    marginTop: 10
  },
  column: {
    flexDirection: "column"
  },
  tu: {
    paddingVertical: 20,
    paddingHorizontal: 8
  },
  ji: {
    fontSize: 18,
    marginTop: 5,
    fontWeight: "100"
  },
  yuan: {
    fontSize: 12
  },
  you: {
    fontSize: 12,
    position: "absolute",
    top: 0,
    right: -80
  },
  duo: {
    color: "#F3B155",
    fontSize: 11,
    marginLeft: 15
  },
  wai: {
    marginTop: 10,
    fontSize: 11,
    color: "#77D2B3"
  },
  xian: {
    borderTopColor: "#E0E1E1",
    borderTopWidth: 1
  },
  di: {
    borderBottomColor: "#E0E1E1",
    borderBottomWidth: 1
  },
  tang: {
    marginTop: 10,
    fontSize: 11,
    marginLeft: 5,
    marginBottom: 10
  },
  tuan: {
    color: "#F7F8F7",
    marginLeft: 10,
    marginTop: 9,
    marginBottom: 11,
    backgroundColor: "#19B07D"
  }
});
 

 

//标题

import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TextInput } from "react-native";

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.column}>
        <View style={styles.row}>
          <Image style={styles.left} source={require("./img/arrow-left.png")} />
          <View style={styles.row}>
            <Image style={styles.sou} source={require("./img/search.png")} />
            <TextInput
              style={styles.input}
              placeholder="         输入商家名、品类或商圈        "
            />
          </View>
          <Image style={styles.left} source={require("./img/avatar.png")} />
        </View>
        <View style={styles.row}>
          <Image style={styles.img} source={require("./img/lunbotu.png")} />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  row: {
    flexDirection: "row"
  },
  column: {
    flexDirection: "column"
  },
  img: {
    width: "100%",
    height: 100
  },
  input: {
    borderColor: "#CBCCCD",
    borderWidth: 1,
    borderRadius: 12,
    marginLeft: 35
  },
  sou: {
    position: "absolute",
    top: 10,
    left: 40
  },
  left: {
    marginTop: 7,
    marginLeft: 10
  }
});