先上代码:

/**
* 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. 2017 Python最新面试题及答案16道题

    1.Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一.对象的引用计数机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都 ...

  2. python爬虫之git的使用

    一.简单认识: 1.初始化文件夹为版本控制文件夹,首先建立一个文件夹,进入这个文件夹以后输入git init初始化这个文件夹. 2.Git几种位置概念 1.本地代码:本地更改完代码以后,虽然是存放在g ...

  3. java中间缓存变量机制

    public static void main(String[] args){ int j = 0; for(int i = 0; i < 100; i++) j = j++; System.o ...

  4. Javassist之使用字节码在运行时生成新的类 01

    介绍 Javassist是一个开源的分析.编辑和创建Java字节码的类库.是由东京工业大学的数学和计算机科学系的 Shigeru Chiba (千叶 滋)所创建的.它已加入了开放源代码JBoss 应用 ...

  5. 学习 Spring (十四) Introduction

    Spring入门篇 学习笔记 Introduction 允许一个切面声明一个实现指定接口的通知对象,并且提供了一个接口实现类来代表这些对象 由 中的 元素声明该元素用于声明所匹配的类型拥有一个新的 p ...

  6. Vue命令行工具vue-cli

    前面的话 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生 ...

  7. JQuery operate xml

    msg is <?xml ?> <Parameters> <WorkflowName>...</WorkflowName> </Parameter ...

  8. codeforces545C

    Woodcutters CodeForces - 545C Little Susie listens to fairy tales before bed every day. Today's fair ...

  9. 51nod-1445-变色DNA(最短路)

    题意:题目是说从0到n-1,我还是习惯从1到n,所以以下我都这么写,大概题意就是(i, j)==‘Y’表示可以从i颜色变成j颜色,然后问我们最少删除几个会影响结果的‘Y’,能到n这个颜色: 没有意义的 ...

  10. Nginx 负载均衡一致性算法

    一般Hash负载算法都是%算法 比如key-5 如果有5台服务器 那么5%5=0  那么请求将落在server 0 上,当有服务器宕机或者添加新服务器时,hash算法会引发大量路由更改,可能导致缓存大 ...