react-native样式定义使用StyleSheet

最新推荐文章于 2025-06-01 09:05:37 发布

番薯大佬

最新推荐文章于 2025-06-01 09:05:37 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native学习文章标签： react-native rn rn的样式 stylesheet

本文链接：https://blog.youkuaiyun.com/potato512/article/details/80323124

react-native学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在React Native中如何使用StyleSheet进行样式定义。通过示例代码展示单个样式和多个样式的应用，包括样式定义的语法以及在组件中的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习交流：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>