react-native样式定义使用StyleSheet

学习交流：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 {
    render() {
        return(
            
                
                
                内边距
                字体属性
                阴影属性
                装饰属性
            
        );
    }
}

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）多个样式使用（数组使用）

字体属性