ReactNative学习笔记（五）样式&高度宽度&Flexbox布局

样式

• 所有核心组件都接受style属性，建议使用StyleSheet.create来集中定义组件的样式；
• style中可以传入单一的样式，也可以传入样式数组，与css中的规则一样，同一样式对象 处于后面的样式优先级更高 会覆盖前面的样式；
• 样式名基本上遵循了web上的css的命名，但按照JS的语法要求使用了驼峰命名，如css中的background-color 改为backgroundColor；

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
    bigBlue:{
        color:'blue',
        fontWeight:"700",
        fontSize:60,
    },
    red:{
        color:"#f60",
        fontSize:30,
    }
});
export default class BlinkApp extends Component {
    render(){
        return (
            
                just blue
                blue then red
                red then blue
            
        );
    }
}

颜色、字号的简单样式

高度与宽度

const styles = StyleSheet.create({
    textAlignCenter:{
        alignItems:'center'
    },
    greyBackground:{
        backgroundColor: '#f3F3F3'
    },
    greenBackground:{
        backgroundColor: '#00e789',
    },
    sHeight100:{
        height:100, // 指定宽高
    }

});

 // 弹性宽高， 方向的指定与css中一致 flexDirection:column|row
  
  

使用Flexbox布局

• flexDirection —— Flex Direction column(default)|row
  决定布局的主轴是垂直方向（默认垂直方向）还是水平方向
• alignItems —— Layout Direction stretch(default) | center| flex-start | flex-end | baseline
  定义flex子项在flex容器的侧轴（与主轴方向垂直，对RN来说是水平方向）方向上的对齐方式
• justifyContent—— Justify Content flext-start | flext-end | center |space-between | space-around | space-evenly
  用于设置或检索弹性盒子元素在主轴方向（对RN来说是垂直方向）上的对齐方式。

render(){
        return (
            
                flex-start↓
                
                    
                    
                    
                    
                
                flex-end↓
                
                    
                    
                    
                    
                
                center↓
                
                    
                    
                    
                    
                
                space-between↓
                
                    
                    
                    
                    
                
                space-around↓
                
                    
                    
                    
                    
                
            
        );
    }

justifyContent效果图