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<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',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）样式属性以（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!