先上代码:

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/ import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image,} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={{}}>
<View style={[styles.height160, styles.row,]}>
<View style={[styles.height160, styles.part_1_left,]}>
<Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我们约吧</Text>
<Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
<Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
</View>
<View style={[styles.height160, styles.part_1_right,]}>
<View style={[styles.row, {flex:1}]}>
<View style={{flex:1}}>
<Text style={[styles.font14, {marginLeft:30}, styles.red]}>超低价值</Text>
<Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: 'black'}]}>十元惠生活</Text>
</View>
<View style={[{flex:1}, {marginTop:-13}]}>
<Image style={[styles.hanbao]} source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}}></Image>
</View>
</View>
<View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}>
<View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE',}}>
<Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
<Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
<Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
</View>
<View style={{flex:1,}}>
<Text style={[styles.font14,{color:'#FF8601', marginTop:8, marginLeft:5}]}>名店抢购</Text>
<Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>还有</Text>
<Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>12:06:12分</Text>
</View>
</View>
</View>
</View>
<View>
<View style={{borderBottomWidth:1,borderTopWidth:1, borderColor:'#DDD8CE', marginTop:40,height:65, flexDirection: 'row',paddingTop:10}}>
<View style={[{flex:2}]}>
<Text style={{fontSize:17, color:'#FF7F60', fontWeight:'900', marginLeft:10}}>一元吃大餐</Text>
<Text style={{marginLeft:10, fontSize:12, marginTop:3}}>新用户专享</Text>
</View>
<View style={{flex:1}}>
<Image style={{height:50, width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}}></Image>
</View>
</View>
</View>
<View>
<View style={{flexDirection: 'row',}}>
<View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1,flex:1}]}>
<View style={{flex:2,}}>
<Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:10}}>撸串节狂欢</Text>
<Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:10}}>烧烤6.6元起</Text>
</View>
<View style={{flex:1}}>
<Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}}></Image>
</View>
</View>
<View style={[styles.row,{flex:1}]}>
<View style={{flex:2}}>
<Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:10}}>毕业旅行</Text>
<Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:10}}>选好酒店才安心</Text>
</View>
<View style={{flex:1}}>
<Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}}></Image>
</View>
</View>
</View>
<View style={{flexDirection: 'row',}}>
<View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1, marginLeft:1,flex:1},]}>
<View style={{flex:2}}>
<Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold',marginLeft:10}}>0元餐来袭</Text>
<Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:10}}>免费吃喝玩乐购</Text>
</View>
<View style={{flex:1}}>
<Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}}></Image>
</View>
</View>
<View style={[styles.row,{flex:1}]}>
<View style={{flex:2}}>
<Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold',marginLeft:10 }}>热门团购</Text>
<Text style={{fontSize:12, color:'#97979A', marginTop:3,marginLeft:10}}>大家都在买什么</Text>
</View>
<View style={{flex:1}}>
<Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}}></Image>
</View>
</View>
</View>
</View>
</View>
);
}
} var styles = StyleSheet.create({
row:{
flexDirection: 'row',
paddingTop:20
},
marTop18:{
marginTop:18,
},
marTop14:{
marginTop:14,
},
font14:{
fontSize:14,
},
font10:{
fontSize:12,
},
height160:{
height: 160
},
yue:{
height:80,
},
green:{
color:'#55A44B',
fontWeight: '900'
},
red:{
color: '#FF3F0D',
fontWeight: '900'
},
marLeft10:{
marginLeft:10,
},
part_1_left:{
flex: 1,
borderColor: '#DCD7CD',
borderRightWidth: 0.5,
borderBottomWidth: 1,
},
part_1_right:{
flex:2,
borderColor: '#DCD7CD',
borderBottomWidth: 1,
},
hanbao:{
height:55,
width:55
}
});

我们运行出来的效果是这样的

居然出现了一个黄色的报错:Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).

解决黄色的报错办法是:

只要把这个页面放在chrome的最前面就可以了,黄色就消失了

页面就是这个了

Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).的更多相关文章

  1. VS 远程调试之 “The visual studio remote debugger does not support this edition of windows”

    The error message "The visual studio remote debugger does not support this edition of windows&q ...

  2. Visual Studio2017 远程调试 Remote Debugger

    前言 大家在使用vs打包后的文件部署到服务器后,有时候我们需要对线网的后台进行调试.但是它不像在VS中.这个时候我们该怎么调试呢? 微软想到了这一点,他们在 VS 中给我们提供了一个功能: Remot ...

  3. Visual Studio2017 Remote Debugger

    前言 大家在使用vs打包后的文件部署到服务器后,有时候我们需要对线网的后台进行调试.但是它不像在VS中.这个时候我们该怎么调试呢? 微软想到了这一点,他们在 VS 中给我们提供了一个功能: Remot ...

  4. 微信公众号本地断点调试(frp反向代理或Remote Debugger)

    问题描述: 需要开发微信授权和订阅推送,但是感觉调试不方便,就试着几种方式.因为是用的C#开发,Visual Studio工具自带配套的远程工具 (Remote Debugger).但是感觉不稳定,容 ...

  5. vs2017 Remote Debugger远程调试目录

    默认目录:C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\Remote Debugger

  6. Visual Studio 2017 远程调试(Remote Debugger)应用

    I.远程调试情景 项目部署在远程服务器或非本地环境中,需要 处理应用中遇到的一些错误时 (不能直接附加进程或F5调试应用). II. 远程调试准备 1.远程服务器--操作系统和硬件要求 MSDN 操作 ...

  7. visual studio远程调试 remote debugger

    下载远程debug工具: https://docs.microsoft.com/zh-cn/visualstudio/debugger/remote-debugging?view=vs-2015 或者 ...

  8. VS2015 远程调试:Remote Debugger

    一.关于Remote Debugger 使用VS远程调试器Remote Debugger,我们可以调试部署在不同机器上的应用程序,如桌面应用程序和Asp.Net应用程序. 二.Remote Debug ...

  9. Visual Studio 2019 远程调试工具(Remote Debugger)使用方法

    目录 0.Visual Studio 2019 远程调试工具使用场景 1.Visual Studio 2019 远程调试工具下载地址: 2.Visual Studio 2019 远程调试工具-安装及运 ...

随机推荐

  1. SpringBoot 中 JPA 的使用

    详细连接 简书https://www.jianshu.com/p/c14640b63653 新建项目,增加依赖 在 Intellij IDEA 里面新建一个空的 SpringBoot 项目.具体步骤参 ...

  2. 在阿里云上部署 Postfix

    Postfix 可以很方便的在一台机器上部署 smtp 服务,在 centos 上来说的话可以使用: sudo yum install postfix sudo systemctl enable po ...

  3. python 钉钉机器人发送消息

    import json import requests def sendmessage(message): url = 'https://oapi.dingtalk.com/robot/send?ac ...

  4. 关于wordpress更新提示无法创建目录问题

    说说自己的看法和解决办法 看法: 网上很多人说:是权限问题,那么将文件目录权限设置为777就可以解决.恩,没错,是可以解决更新问题,可是却带来了更大的问题——安全.像他们这个设置后,网站被攻破,数据被 ...

  5. JS--操作DOM树

    <ul id="ul1"> <li id="li1">111</li> <li id="li2"& ...

  6. SQL 函数NULLIF、NULL、ISNULL、COALESCE、IIF

    NULLIF函数 NULLIF(Expression1,Expression2):给定两个参数Expression1和Expression2,如果两个参数相等,则返回NULL:否则就返回第一个参数. ...

  7. H5 history.pushState 在微信内修改url后点击用safari打开/复制链接是修改之前的页面

    解决方案:url参数增加随机参数 function wxRefresh() { var replaceQueryParam = (param, newval, search) => { var ...

  8. .net core Include问题

    本文章为原创文章,转载请注明出处 当时不知道为什么这样写,可能是突然间脑子停止了转动,既然犯过这样的错误,就记录下来吧 错误示例 ).Include(a=>a.User).Select(a =& ...

  9. spring boot项目基本结构

    /==================================Controller @Controller public class SimpleController { @Autowired ...

  10. Django+Xadmin打造在线教育系统(三)

    完成登录 注册 找回密码 激活 验证码集成 将HTML文件拷贝到templates目录下,css,js,img,media,images文件夹拷贝到static文件夹下 修改index.html和lo ...