ReactNative学习——样式定义

1、行内样式定义

 <View style={{backgroundColor:"#ff0000",flex:1,margin:30}}></View>

2、使用StyleSheet定义样式

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

class Hello extends Component {
    render() {
        return (
            <View style={styles.rootview}></View>
        );
    }
}

let styles = StyleSheet.create({
    rootview: {
        backgroundColor: "#ea9879",//背景颜色
        flex:1,//相当于android中的权重widget
        padding:15,//和android中的padding意义一样
        margin:30,//和android中的margin意义一样
        borderRadius:15,//边框转角度数，相当于shape中的conners
        borderColor:"#00ff00",//边框颜色
        borderWidth:5,//边框宽度
        shadowColor:"#343",//阴影颜色
        shadowOpacity:0.4,//阴影透明度，值范围0——1
        shadowRadius:2,//阴影偏移角度
        shadowOffset:{
          height:1,//阴影垂直方向偏移距离
          width:1//水平方向偏移距离
        }
    }
})


//指定默认显示的类，也可以直接在class前面带上
export default Hello

3、行内样式和StyleSheet组合使用

 //使用中括号[]，可以使用同时使用两种方式定义的样式，行内样式优先级最高，
 //当StyleSheeet和行内样式定义了同一个属性时，会优先使/用行内样式

 class Hello extends Component {
    render() {
        return (
            <View style={[styles.rootview,{margin:50}]}></View>
        );
    }
}

let styles = StyleSheet.create({
    rootview: {
        backgroundColor: "#ea9879",
        flex:1,//xiangd
        padding:15,
        borderRadius:30,
        borderColor:"#ff0000",
        borderWidth:5,
        shadowColor:"#343",
        margin:10,
        shadowOpacity:0.4,
        shadowRadius:2,
        shadowOffset:{
          height:1,
          width:1
        }
    }
})