【React Native 安卓开发】----（Flexbox布局）【第二篇】

来源：互联网发布：淘宝模块配色代码编辑：程序博客网时间：2024/06/05 11:11

提示：在运行一个嵌入了RN的工程里面需要先进入到工程根目录运行
npm start 然后运行工程在模拟器上每次改动js文件保存后，点击两次R键，就可直接刷新项目。如果是真机摇一摇选择load js 即可更新

Flexbox是什么？

Flexbox:用来指定某个子元素布局，Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
个人理解类似于安卓中的RelativeLayout，只是类似，便于安卓小伙伴方便理解。
下面先看一下运行后的结果，贴出了js代码：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput} from 'react-native';class hello extends Component{  render(){    return(      <View style = {{flex:1}}>          <View style={{width:50,height:50,backgroundColor:'powderblue'}}/>          <View style={{width:50,height:50,backgroundColor:'skyblue'}}/>          <View style={{width:50,height:50,backgroundColor:'steelblue'}}/>      </View>    );  }};AppRegistry.registerComponent('hello', () => hello);

这里写图片描述

Flexbox容器三个重要属性

flexDirection, justifyContent, alignItems
有个这三个属性我们就能实现子元素任意摆放。
接下来让我们一一探索一下。

flexDirection

在组件的style中指定flexDirection可以决定布局的主轴。
flexDirection:’row’ 横向
flexDirection:’column’ 纵向
默认是column

style = {{flex:1,flexDirection:'row'}}

这里写图片描述
<—————————————————————————>

style = {{flex:1,flexDirection:'column'}}

这里写图片描述
从这张图可以看出来和我们第一张一样，可以说明flexDirection不写默认是column。

justifyContent

justifyContent是确定子元素在主轴上的位置，是在中间，在起始点还是终点。有flex-start、center、flex-end、space-around以及space-between我们一一分析。

style = {{flex:1,flexDirection:'column',justifyContent:'center'}}

从代码中可以看出我们主轴是纵向的，主轴上的位置为center
这里写图片描述

<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'flex-start'}}

这里写图片描述
<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'flex-end'}}

这里写图片描述
<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'space-around'}}

space-around是在主轴上平均分布比例1：1：1
这里写图片描述
<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'space-between'}}

这里写图片描述
space-between是将首尾占据之后，在这两个之间平分。
<—————————————————————————>

alignItems

alignItems是确定子元素在辅轴上的位置，所谓辅轴就是与主轴垂直的轴。分别有flex-start、center、flex-end以及stretch。
下面让我们看看效果。

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center'}}

这里写图片描述
这里主轴是纵轴，主轴上的位置是居中，辅轴上的位置也是居中。
<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'flex-start'}}

这里写图片描述
<—————————————————————————>

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'flex-end'}}

这里写图片描述

<—————————————————————————>
最后一个是stretch–填充。这个是最麻烦的。首先当你直接设置alignItems:’stretch’发现没有出校填充的效果。这是因为你需要把对应的宽高限制去掉才会有显示。比如当你主轴是纵轴那你需要把宽去掉才有效果，如果主轴是横轴需要把高度去掉。如下代码和图片便于理解。

 <View style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'stretch'}}>          <View style={{height:50,backgroundColor:'powderblue'}}/>          <View style={{height:50,backgroundColor:'skyblue'}}/>          <View style={{height:50,backgroundColor:'steelblue'}}/>      </View>

这里写图片描述

这里我的主轴是纵轴所以我把宽度取消。
想要更有体会，自己可以一个个属性切换体验一下。

Flexbox伸缩项目的属性

这里大家可能会混乱那上面的属性是什么。上面是Flexbox容器的属性，下面要介绍的是容器里面具体项目使用到的属性。

order

定义项目的排列顺序，数值越小排列越靠前，默认为0，语法order: 整数

11 0