react-native中flexbox布局总结

最新推荐文章于 2019-02-28 13:55:38 发布
最新推荐文章于 2019-02-28 13:55:38 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kimicsdn/article/details/53529604
版权
本文总结了React-Native中的Flexbox布局，对比了它与Android和iOS布局的区别。Flexbox提供了一种更强大、灵活的布局方式，能够方便地控制相邻控件的比例，并且比Android的LinearLayout和iOS的AutoLayout更易于调整。文中详细解释了flex属性在不同场景下的表现，以及如何根据flexDirection控制组件的宽高填充比率。
摘要由CSDN通过智能技术生成

最近看了react-native的 flexbox的布局,它的布局和安卓ios完全不同，但是可以实现一些效果，监于本人开发过ios和android应用，对布局有一定的了解，遂将flexbox与ios和android中的布局进行比较.

它们都可以控制控件收缩还是拉伸

android:match_parent,wrap_content

ios:     compress resistence priority, hugging priority

flex:    flex=0, flex=1

但是flex的布局功能比ios和android自带的布局方式都强大

1.flex可以方便的控制相邻控件的比例，这在android上可以通过linearlayout来做到，而在ios上不容易做到

2.flex的布局方式更灵活,android中一般会用到LinearLayout,FrameLayout,RelativeLayout,iOS的storyboard和xib中使用AutoLayout来控制控件的缩放关系，难以修改。而flex的布局像是android的LinearLayout内嵌RelativeLayout，比AutoLayout的方式修改灵活。


flex=0相当于android布局中的wrap_content和ios autolayout中的高content hugging priority

flex=1相当于android布局中的match_parent和ios autolyaout中的高content compression resistence priority

一个组件中只有一个flex值，那么flex的值是控制高度还是宽度的呢

这取决于它的父容器的flexDirection的值

当然，对于内

最低0.47元/天 解锁文章
kimicsdn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native入门之使用 flex box 布局
蛐蛐的博客
04-04 265
文档：https://reactnative.cn/docs/flexbox 1.简介 我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用flexDirection、alignItems和justifyContent三个样式属性就已经能满足大多数布局需求。 React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。 ...
react-native-master.zip
10-03
- **Flexbox布局**：React Native的默认布局引擎基于Flexbox，用于创建响应式的跨平台界面布局。 - **热加载**（Hot Reloading）：一种快速迭代开发工具，能在不重启应用的情况下即时看到代码变更的效果。 - **调试...
React Native之FlexBox介绍与使用
黑森林工作室
10-28 1382
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 什么是 FlexBox 布局
ReactNative—FlexBox
大家好，我是一个软妹子—贰小妹
01-25 218
大家好，我是贰小妹，希望我的博客可以帮到你。 一、FlexBox布局 1.1 FlexBox是什么意思呢？ flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化 box（名词）：通用的矩形容器 1.2 什么是FlexBox布局? 弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的...
React Native中的FlexBox
骑驴找马追骆驼_so的博客
01-03 291
关于JSX React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素 React利用虚拟DOM来减少对实际DOM的操作从而提升性能 在JavaScript中嵌入XML结构的语法,于是就有了JSX，利用我们熟悉的HTML语法来创建虚拟DOM，在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响 关于FlexBox 通过弹性的方式来对齐和
React Native--flexbox
寒江蓑笠的专栏
01-17 768
flexbox布局flexbox是React Native应用开发中必不可少的内容，也是最常用的内容。flexbox是由W3C在2009年提出的一种新的布局方案，该布局可以简单快速地完成各种伸缩性的设计。 flexbox是Flexible Box的缩写，即为弹性盒子布局。 flexbox布局由伸缩容器和伸缩项目组成。采用Flex布局的元素称为伸缩容器。伸缩容器的子元素成为伸缩项目，伸缩项目使用伸
react-shop-layout:flexbox和布局ReactNative培训
04-30
flexbox和布局ReactNative培训 锻炼目标 知道如何划分成分 知道如何使用Flex属性来划分应用程序的布局 内容 建立一个服装销售网站，如下所示 教程 将上面的图像划分为Header，Banner和ContentContainer组件。 使用...
react-native-eu-2020-ticket-NWQO-1_react-native_
10-01
Flexbox布局模型是默认的布局方式，用于创建灵活的、响应式的用户界面。 对于网络请求，React Native通常使用第三方库如axios或fetch进行。而数据库存储可以选择AsyncStorage，它是React Native内置的一个简单Key-...
react-native官方demo
02-14
- **布局系统**：React-Native使用Flexbox布局模型，用于控制组件的排列和对齐。 3. **样式系统** - **CSS-in-JS**: React-Native使用内联样式，允许开发者在JavaScript中定义样式，与React组件紧密集成。 - **...
react-native-rapi-ui:React Native组件库
03-25
1. **布局组件**：Rapi UI 包含了用于构建应用程序基本结构的布局组件，如`FlexBox`、`Grid`等，这些组件基于React Native的Flex布局模型，使得开发者能够灵活地控制元素的排列、对齐和分布，适应不同屏幕尺寸。...
React Native——FlexBox布局
cym_bj
02-21 412
一、弹性盒模型(The flexible box Module),又叫FlexBox，意为“弹性布局”，旨在通过弹性的方试来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。  Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；  React native中的FlexBox是这个规范的一个子集。 容器默认存在两
react native--flexbox 布局
青
04-08 481
flexbox 布局 1, display 该属性用来指定元素是否为伸缩容器，其语法为： display:flex | inline-flex HTML代码为： <span class=“flex-container”></span> 下面简要介绍这两个属性值的含义。 flex:这个值用于产生块级伸缩容器，示例CSS代码如下： .flex-co...
React Native FlexBox布局
一步一迹的博客
12-01 2553
这段时间熟悉了一下ReactNative，里面的布局感觉很有意思，跟我以前接触的布局思想有很大不同，所以就自己测试了一些FlexBox的属性，一下是效果图： RN的布局主要依赖于FlexBox系统，它有如下几个主要属性： flex 视图的比重，这里注意了：In React Native flex does not work the same way that it does in CSS
ReactNative之flexbox布局
gzx的博客
06-10 372
ReactNative之flexbox布局 一.伸缩容器属性 1.flexDirection属性 flexDirection属性用于指定伸缩项目在伸缩容器中的排列方向,也就是主轴的方向,它的取值有如下几种情况: 1.row:主轴为水平轴,伸缩项目在伸缩容器中从左向右排列 2.row-reverse:主轴为水平轴,伸缩项目在伸缩容器中从右向左排列 3.colum......
ReactNative入门教程-Flexbox布局
wayne214的博客
11-26 235
ReactNative在进行页面UI编写的时候采用的事Flexbox布局，俗称“弹性盒子”。 使用Flexbox可以在不同的屏幕尺寸上提供一致性的布局结构。 很多时候，使用其中的flexDirection、alignItems、justifyContent这个三个样式属性就能够满足大部分的布局需求。 Flex简介 Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通...
React Native的flexbox的布局
baidu_39503346的博客
02-28 252
flexbox：可快速简单的完成各种伸缩性的设计。由W3C组织提出新的布局方案。 布局模型： flexbox：是由伸缩容器和伸缩项目组成。其中设为display:flex或display:inline-flex的元素称为伸缩容器；伸缩容器的子元素称为伸缩项目。伸缩容器由两根轴组成，即主轴（main axis）和交叉轴（cross axis）. 伸缩容器属性： display：该属性用来指定...
[深入剖析React Native]React Native Flexbox属性讲解
Geek马走日
09-08 2386
React Native通过一个基于Flexbox的布局引擎，在所有移动平台上实现了一致的跨平台样式和布局方案。主要属性 flex flexDirection alignSelf alignItems justifyContent flexWrap 属性讲解flex当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）。class FlexboxReact ex
React Native 入门（九） - Flexbox 弹性盒子布局
王小北的技术博客
10-27 1619
当前 RN 版本：0.49 操作环境：Windows 10 React Native 使用 Flexbox 的规则来指定某个组件的子元素的布局方式，这种方式可以在不同屏幕尺寸的设备上提供一致的布局结构。React Native 中的 Flexbox 的工作原理和 web 上的 CSS 存在一定的差异：在 RN 中 flexDirection 的默认值是 column 而不是 row，而且
react-native弹性布局
最新发布
05-25
React Native弹性布局是一种基于Flexbox布局模型的布局方式，它可以让你更轻松地创建具有弹性的用户界面。Flexbox是一种用于在屏幕上分配空间的CSS3布局模型，它可以将一个容器中的子元素沿着一个主轴和交叉轴进行对齐和排列。在React Native中，弹性布局可以让你使用一系列简单的布局属性来指定容器中的子元素如何进行布局。 具体而言，React Native中弹性布局有以下常用属性： - `flex`：定义一个元素的伸缩能力，默认值为0，即不伸缩。 - `flexDirection`：定义元素在容器中的排列方向，可选值包括`row`(水平方向)、`column`(竖直方向)、`row-reverse`(反向水平方向)和`column-reverse`(反向竖直方向)。 - `justifyContent`：定义元素在主轴上的对齐方式，可选值包括`flex-start`、`center`、`flex-end`、`space-between`(两端对齐)和`space-around`(各个元素之间留有空隙)。 - `alignItems`：定义元素在交叉轴上的对齐方式，可选值包括`flex-start`、`center`、`flex-end`、`stretch`(默认值，拉伸元素以填充交叉轴)和`baseline`(让元素按照它们的基线对齐)。 下面是一个使用弹性布局实现水平居中和竖直居中的例子： ```javascript import React from 'react'; import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 100, height: 100, backgroundColor: 'red', }, }); const App = () => { return ( <View style={styles.container}> <View style={styles.box} /> </View> ); }; export default App; ``` 这里的`container`使用了弹性布局，并且使用了`justifyContent`和`alignItems`来实现水平和竖直居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值