React-Native -课后练习
Posted 牵着蜗牛走的我
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 -课后练习
效果图
仔细不要急 一步一步来
以上是关于React-Native -课后练习的主要内容，如果未能解决你的问题，请参考以下文章
在另一个 React-Native 库中使用 React-Native 库
React-Native + crypto：如何在 React-Native 中生成 HMAC？
React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？
在解析模块`react-native/Libraries/Core/Devtools/getDevServer`时，发现了Haste包`react-native`