Flexbox布局

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

一般来说，使用flexDirection、alignItems和justifyContent三个样式属性就已经能满足大多数布局需求。

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。

现在来体验下 Flexbox , 在Atom中打开 HellWorld

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。

子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？

默认值是竖直轴(column)方向。

打开HelloWorld/src/page1.js,修改render()为：

export default class Page1 extends Page {
    render() {
        return (

<
ViewPort
>
<
View style={{flex:1,justifyContent:'center',flexDirection:"column"}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
/ViewPort
>

        );
    }
}

cmd + r查看效果：

$flexbox\_column.png$

现在将flexDirection从column修改为row看看效果：

<
View style={{flex:1,justifyContent:'center',flexDirection:"row"}}
>

cmd + r查看效果：

$flexbox\_column.png$

Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。

子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？

对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

现在重新修改render()如下：

export default class Page1 extends Page {
    render() {
        return (

<
ViewPort
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'center'"
<
/Text
>
<
View style={{flex:1,justifyContent:'center',flexDirection:"column" ,backgroundColor:'green'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'flex-start'"
<
/Text
>
<
View style={{flex:1,justifyContent:'flex-start',flexDirection:"column" ,backgroundColor:'gray'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'flex-end'"
<
/Text
>
<
View style={{flex:1,justifyContent:'flex-end',flexDirection:"column" ,backgroundColor:'black'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
/ViewPort
>

        );
    }
}

cmd + r查看效果：

$flexbox\_column\_justify.png$

现在将flexDirection从column修改为row看看效果：

<
View style={{flex:1,justifyContent:'center',flexDirection:"row" ,backgroundColor:'green'}}
>

    ...

<
View style={{flex:1,justifyContent:'flex-start',flexDirection:"row" ,backgroundColor:'gray'}}
>

    ...

<
View style={{flex:1,justifyContent:'flex-end',flexDirection:"row" ,backgroundColor:'black'}}
>

    ...

cmd + r查看效果：

$flexbox\_row\_justify.png$

Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？

对应的这些可选项有：flex-start、center、flex-end以及stretch。

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

现在给render()中添加alignItems：

export default class Page1 extends Page {
    render() {
        return (

<
ViewPort
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'center' alignItems:'center'"
<
/Text
>
<
View style={{flex:1,alignItems:'center',justifyContent:'center',flexDirection:"row" ,backgroundColor:'green'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'flex-start' alignItems:'flex-start'"
<
/Text
>
<
View style={{flex:1,alignItems:'flex-start',justifyContent:'flex-start',flexDirection:"row" ,backgroundColor:'gray'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
Text style={{textAlign:'center'}}
>
"justifyContent:'flex-end' alignItems:'flex-end'"
<
/Text
>
<
View style={{flex:1,alignItems:'flex-end',justifyContent:'flex-end',flexDirection:"row" ,backgroundColor:'black'}}
>
<
View style={{width:50,height:50,backgroundColor:'red'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'orange'}}
>
<
/View
>
<
View style={{width:50,height:50,backgroundColor:'blue'}}
>
<
/View
>
<
/View
>
<
/ViewPort
>

        );
    }
}

cmd + r查看效果：

$flexbox\_row\_alignItems.png$

现在将flexDirection从row修改为column看看效果：

<
View style={{flex:1,alignItems:'center',justifyContent:'center',flexDirection:"column" ,backgroundColor:'green'}}
>

    ...

<
View style={{flex:1,alignItems:'flex-start',justifyContent:'flex-start',flexDirection:"column" ,backgroundColor:'gray'}}
>

    ...

<
View style={{flex:1,alignItems:'flex-end',justifyContent:'flex-end',flexDirection:"column" ,backgroundColor:'black'}}
>

    ...

cmd + r查看效果：

$flexbox\_column\_justify.png$

深入学习

以上已经介绍了一些基础知识，更加详细的请戳这里，但要运用好布局，您还需要很多其他的样式。对于布局有影响的完整样式列表记录在这篇文档中。

现在您对Layout有了基本了解，现在来学习下样式

1.Flexbox布局

Flexbox布局

Flex Direction

Justify Content

Align Items

深入学习

results matching ""

No results matching ""