React Native入门 认识Flexbox布局

Flexbox布局是由W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式。

ReactNative实现了Flexbox布局的大部分功能。

Flexbox布局所使用的属性,基本可以分为两大类:

  1. 决定子组件排列规则的属性,例如:flexDirection , flexWrap, justifyContent, alignItems等。
  2. 决定自身的显示规则的属性,例如:alignSelf, flex等

[1] flexDirection

    设置子组件的排列顺序,默认column(纵向排列),其他row(横向排列)

代码:

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.view1}></View>
          <View style={styles.view2}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: ‘center‘,
    //alignItems: ‘center‘,
    flexDirection: ‘row‘, //这里显式声明为row,将横向排列,否则默认纵向排列
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
  view1: {
    height: 150,
    width: 150,
    backgroundColor: ‘red‘
  },
  view2: {
    height: 150,
    width: 150,
    backgroundColor: ‘green‘
  }
});

如图:

[2]flexWrap 

  设置是否换行,默认值nowrap(不换行),其他wrap

当我们将两个子View的宽换为200时,绿框将溢出屏幕,而只显示一半

  view1: {
    height: 200,
    width: 200,
    backgroundColor: ‘red‘
  },
  view2: {
    height: 200,
    width: 200,
    backgroundColor: ‘green‘

如图:

将container样式改为wrap, 溢出的绿框将会另起一行。

[3] justifyContent

    justifyContent 属性表示该组件的子组件横向排列的其父容器的哪个位置。

    取值有:flex-start, flex-end, center, space-between, space-around

   

  container: {
    flex: 1,
    //justifyContent: ‘center‘,
    //alignItems: ‘center‘,
    flexDirection: ‘row‘,
    flexWrap: ‘wrap‘,
    justifyContent: ‘space-around‘, //修改的这一行
    backgroundColor: ‘#F5FCFF‘,
  },

flex-start:贴左

flex-end:  贴右

center:   子组件群横向居中

space-between:空白在子组件中间

space-around:空白在子组件周围(每个子组件的两边)

[4] alignItems

  属性表示该组件的子组件纵向排列的其父容器的哪个位置。  

   取值:flex-start, flex-end, center, baseline, stretch

center子组件群父容器的纵向向居中

flex-start:贴父容器顶

flex-end: 贴父容器底

baseline:现象与flex-start一致(待补)

stretch: 现象与flex-start一致(待补)

[5] alignSelf

  表明某个特定组件的排列情况

  取值:flex-start, flex-end, center, stretch

center: 当前组件基于父组件的布局后进行居中(父布局时横向排列,则纵向居中;横向排列,则纵向居中)

flex-start:当前组件基于父组件的布局后进行贴左(同上)

flex-end:当前组件基于父组件的布局后进行贴右(同上)

[6] flex

  flex属性可以让组件动态的去计算和配置自己所占用的空间大小,取值是数值

代码:

  container: {
    flex: 1, //这个父布局的flex必须要,它代表的是它在其父布局的比重,没有将是一片空白
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
  view1: {
    flex: 1,
    backgroundColor: ‘red‘
  },
  view2: {
    flex: 1,
    backgroundColor: ‘green‘
  }

结果:

可以看出flex,类似与Android 的weight(比重),将父布局的子布局的flex元素取出对比来计算出其实际大小。

当将绿色组件的flex属性改为2时,绿组件占父布局的三分之二,可见flex越大,所占父布局的空间越大

原文地址:https://www.cnblogs.com/gradyblog/p/8981604.html

时间: 2024-11-05 21:35:37

React Native入门 认识Flexbox布局的相关文章

3、手把手教React Native实战之flexbox布局

flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 按照伸缩流的方向布局 伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴 flexbox目前还处于

4、手把手教React Native实战之flexbox布局(伸缩属性)

###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空间,也不放大,语法为:flex-grow:整数值 3.flex-shrink 定义伸缩项目的收缩能力,默认值为1 ,其语法为:flex-shrink:整数值 4.flex-basis 用来设置伸缩项目的基准值,剩余的空间按比率进行伸缩,其语法为:flex-basis:length | auto,默认

3、手把手教React Native实战之flexbox布局(RN基础)

flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 按照伸缩流的方向布局 伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴 flexbox目前还处于

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

React Native入门-刘望舒

React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性)和State(状态)

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native入门(二)Atom+Nuclide安装、配置与调试

相关文章 React Native入门 前言 上一篇文章我们搭建了开发环境,并写了个Hello World.这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装.配置与调试.本文所讲的内容只适用于Mac平台. 1.开发IDE选择 React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide.Android Studio的同门WebStorm(收费).Sublime Text 3.Visual Studio Code和De

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)