React Native之FlexBox布局
参考原文链接:https://www.cnblogs.com/wujy/p/5841685.html
弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。
Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间。
=====================================
再来说说justifyContent和alignItems:
justifyContent是相对于主轴的对齐方式,而alignItems是相对于交叉轴的对齐方式。
那么,这个主轴和交叉轴如何确定呢?
初学者会认为水平方向就是主轴,垂直方向就是交叉轴;错!
主轴和交叉轴是相对于flexDireaction的值而言的!
flexDireaction 主轴 交叉轴
row 水平方向 垂直方向
column 垂直方向 水平方向
那么你明白了吗?
=====================================
然后是默认宽度问题
我们都知道块级标签如果不设置宽度,通常都是独占一行的,在React Native中的组件中需要设置flexDirection:'row',才能在同一行显示,flex的元素如果不设置宽度,都会百分之百的占满父容器。
=====================================
然后是关于样式
1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象;
<View style={{fontSize:40, width:80,}}> </View>
2)调用样式表:{样式类.属性}
<View style={styles.container}></View>
3)样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
4)多个样式表:{[样式类1, 样式类2]}
<View style={[styles.container, styles.color]}>
React Native之FlexBox布局的更多相关文章
- React Native,flexbox布局
Flexbox布局 flex:使组件在可利用的空间内动态地扩张或收缩.flex:1会使组件撑满空间.当有多个组件都指定了flex的值,那么谁的flex值大谁占得空间就大,占得大小的比例就是flex值的 ...
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- React Native知识1-FlexBox 布局内容
一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...
- react native 之页面布局
第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...
- 从零学React Native之06flexbox布局
前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,f ...
- React Native 系列(四) -- 布局
前言 本系列是基于React Native版本号0.44.3写的.RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局. CS ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...
- React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...
随机推荐
- 题解——code[vs] 1506 传话(传递闭包)
裸的传递闭包 直接Floyd暴力即可 #include <cstdio> #include <algorithm> #include <cstring> using ...
- Ubuntu yindaoxiufu 引导修复(Boot Repair)
Ubuntu yindaoxiufu 引导修复(Boot Repair) from: http://blog.csdn.net/piaocoder/article/details/50589667 ...
- [js] - js中类(伪)数组装正规数组
今天的js中使用了自定义的原型方法去重后,再调用这个获取的去重的数组传入另一个含有for循环的方法时, console.log出错: dimensions:createTime,华联石化,海油石化,青 ...
- 几个优化SQL查询的方法
1.什么是执行计划 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条记录,那查询优化 ...
- Dispose in c#
在标准的Dispose模式中,真正的IDisposable接口的Dispose方法并没有做实际的清理工作,它其实是调用了下面的这个带bool参数且受保护的的虚方法: protected virtual ...
- POJ 3415 Common Substrings(长度不小于K的公共子串的个数+后缀数组+height数组分组思想+单调栈)
http://poj.org/problem?id=3415 题意:求长度不小于K的公共子串的个数. 思路:好题!!!拉丁字母让我Wa了好久!!单调栈又让我理解了好久!!太弱啊!! 最简单的就是暴力枚 ...
- python学习 day018打卡 反射
本节主要内容: 1.isinstance,type,issubclass 2.区分函数和方法 3.反射(重点) 一.isinstance,type,issubclass issubclass():判断 ...
- Tarjan模板题——牛的舞会
题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- Java——String,StringBuffer,StringBuilder
String 一经创建,不可更改,每次更改都是创建新对象,销毁旧对象 StringBuilder 创建后可修改,多线程不安全 StringBuffer 创建后可修改,多线程安全 StringBuffe ...