react-native样式定义使用StyleSheet

忘是亡心i 2022-05-25 13:18 247阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![20180515150223622][]

代码示例

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）单个样式使用

（2）多个样式使用（数组使用）

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[20180515150223622]: /images/20220525/300daa1aa5084412b56385b373d2ba07.png