Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregr...

2019/04/04 10:26
阅读数 451

先上代码:

/**
 * 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的最前面就可以了,黄色就消失了 页面就是这个了

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部