react-native样式定义使用StyleSheet

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/potato512/article/details/80323124

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


效果图


代码示例

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

let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;

type Props = {};
export default class StyleSheetPage extends Component<Props> {
    render() {
        return(
            <View style={styles.containerStyle}>
                <View style={styles.borderStyle}></View>
                <View style={styles.marginStyle}/>
                <Text style={styles.paddingStyle}>内边距</Text>
                <Text style={[styles.textStyle, styles.fontStyle]}>字体属性</Text>
                <Text style={[styles.textStyle, styles.shadowStyle]}>阴影属性</Text>
                <Text style={[styles.textStyle, styles.decorationStyle]}>装饰属性</Text>
            </View>
        );
    }
}

var styles = StyleSheet.create({
   containerStyle: {
       width:widthScreen,
       height:heightScreen,

       backgroundColor:"#E6E6FA",
   },
   borderStyle: {
       margin:20,
       height:50,

       backgroundColor:'yellow',

       // solid 实线边框
       borderStyle:"solid",
       borderColor:"#DC143C",
       borderRadius:10,
       borderLeftColor:"green",
       borderTopWidth:1,
       borderLeftWidth:3,
       borderRightWidth:2,
       borderBottomWidth:5,
   },
   marginStyle: {
       marginTop:20,
       marginLeft:10,
       marginRight:20,
       marginBottom:20,

       height:30,

       backgroundColor:'green',
   },
   paddingStyle: {
       height:50,

       padding:10,
       backgroundColor:"brown",
   },
   textStyle: {
       margin:10,
       height:40,

       backgroundColor:'#FFF0F5',
   },
   fontStyle: {
       fontSize:20,
       fontStyle:'italic', // normal,italic,oblique
       fontWeight:'bold', // normal,bold,100~900
       color:"red",
       textAlign:'center', // center,left,right
       lineHeight:40,

       letterSpacing:5,
   },
   shadowStyle: {
       // 文字阴影偏移
       textShadowOffset: {width: 10, height: 10},
       // 文字阴影颜色
       textShadowColor: 'black',
       // 文字阴影圆角的大小
       textShadowRadius: 1.5,
   },
   decorationStyle: {
       // 'none', 'underline', 'line-through', 'underline line-through'
       textDecorationLine: 'underline',
       // 'solid', 'double', 'dotted', 'dashed'
       textDecorationStyle: 'solid',
       textDecorationColor: 'blue',
   }

});

定义和使用说明

1、引用

import {
    StyleSheet
} from 'react-native';

2、定义

(1)多个样式间以逗号,分开

(2)样式属性以逗号,结尾

var styles = StyleSheet.create({
   containerStyle: {
       width:widthScreen,
       height:heightScreen,

       backgroundColor:"#E6E6FA",
   },
   textStyle: {
       margin:10,
       height:40,

       backgroundColor:'#FFF0F5',
   }
});

3、使用

(1)单个样式使用

<View style={styles.marginStyle}/>

(2)多个样式使用(数组使用)

<Text style={[styles.textStyle, styles.fontStyle]}>字体属性</Text>


阅读更多

没有更多推荐了,返回首页