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

提示：在运行一个嵌入了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: 整数

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

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

手把手教React Native实战开发视频教程干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...
【苹果家庭推iiMessage】React Native举行开发仍是iOS，用原生的代码实现类似webview的页面
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容 2.相册 ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
React Native移动开发实战-4-Android平台的适配
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
安卓开发学习日记第二天_破坏陷阱卡之sync的坑_莫韵乐的快乐笔记
安卓开发学习日记第二天前情提要:第一天的日记经过第一天的日记,我们顺利第安装上了Android Studio3.6 第二天内容包括: 1.推荐的文件目录结构 2.如何创建一个项目 3.遇到sync ...
Android原生(Native)C开发之二 framebuffer篇
为什么80%的码农都做不了架构师?>>> Android原生(Native)C开发之二 framebuffer篇如对Android原生(Natvie)C开发还任何疑问,请参阅 ...
React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
ASP.NET自定义控件组件开发第一章第二篇接着待续
ASP.NET自定义控件组件开发第一章第二篇接着待续 ASP.NET自定义控件组件开发第一章第二篇接着待续很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了一些例 ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...

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

justifyContent

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

最新文章

热门文章