React-Native 学习(二)

最新推荐文章于 2024-07-16 11:32:17 发布

Frank_Summer

最新推荐文章于 2024-07-16 11:32:17 发布

阅读量385

点赞数

分类专栏： React-Native 文章标签： React Native UI界面

本文链接：https://blog.csdn.net/qq_29284809/article/details/53130098

版权

React-Native 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文主要探讨React-Native中的样式应用，包括如何使用自定义样式和系统样式。强调了语法正确性对于避免错误的重要性，并提供了样例说明。

摘要由CSDN通过智能技术生成

注意:语法一定要正确,否则就会出错.

关于样式

（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
<View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性}
<View style={styles.container}></View>
（3）样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container, styles.color]}>

1.使用自己定义的样式时;
(1)如果里面有多个使用{[xx,xx,xx]}

style={[styles.height160,styles.spart_1_left]}

(2)如果只用一个的话可以直接{xx}

style={styles.setUpSmallText}

2.使用系统的样式时

//第一种:
style={{flexDirection:'row'}}
//第二种:
style={{marginLeft:5,marginTop:4,fontSize:12}}
//第三种:
style={[styles.height160,styles.spart_1_left,{borderRightWidth:1,borderRightColor:'#DDD8CE'}]}

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class Helloworld extends Component {
  render() {
    return (

        <View>
            <View style={[styles.height160,styles.row]}>
                <View style={[styles.height160,styles.spart_1_left,{borderRightWidth:1,borderRightColor:'#DDD8CE'}]}>
                     <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: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                </View>

                <View style={[styles.height160, styles.spart_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.haobao} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                        </View>
                    </View>

                    <View style={{flex:1,flexDirection:'row',borderTopWidth:0.5,borderColor:'#DDD8CE'}}>
                        <View style={{flex:1,borderRightWidth:1,borderRightColor:'#DDD8CE'}}>
                            <Text style={{color:'#F742AB',fontSize:15,fontWeight:'bold',marginTop:8,marginLeft:5}}>聚餐宴请</Text>
                            <Text style={{marginLeft:5,marginTop:5,fontSize:12}}>朋友家人常聚聚</Text>
                            <Image style={{height:25,width:25,alignSelf:'center'}} source={{uri:'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                        </View>
                        <View style={{flex:1}}>
                            <Text style={[styles.font14,{color:'#FF8601',marginTop:8,marginLeft:5}]}>名店抢购</Text>
                            <Text style={{fontSize:12,marginTop:4,marginLeft:5}}>还有</Text>
                            <Text style={{fontSize:12,marginLeft:5,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:1}}>
                        <Text style={{marginLeft:5,marginTop:8,fontSize:17,fontWeight:'900', color:'#FF7F60'}}>一元吃大餐</Text>
                        <Text style={{marginLeft:5,marginTop:4,fontSize:12}}>新用户专享</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Image style={{width:120,height:50}} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                    </View>
                </View>
            </View>

            <View style={{flexDirection:'row'}}>
                <View style={{flex:1,flexDirection:'row',borderRightWidth:1,borderRightColor:'#DDD8CE'}}>
                        <View style={{flex:1}}>
                            <Text style={{fontSize:17,color:'#EA6644',marginLeft:5,fontWeight:'bold'}}>撸串节狂欢</Text>
                            <Text style={{marginLeft:5,fontSize:12,color:'#97979A',marginTop:3}}>烧烤6.6元起</Text>
                        </View>
                        <View style={{flex:1}}>
                            <Image style={{width:60,height:55}} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                        </View>
                </View>

                <View style={{flex:1,flexDirection:'row'}}>
                    <View style={{flex:1}}>
                        <Text style={{fontSize:17,color:'#EA6644',marginLeft:7,fontWeight:'bold'}}>毕业旅行</Text>
                        <Text style={{marginLeft:5,fontSize:12,color:'#97979A',marginTop:3}}>选好酒店才安心</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Image style={{width:60,height:55}} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                    </View>
                </View>


            </View>

            <View style={{flexDirection:'row'}}>
                <View style={{flex:1,flexDirection:'row',borderRightWidth:1,borderRightColor:'#DDD8CE'}}>
                    <View style={{flex:1}}>
                        <Text style={{fontSize:17,color:'#EA6644',marginLeft:7,fontWeight:'bold'}}>0元餐来袭</Text>
                        <Text style={{marginLeft:5,fontSize:12,color:'#97979A',marginTop:3}}>免费吃喝玩乐购</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Image style={{width:60,height:55}} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                    </View>
                </View>

                <View style={{flex:1,flexDirection:'row'}}>
                    <View style={{flex:1}}>
                        <Text style={{fontSize:17,color:'#EA6644',marginLeft:7,fontWeight:'bold'}}>热门团购</Text>
                        <Text style={{marginLeft:5,fontSize:12,color:'#97979A',marginTop:3}}>大家都在买什么</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Image style={{width:60,height:55}} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}></Image>
                    </View>
                </View>
            </View>


        </View>

    );
  }
}

const styles = StyleSheet.create({
    row:{
      flexDirection:'row',
      paddingTop:20,
    },
    marTop18:{
      marginTop:18,
    },
    marTop14:{
      marginTop:14,
    },
    font14:{
      fontSize:14,
    },
    font10:{
      fontSize:10,
    },
    yue:{
      width:80,
      height:80,
    },
    green:{
      color:'#55A44B',
      fontWeight:'900',
    },
    red:{
      color:'#FF3F0D',
      fontWeight:'900',
    },
    marLeft10:{
      marginLeft:10,
    },
    height160:{
      height:160,
    },
    spart_1_left:{
      flex:1,
      // borderWidth:1,
      borderColor:'#DCD7CD',
      borderBottomWidth:1,
    },
    spart_1_right:{
      flex:2,
      // borderWidth:1,
      borderColor:'#DCD7CD',
      borderBottomWidth:1,
    },
     haobao:{
       height:55,
       width:55,
     },
});

AppRegistry.registerComponent('Helloworld', () => Helloworld);