React-Native -课后练习

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

class meituan extends Component {
  render() {
    return (

        <View>
      <View style={[styles.view_row,styles.height_160]}>
          <View style={[styles.height_160,styles.partLeft]}>
              <Text style={[styles.marginTextTop_18,styles.grendTextFontSize]}>我们约吧</Text>
              <Text style={[styles.marginTextTop_14,styles.textfontSize_10,{textAlign:‘center‘}]}>恋人家人好朋友</Text>
              <Image style={[styles.yueba_height,styles.marginTextTop_14]} source={{uri:‘http://ww4.sinaimg.cn/mw690/6b2243e8gw1f71tzeulkpj20f00k00ve.jpg‘}}></Image>
          </View>
          <View style={[styles.height_160,styles.partRgith]}>
              <View style={[styles.view_row,{flex:1}]}>
                  <View style={{flex:1}}>
                  <Text style={[styles.textfontSize_14,styles.red_font,styles.textfontSize_14,{marginLeft:30}]}>低价超值</Text>
                  <Text style={[styles.textfontSize_10,styles.textfontSize_14,{marginTop:14,marginLeft:30}]}>十元惠生活</Text>
                  </View>
                  <View style={[{flex:1},{marginTop:-10,marginLeft:10}]}>
                      <Image style={styles.hanbaoImage} source={{uri:‘http://ww4.sinaimg.cn/mw690/005Ge4Xjjw1f6nttg4srgj316o1kwhdt.jpg‘}}></Image>
                  </View>
              </View>
                  <View style={{flex:1,flexDirection:‘row‘,borderWidth:0.5,borderColor:‘red‘}}>
                      <View style={{flex:1}}>
                          <Text style={[styles.textfontSize_14,styles.red_font,{marginLeft:10,marginTop:8}]}>聚会邀请</Text>
                          <Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>朋友家人常聚餐</Text>
                          <Image style={[styles.hongshaorouImage,{alignSelf:‘center‘}]} source={{uri:‘http://ww2.sinaimg.cn/mw690/6b2243e8gw1f79z2o5rakj20qp0snn22.jpg‘}}></Image>
                      </View>
                      <View style={{flex:1}}>
                          <Text style={[styles.textfontSize_14,styles.blue_font,{marginLeft:10,marginTop:8}]}>名店抢购</Text>
                          <Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>距离结束</Text>
                          <Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>12:20:30</Text>
                      </View>
                  </View>
          </View>
      </View>
            <View>
                <View style={{backgroundColor:‘#FF00FF‘,height:8,marginTop:20}}></View>
                <View style={{borderWidth:0.5,borderColor:‘blue‘,height:65,flexDirection:‘row‘}}>
                    <View style={{flex:1}}>
                        <Text style={{color:‘red‘,fontSize:18,marginLeft:15,marginTop:10}}>一元吃大餐</Text>
                        <Text style={{color:‘blue‘,fontSize:12,marginLeft:15,marginTop:10}}>新用户专享</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Image style={{height:50,width:120,marginTop:7.5,alignSelf:‘flex-end‘,marginRight:10}} source={{uri:‘http://ww2.sinaimg.cn/mw690/006uhw44gw1f7c4d3as1qj31hc1z4txo.jpg‘}}></Image>
                    </View>
                </View>

                <View>
                    <View style={{flexDirection:‘row‘,borderBottomWidth:1,borderColor:‘red‘}}>
                        <View style={{flex:1,borderColor:‘green‘,borderRightWidth:1,flexDirection:‘row‘}}>
                            <View style={{flex:1}}>
                                <Text style={{fontSize:14,color:‘red‘}}>撸串节狂欢</Text>
                                <Text style={{fontSize:12}}>烤串6.6元起</Text>
                            </View>
                            <View style={{flex:1}}>
                                <Image style={styles.hanbaoImage} source={{uri:‘http://ww1.sinaimg.cn/mw690/0068LYwcgw1f7bn60viq3j30f00k1mz6.jpg‘}}></Image>
                            </View>
                        </View>

                        <View style={{flex:1,flexDirection:‘row‘}}>
                            <View style={{flex:1}}>
                                <Text style={{fontSize:14,color:‘red‘}}>撸串节狂欢</Text>
                                <Text style={{fontSize:12}}>烤串6.6元起</Text>
                            </View>
                            <View style={{flex:1}}>
                                <Image style={styles.hanbaoImage} source={{uri:‘http://ww2.sinaimg.cn/mw690/87a5d32cgw1f79yc94vv7j20ku1127a3.jpg‘}}></Image>
                            </View>
                        </View>

                    </View>

                    <View style={{flexDirection:‘row‘}}>
                        <View style={{flex:1,borderColor:‘green‘,borderRightWidth:1,flexDirection:‘row‘}}>
                            <View style={{flex:1}}>
                                <Text style={{fontSize:14,color:‘red‘}}>撸串节狂欢</Text>
                                <Text style={{fontSize:12}}>烤串6.6元起</Text>
                            </View>
                            <View style={{flex:1}}>
                                <Image style={styles.hanbaoImage} source={{uri:‘http://ww1.sinaimg.cn/mw690/8d9f2af2gw1f7agt9adphj20ku112x22.jpg‘}}></Image>
                            </View>
                        </View>

                        <View style={{flex:1,flexDirection:‘row‘}}>
                            <View style={{flex:1}}>
                                <Text style={{fontSize:14,color:‘red‘}}>撸串节狂欢</Text>
                                <Text style={{fontSize:12}}>烤串6.6元起</Text>
                            </View>
                            <View style={{flex:1}}>
                                <Image style={styles.hanbaoImage} source={{uri:‘http://ww1.sinaimg.cn/mw690/0068acO1jw1f7ajiogif1j30zk172dnu.jpg‘}}></Image>
                            </View>
                        </View>

                    </View>
                </View>
                <View style={{backgroundColor:‘red‘,height:10}}></View>
      </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
      view_row:{
         flexDirection:‘row‘,
          paddingTop:20,
      },
       view_column:{
            flexDirection:‘column‘,
            paddingTop:20,
        },
      height_160:{
        height:160,
      },
      marginTextTop_18:{
          marginTop:18,
      },
      marginTextTop_14:{
        marginTop:14,
      },
      partLeft:{
          flex:1,
          borderColor:‘red‘,
          borderWidth:1,
      },
      partRgith:{
          flex:2,
          borderColor:‘red‘,
          borderWidth:1,
      },
      grendTextFontSize:{
          fontSize:14,
          color:‘#55A44B‘,
          textAlign:‘center‘
      },
      red_font:{
          color:‘red‘
      },
        blue_font:{
        color:‘blue‘,
        },
      textfontSize_10:{
          fontSize:10,
      },
      textfontSize_14:{
          fontSize:14,
      },
      yueba_height:{
          height:85,
      },
        hanbaoImage:{
          width:55, height:55,
        },
       hongshaorouImage:{
          width:25, height:25,
       }

});

AppRegistry.registerComponent(‘meituan‘, () => meituan);

　　React-Native -课后练习

效果图

仔细不要急 一步一步来