iOS-React Native学习04-FlexBox布局

1.FlexBox布局干什么的?

FlexBox就是处理子View和父View之间的关系的.
什么关系? 位置关系 尺寸关系.
说子View在父View的什么位置啊?子View有多宽多高呢....

2.FlexBox布局哪来的?

是针对web和移动开发布局而搞出来.不只是针对手机这些移动开发.浏览器当然也是支持的.

3.React Native的FlexBox?

React Native的FlexBox, 是FlexBox布局规范的一个子集.

4. FlexBox在React Native开发中能解决什么问题?

• 水平和垂直居中
• 自动分配宽度
• 各种机型屏幕的适配
• 浮动布局

5. FlexBox的核心思想

方向问题.
什么方向? -------布局方向
有什么布局方向?------主轴方向和侧轴方向

• 1.如图红色View的主轴方向是纵向的,子View(黄色View)就是纵向布局的

  
  Snip20160801_6.png

• 2.如图黑色view的主轴方向是横向的,自View(黄色view)的布局就是横向的

  
  Snip20160801_7.png

6.FlexBox的常用属性

有哪些常见属性?-----容器属性+元素属性
6.1容器属性

• ①.决定主轴的方向-flexDirection

  • row: 主轴为水平方向, 起点由左端开始
  • row-reverse: 主轴为水平方向. 起点由右端开始
  • column(默认值): 主轴为纵轴方向, 起点在最上面
  • column-reverse: 主轴为纵轴方向, 起点在最下面

// 部分代码

class ViewDemo extends Component { 
 render() {    
    return (     
       <View style={styles.container}>       
          <View style={styles.childViewStyle}> 
                   <Text>            第一个View          </Text>        
           </View>        
          <View style={styles.childViewStyle2}>         
               < Text>            第二个View          </Text>       
          </View>        
          <View style={styles.childViewStyle}>          
                <Text>            第三个View          </Text>        
            </View>      
         </View>    );  }
}

const styles = StyleSheet.create({  
container: {    
width:300,   
 height:500,    
backgroundColor: '#F5EEF5',   
 flexDirection:'row'
  },  
childViewStyle:{    
backgroundColor:'#F5FFEE',    
width:88,    
height:50  
},  
childViewStyle2:{    
backgroundColor:'#F5FFFE',    
width:88,    
height:50  
}
});

• ②.决定子控件在主轴的对齐方式-justifyContent
  当前主轴方向为row

• flex-start(默认):向起始位置靠齐

• • flex-end: 向结束位置靠齐

• center: 向中间位置靠齐

• space-between: 向两端对齐, 控件之间的间隔相等

• space-around:控件平均的分布在行里,两端保留一半的空间

• ③.定义控件在侧轴上的对齐方式-alignItems
  • flex-start:起点对齐
  • flex-end: 终点对齐
  • center: 中点对齐
  • baseline: 第一行文字的基线对齐---------只适用于网页端
  • stretch(默认): 如果项目未设置高度或设置为auto, 将沾满整个容器高度.

当前主轴的放下为:row测试得到如图

flexDirection:'row',
justifyContent:'flex-start',

• ④.换行参数flex-Wrap

• nowrap(默认) : 不换行

• wrap : 换行

// 没有换行情况

flexWrap:'nowrap'

// 换行

flexWrap:'wrap'

6.2元素属性

• ①.flex

关于flex这属性,这是一个比例属性.如图

如果我们没有设置子控件的宽,那么子控件的宽就是随着内容来的.如果我们将宽度设置死了,到时候适配又是问题.所以有了flex,flex后面跟数字.

// 之所以用图片,是因为代码拷过来格式显示没法看~

如图我们设置四个子控件的flex都为1,那么首先四个控件的宽度都是相等的.但是具体等于多少了?

单位宽度=父控件的宽度除以 / 4个控件的flex和(1+1+1+1)

然后具体每一个子控件的宽度=单位宽度*自己flex

flex都是1的情况

• ②.alignSelf
  auto | flex-start | flex-end | center | baseline | stretch
  alignSelf设置控件自己的alignItems对齐方式,不受父控件的alignItems对齐方式影响,覆盖父控件的alignItems对齐方式,和其他子控件的alignItems对齐方式不同

7.获取屏幕宽高

//  方式一,到时候直接用width, height,scale
var Dimensions = require('Dimensions');
var {width, height,scale} = Dimensions.get('window');

// 方式二
var viewWidth = Dimensions.get('window').width;
var viewHeight = Dimensions.get('window').height;
var viewScale = Dimensions.get('window').scale;

4s:w320 h480
5: w320 h568
6:w375 h667
6p:w414 h736