ReactNative （四）FlexBox 布局基础

感谢两位大佬的文章

总结

父布局常用属性
flexDirection 决定主轴方向

justifyContent 主轴的对齐方式



alignItems 侧轴的对齐方式

flexWrap 轴线的排列方式

子布局常用属性
flex 比重

alignSelf 决定自己对齐方式

屏幕信息获取

定位的知识

间距
内间距外间距 padding和margin

padding

外间距

感谢两位大佬的文章

https://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=4&sn=1e54c10974c4efacd78d7fc3d0da60bd&scene=19#wechat_redirect

http://blog.csdn.net/a_zhon/article/details/78040711

总结

flexDirection的方向将绝对那条线是主轴

● flexDirection：决定主轴的排列方式，默认值是竖直轴(column)方向；取值=[column、row]

● justifyContent：决定其子元素沿着主轴的排列方式；取值=[flex-start、center、flex-end、space-around、space-between]

● alignItems：决定其子元素沿着次轴（与主轴垂直的轴）排列方式；取值= [flex-start、center、flex-end、stretch]（注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）

父布局常用属性

flexDirection 决定主轴方向

该属性决定主轴的方向（即项目的排列方向）。

row：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column(默认值)：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

justifyContent 主轴的“对齐方式”

flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

flex-end：伸缩项目向一行的结束位置靠齐。

center：伸缩项目向一行的中间位置靠齐。

space-between：两端对齐，项目之间的间隔都相等。

space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

alignItems 侧轴的“对齐方式”

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐 。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flexWrap 轴线的排列方式

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

子布局常用属性

flex 比重

相当与 android里面的 LinearLayout weight 一样

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<View style={{flex: 1, height: 100, backgroundColor: 'red',justifyContent: 'center', alignItems: 'center'}}>
<Text>1</Text>
</View>
<View style={{flex: 2, height: 100, backgroundColor: 'yellow',justifyContent: 'center', alignItems: 'center'}}>
<Text>2</Text>
</View>
<View style={{flex: 1, height: 100, backgroundColor: 'green',justifyContent: 'center', alignItems: 'center'}}>
<Text>1</Text>
</View>
</View>

alignSelf 决定自己对齐方式

“auto | flex-start | flex-end | center | baseline | stretch”

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

屏幕信息获取

获取当前屏幕的宽度、高度、分辨率

const Dimensions = require('Dimensions');
const {width, height,scale} = Dimensions.get('window')
export default class PublishApp extends Component {
render() {
return (
<View style={styles.container}>
<Text>
当前屏幕的宽度:{width + '\n'}
当前屏幕的高度:{height + '\n'}
当前屏幕的分辨率:{scale + '\n'}
</Text>
</View>
)
}
}

定位的知识

与前面所学的css定位不同，在React Native中定位不需要再父组件中设置position属性。

结论：通常情况下设置position和absolute，定位的效果是一样的，但是如果父组件设置了内边距，position会做出相应的定位改变，而absolute则不会。

间距

内间距，外间距 padding和margin

在前面学习css的样式中，我们可以给行内标签和非行内标签设置内边距和外边距，那么在React Native中是否也是遵循同样的规律呢？我们一起来研究下。

padding

在inline和非inline元素上的padding的使用情况：



运行结果如下：



结论：在React Native中，inline和非inline中padding的用法是可行的。

外间距

在inline和非inline元素上的margin的使用情况：



运行结果如下：