1.App.js代码

/**

* Sample React Native App

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

*

* @format

* @flow

*/


import React, {

  Component

} from 'react';


import {

  Platform,

  StyleSheet,

  Text,

  View,

  Dimensions,

  Image,

} from 'react-native';


var uri_friend = 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png';

var uri_hamburge = 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg';

var uri_crab = 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png';

var uri_newuser = 'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg';

var uri_carnival = 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png';

var uri_free = 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png';

var uri_travel = 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg';

var uri_hot = 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png';


export default class App extends Component {

  render() {

    return (

     

       

         

            我们约吧

            恋人家人好朋友

           

         


         

           

             

               

                  低价超值

                  十元慧生活

               

               

                 

               

             

           


           

             

               

                  聚餐宴请

                  朋友家人常聚聚

               


               

                 

               

             


             

                名店抢购

                还有12:06:12分

             

           

         

       


       

         

           

              一元吃大餐

              新用户专享

           


           

             

           

         


         

           

             

               

                  撸串节狂欢

                  烧烤6.6元起

               

               

                 

               

             


             

               

                  0元餐来袭

                  免费吃喝玩乐购

               

               

                 

               

             

           


           

             

               

                  毕业旅行

                  选好酒店才安心

               

               

                 

               

             


             

               

                  热门团购

                  大家都在买什么

               

               

                 

               

             

           

         

       

     

    );

  }

}


2.样式代码

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: 'lightgray',

    flexDirection: 'column',

  },

  view_height_300: {

    height: 300,

  },

  view_btw_1: {

    borderTopWidth: 1,

  },

  view_mt_25: {

    marginTop: 25,

  },

  view_ai_center: {

    alignItems: 'center',

  },

  view_fd_column: {

    flexDirection: 'column'

  },

  view_fd_row: {

    flexDirection: 'row',

  },

  view_jc_center: {

    justifyContent: 'center',

  },

  view_bgc_white: {

    backgroundColor: 'white',

  },

  view_bbw_1: {

    borderBottomWidth: 1,

  },

  view_bc_lightgray: {

    borderColor: 'lightgray',

  },

  view_height_160: {

    height: 160,

  },

  view_brw_1: {

    borderRightWidth: 1,

  },

  view_pl_10: {

    paddingLeft: 10

  },

  view_pl_5: {

    paddingLeft: 5,

  },

  text_c_darkorange: {

    color: 'darkorange',

  },

  text_c_green: {

    color: 'green',

  },

  text_fs_18: {

    fontSize: 18

  },

  text_c_orangered: {

    color: 'orangered',

  },

  text_c_pink: {

    color: 'pink',

  },

  text_c_orange: {

    color: 'orange',

  },

  text_fs_16: {

    fontSize: 16,

  },

  text_fs_12: {

    fontSize: 12

  },

  img_height_80: {

    height: 80,

  },

  img_rm_contain: {

    resizeMode: 'contain',

  },

  img_height_50: {

    height: 50

  },

  img_width_50: {

    width: 50

  },

  img_height_25: {

    height: 25

  },

  img_width_25: {

    width: 25

  },

  img_width_120: {

    width: 120

  },

  img_width_60: {

    width: 60,

  },

  img_height_55: {

    height: 55,

  }

});

3.代码截图

4.运行截图