React实战-对比ReactJs与ReactNative中的Flex用法

青旅半醒 2022-09-26 03:57 295阅读 0赞

React实战\-对比ReactJs与ReactNative中的Flex用法

无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解决了很大的问题，我们不要再设置如此多的float, 为个元素居中伤透脑筋，以至网上出现有9种元素居中的做法，跟茴香豆的茴有4种写法一样，自从出现flex后，页面布局就变的轻松多了。但是ReactNative与ReactJs中写法又有很多不同。flex的基本用法我们可以直接看Flex的官方文档即可。

1.ReactJs中flex写法与普通html的不同

相比ReactNative来说，ReactJs中flex的写法更接近普通html的flex写法，基本上无障碍，无损伤的继承了css的写法，不同主要在于JSX与html中的写法不同，之前的博文中有提到JSX写法的不同，当然这些不同依然带到了ReactNative中。

2.ReactNative中Flex的写法与ReactJs中写法的不同

除了继承了JSX语法对css命名的特殊性，ReactNative相比ReactJs在flex的写法也有所不同。主要表现在以下几点：

a.在ReactNative中flex的参数只支持单一数字

在ReactNative中可以采用flexFlow:'row'，但如果写成flexFlow:'row, wrap'，将不会起作用。

b.在ReactNative中flexDirection的默认值为column,而css中默认值为row

c.在ReactNative中alignItems默认值为stretch，而css中默认值为flex-start

d.在ReactNative中属性采用JSX中的写法，没有‘\-’,并且第二个单词开始首字母大写（一般如此，非绝对正确）,而css中一般采用小写加‘\-’连接，如：justify-content。

e.Flex的属性值在ReactNative和css中基本相同。

虽然ReactNative中flex属性写法不同，但值却是相同的。如：

flexDirection:'row-reverse'。

至于Flex的用法，还是那句话，想快速入门可以看一眼别人的介绍，细看还是看官网原文，如果你只想简单应用，只需了解主要的几个属性：

l Flex Direction：row,column

定义子元素排列方向，row横向排列，column纵向排列

l Justify Content：flex-start, center, flex-end, space-around,  space-between

定义子元素排列的起点，间隔空间。

l Align Items：flex-start, center, flex-end, stretch

定义子元素排列方向的纵向排列方式，也就是Flex Direction的垂直方向上的排列方式。

l Flex:number

定义子元素所占空间的比例。定义这个元素，width或height会失效。

了解了以上4个属性的用法，也基本了解了flex的用法，可以随意的布局了。

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 React实战-对比ReactJs与ReactNative中的Flex用法

React实战\-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解

青旅半醒/ 2022年09月26日 03:57/ 0 赞/ 296 阅读

相关 React实战-如何快速构建一个ReactNative的Demo

React实战\-如何快速构建一个ReactNative的Demo ReactJs宣称的是一次学习就够了，意思是学习了ReactJs后，在Web端和移动端就都一样处理了。事实

阳光穿透心脏的1/2处/ 2022年09月26日 03:16/ 0 赞/ 291 阅读

相关 React实战-ReactJS+Redux的思考

React实战\-ReactJS+Redux的思考 ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经

妖狐艹你老母/ 2022年07月18日 05:27/ 0 赞/ 266 阅读

相关 React实战-如何在ReactJs中调用Google、Baidu地图

React实战\-如何在ReactJs中调用Google、Baidu地图在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放

喜欢ヅ旅行/ 2022年07月16日 03:43/ 0 赞/ 509 阅读

相关 React实战-ReactJs与传统Web页面中Css的使用差异

React实战\-ReactJs与传统Web页面中Css的使用差异网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的

迷南。/ 2022年07月16日 02:21/ 0 赞/ 214 阅读

相关 React实战-深入分析ReactNative中的动画效果

React实战\-深入分析ReactNative中的动画效果说起动画效果感觉回到JavaScript的起源了，在早期的Web开发中，JS更多的是扮演着页面特效的角

快来打我*/ 2022年07月16日 00:24/ 0 赞/ 626 阅读

相关 ReactNative与NativeScript对比报告

转自：http://www.cnblogs.com/liuxianan/p/react-native-and-native-script.html 综合这段时间对`React

我就是我/ 2022年06月12日 00:46/ 0 赞/ 218 阅读

相关 React实战-React中this的用法

Javascript中的this是一个令人讨厌的东西，对于有着面向对象编程经历的程序员来说更是如此，那么在ReactJs中，this是如何使用的呢。 Javascript从出

墨蓝/ 2022年06月10日 07:09/ 0 赞/ 377 阅读

相关 reactnative props用法

组件定义每个单词的首字母要大写在APP.js里调用 import PropsTest from './propsTest'; 以及在render函数里调

痛定思痛。/ 2022年05月24日 12:10/ 0 赞/ 300 阅读

相关 ReactNative中React Navigation使用

React Navigation 简介 React Navigation提供了一种在屏幕之间切换并管理导航历史记录的方式。如果您的应用程序只使用一个 stack

阳光穿透心脏的1/2处/ 2022年01月19日 00:57/ 0 赞/ 382 阅读