React Native从零开始（二）Flexbox布局，和布局属性

React Native从零开始（二）Flexbox布局，和布局属性

一、什么是FlexBox
我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

Flexbox是由伸缩容器和伸缩项目组成。 任何一个元素都可以指定Flexbox布局，伸缩容器的子元素可以成为伸缩项目，伸缩项目使用伸缩布局模型来排版。
在默认的情况下，伸缩容器由两根轴组成：主轴（main axis）、交叉轴(cross axis)。
主轴的开始位置是main start，结束位置main end。
交叉轴的开始位置是cross start，结束位置是cross end。
伸缩项目在主轴上占据的空间叫main size。交叉占据的空间叫cross size。



二、我们开始创建这个工程吧
1、利用命令行创建一个工程



时间可能会比较长，请耐心等待



这样就完成了工程的创建

2、打开可以用AndroidStudio运行也可以用命令行运行
因为现在大多数的手机都是5.0以上所以在命令行中或者AndroidStudio命令行中执行

react-native start service

作为一个Android程序猿还是喜欢用Studio，我感觉Studio运行起来会比命令行快，难道是错觉？

用Android Studio打开项目中Android文件

我们直接运行



正常情况下是这个样子的，但是如果你的服务没有开启的话，那么会报如下错误。




也就是我们在Android
4000
Studio命令行中开启服务就好，并重新reload就行
react-native start

三、Flexbox属性和布局属性



打开这个文件，ios的话应该是下面那个。
So开始吧
首先我们更改里头的控件和控件的属性

const styles = StyleSheet.create({
container: {
flexDirection:'row'
},
text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:50,
height:50,
margin:20
},
text2:{
fontSize:30,
backgroundColor:'green',
textAlignVertical:'center',
textAlign:'center',
width:50,
height:50,
margin:20
},
text3:{
fontSize:30,
backgroundColor:'yellow',
textAlignVertical:'center',
textAlign:'center',
width:50,
height:50,
margin:20
},
});

export default class FlexboxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text1}>
1
</Text>
<Text style={styles.text2}>
2
</Text>
<Text style={styles.text3}>
3
</Text>
</View>
);
}
}

效果：


那么先来看看三个主要的属性
1、Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

flexDirection enum('row', 'row-reverse', 'column', 'column-reverse') 有四种属性，其中column为默认属性



代码

container: {

},

row为水平方向



代码

container: {
flexDirection:'row'

},

row-reverse水平反方向



代码

container: {
flexDirection:'row-reverse'

},

column默认的垂直方向



代码

container: {
flexDirection:'column'

},

column-reverse垂直反方向



代码

container: {
flexDirection:'column-reverse'

},

2、Justify Content
在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')其中flex-start为默认的。



代码

container: {
flexDirection:'row',
justifyContent:'flex-end'

},

container: {
flexDirection:'row',
justifyContent:'center'

},

为了看的更加清晰我将margin属性去掉，可以看出space-between是内部控件距离均匀分布
container: {
flexDirection:'row',
justifyContent:'space-between'

},

控件均匀分布并且和边距也是均匀分布
container: {
flexDirection:'row',
justifyContent:'space-around'

},

3、Align Items
在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 

alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的align-items表现一致，默认值为stretch。访问https://developer.mozilla.org/en-US/docs/Web/CSS/align-items来进一步了解。

container: {
flexDirection:'column',
alignItems:'flex-start',

},

container: {
flexDirection:'column',
alignItems:'flex-end',

},

container: {
flexDirection:'column',
alignItems:'center',

},

去掉了宽高属性
container: {
flexDirection:'column',
alignItems:'stretch',

},
text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',

},

如果主轴是row方向的话需要设置他的高度  否则看不到效果

container: {
flexDirection:'row',
alignItems:'center',
height:500

},

4、alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 
alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值。其表现和CSS上的align-self一致（默认值为auto）。

父布局的是
container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:1

},
text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:70,
height:70,
margin:10,
alignSelf:'flex-start'

},

他会覆盖父布局的效果

5、borderBottomWidth number 

设置下边框的高度

6、borderLeftWidth  number 

设置左边框高度

7、borderRightWidth number

设置右边框高度

8、borderTopWidth number 

设置上边框高度

9、borderWidth

text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:70,
height:70,
margin:10,
borderWidth:15

},

10、bottom number 

bottom值是指将本组件定位到距离底部多少个逻辑像素（底部的定义取决于position属性）。

它的表现和CSS上的bottom类似，但注意在React Native上只能使用逻辑像素值（数字单位），而不能使用百分比、em或是任何其他单位。

这里我们发现他是在居中的基础上距离底部的位置

text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:70,
height:70,
margin:10,
bottom:50

},

11、position
如果您想使用特定的逻辑像素相对于它的父节点来定位子节点，请设置子节点具有绝对位置.。
如果你想将一个孩子定位为某个不是其父的东西，那就不要使用样式。使用组件树。



如果将子空间设置
d0b8
成了absolute的话那么，就不在flex布局的属性中了

text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:70,
height:70,
margin:10,
bottom:50,
position:'absolute'
},

12、flex number 

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the yoga library at https://github.com/facebook/yoga.
When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

（译文，可能会有问题所以请指教）

在ReactNaitve Flex的功能和Css不同。Flex是一个数字而不是字符串，

当Flex是一个正数，它使组件可伸缩，它的大小将按照比例伸缩。因此，Flex设置为2的组件将需要两倍的空间作为一个组件与Flex设置为1。

当Flex为0，该组件是根据宽度和高度大小，确定他的伸缩。

当Flex是- 1，该组件通常大小根据宽度和高度。然而，如果没有足够的空间，该组件将收缩其minwidth和minheight。

flexgrow，flexshrink，和flexbasis功能和CSS相同。

container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:-1,

},

container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:0,

},

container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:1,

},

13、flexBasis num

设置第一个弹性盒元素的初始长度为 30 像素：

text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',
width:70,
height:70,
margin:10,
flexBasis:30
},

14、flexGrow num

定义子项宽度之和不足父元素宽度时，子项拉伸的比例第二个的拉伸比例是其他的5倍

这里没有设置宽度
text1:{
fontSize:30,
backgroundColor:'red',
textAlignVertical:'center',
textAlign:'center',

height:70,
margin:10,
flexGrow:1
},
text2:{
fontSize:30,
backgroundColor:'green',
textAlignVertical:'center',
textAlign:'center',

height:70,
margin:10,
flexGrow:5
},
text3:{
fontSize:30,
backgroundColor:'yellow',
textAlignVertical:'center',
textAlign:'center',

height:70,
margin:10,
flexGrow:1
},
});

15、flexShrink num

让第二个元素收缩到其他元素的三分之一：跟上一个类似

16、flexWrap enum('wrap', 'nowrap')

如果控件多的情况下会显示不开那么就需要这个属性了

显示不开
container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:1,

},

container: {
flexDirection:'row',
alignItems:'center',
backgroundColor:'blue',
flex:1,
flexWrap:'wrap'

},

17、height number、width number

高度

18、left number 、right number、top number

left值是指将本组件定位到距离左边多少个逻辑像素（左边的定义取决于position属性）。

它的表现和CSS上的left类似，但注意在React Native上只能使用逻辑像素值（数字单位），而不能使用百分比、em或是任何其他单位

19、margin number 

marginBottom number #

marginHorizontal number 相当于设置了Left和Right

marginVertical number  相当于设置了Top和Bottom

外边距

20、maxHeight number 、maxWidth number、minHeight number、minWidth number

21、padding number、paddingBottom number、paddingHorizontal number、paddingLeft number、paddingRight number 、paddingTop number 、paddingVertical number 

类似与Margin

22、overflow enum('visible', 'hidden', 'scroll') #

overflow 属性规定当内容溢出元素框时发生的事情。

23、zIndex number

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。