React Native开发之FlexBox代码+图解

来自Leo的原创博客,转载请著名出处

我的stackoverflow


前言

FlexBox布局是React Native的布局核心,鉴于自己对FlexBox还有很多概念不太清楚,这篇文章就当成是总结,并且分享出来给大家。

FlexBox布局能够帮助你更好的帮助你控制控件的大小和位置,Flexbox非常适合Mobile端的适配,我想这也是FaceBook为什么选择FlexBox作为React Native布局的原因吧。

本文参考文章如下

当然,React Native官网也有FlexBox相关的文档,不过讲解的内容不多。

!!!!React Native的迭代更新很快,所以如果有读者发现了本文代码不适配新版本了,欢迎评论,我会及时修改。


Getting Start

react-native init  LearnFlexBox

运行

cd LearnFlexBox/
react-native run-ios

会看到默认的截图

由于模拟器截图实在太宽,所以本文把Demo范围限定在一个小的范围内

重写Render方法

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.exampleContainer}>

        </View>
      </View>
    );
  }

这里的exampleContainer风格如下

  exampleContainer:{
    width:320,
    height:200,
    backgroundColor:‘gray‘
  }

Container和Item

  • Container就是容器,有些属性是设置到Container上的例如alignItems。设置到Container上的属性决定了如何布局内部的Item
  • Item, 在容器中的子视图。设置到Item上的属性,决定了自己在Container中的位置大笑

有过iOS或者安卓原生开发的同学应该能有个更清楚的认识,很像View和Subview的关系


flexDirection

这个Container属性决定了按照哪个方向来布局Item,默认从上到下

添加一个style

  exampleItem:{
    width:30,
    height:30,
    backgroundColor:‘#27E6E2‘
  }

然后,在添加三个子视图

<View style={styles.exampleContainer}>
  <View style={styles.exampleItem}></View>
  <View style={styles.exampleItem}></View>
  <View style={styles.exampleItem}></View>
</View>

然后,修改exampleContainer,添加一个属性flexDirection

  exampleContainer:{
    width:320,
    height:200,
    backgroundColor:‘gray‘,
    flexDirection:‘column‘
  },

当flexDirection设置为column的时候效果

当flexDirection设置为row的时候

注意:React Native的Flexbox目前不支持row-reverse和column-reverse


alignItems-垂直轴上的位置关系

有四个值

‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘

示例代码如下

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘stretch‘,flexDirection:‘row‘}}>
  <View style={{width:50,backgroundColor:‘green‘}}></View>
  <View style={{width:50,backgroundColor:‘blue‘}}></View>
  <View style={{width:50,height:50,backgroundColor:‘red‘}}></View>
  <View style={{width:50,height:60,backgroundColor:‘orange‘}}></View>
</View>

还有一种stretch表示拉伸,拉伸的时候不需要完整的设置高度宽度,比如

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘stretch‘,flexDirection:‘row‘}}>
  <View style={{width:50,backgroundColor:‘green‘}}></View>
  <View style={{width:50,backgroundColor:‘blue‘}}></View>
  <View style={{width:50,height:50,backgroundColor:‘red‘}}></View>
  <View style={{width:50,height:60,backgroundColor:‘orange‘}}></View>
</View>

效果


alignSelf

五个值,当Item有这个属性的时候,会优先读取item的alignSelf来布局,也就是说会覆盖Container的alignItems。例如

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘center‘,flexDirection:‘row‘}}>
  <View style={{width:50,height:30,backgroundColor:‘green‘,alignSelf:‘flex-end‘}}></View>
  <View style={{width:50,height:40,backgroundColor:‘blue‘,alignSelf:‘flex-start‘}}></View>
  <View style={{width:50,alignSelf:‘stretch‘,backgroundColor:‘red‘}}></View>
  <View style={{width:50,alignSelf:‘auto‘,height:60,backgroundColor:‘orange‘}}></View>
</View>

效果


justifyContent-水平轴上的位置关系

五个值

‘flex-start‘,‘flex-end‘, ‘center‘, ‘space-between‘, ‘space-around‘

同样,我们还是举个例子,来看看实际效果

代码如下

<View style={{width:320,height:200,backgroundColor:‘gray‘,justifyContent:‘space-around‘,flexDirection:‘row‘}}>
  <View style={{width:50,height:30,backgroundColor:‘green‘}}></View>
  <View style={{width:50,height:40,backgroundColor:‘blue‘}}></View>
  <View style={{width:50,height:50,backgroundColor:‘red‘}}></View>
  <View style={{width:50,height:60,backgroundColor:‘orange‘}}></View>
</View>


flex-占据剩余空间的权重

例如,如下,不设置宽度,高度一样,三个item,flex都是1,那么每个item的宽度占据1/3

<View style={{width:320,height:200,backgroundColor:‘gray‘,flexDirection:‘row‘}}>
  <View style=![这里写图片描述](http://img.blog.csdn.net/20160524215306065){{flex:1,height:30,backgroundColor:‘green‘}}></View>
  <View style={{flex:1,height:30,backgroundColor:‘blue‘}}></View>
  <View style={{flex:1,height:30,backgroundColor:‘red‘}}></View>
</View>

效果

当我们固定中间宽度为50,然后两边flex都是1的时候


flexWrap-决定在flex的方向上填满后是否换行

两个值,默认不换行

‘wrap‘, ‘nowrap‘

代码

<View style={{width:320,height:200,backgroundColor:‘gray‘,flexDirection:‘column‘,flexWrap:‘wrap‘}}>
  <View style={{width:50,height:30,backgroundColor:‘green‘}}></View>
  <View style={{width:50,height:40,backgroundColor:‘blue‘}}></View>
  <View style={{width:50,height:50,backgroundColor:‘red‘}}></View>
  <View style={{width:50,height:60,backgroundColor:‘orange‘}}></View>
  <View style={{width:50,height:70,backgroundColor:‘pink‘}}></View>
</View>

换行效果

不换行效果


top/bottom/left/right

这个比较直观,距离上下左右的距离

例如,距离top:10,left:10

<View style={{width:320,height:200,backgroundColor:‘gray‘,flexDirection:‘row‘}}>
  <View style={{top:10,left:10,width:30,height:50,backgroundColor:‘green‘}}></View>
</View>

效果


padding相关

与Padding相关的一共有以下几个

  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • paddingVertical
  • paddingHorizontal

例如,一个100*100View在没有padding的时候

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘flex-start‘,paddingLeft:20,paddingTop:10}}>
  <View style={{width:100,height:100,backgroundColor:‘pink‘}}></View>
</View>

效果

设置padding

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘flex-start‘,paddingLeft:20,paddingTop:10}}>
  <View style={{width:100,height:100,backgroundColor:‘pink‘}}></View>
</View>

效果


Border相关

几个相关的属性

  • borderWidth
  • borderTopWidth
  • borderRightWidth
  • borderLeftWidth
  • borderBottomWidth

举个例子

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘center‘,justifyContent:‘center‘}}>
  <View style={{width:50,height:50,backgroundColor:‘pink‘,borderBottomWidth:3,borderColor:‘white‘}}></View>
</View>


margin相关

于margin相关的一共有以下几个属性

  • margin
  • marginBottom
  • marginHorizontal
  • marginLeft
  • marginRight
  • marginTop
  • marginVertical

在不设置margin的情况下

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘center‘,justifyContent:‘center‘,flexDirection:‘row‘}}>
  <View style={{width:30,height:40,backgroundColor:‘pink‘ }}></View>
  <View style={{width:30,height:50,backgroundColor:‘blue‘}}></View>
  <View style={{width:30,height:60,backgroundColor:‘green‘}}></View>
</View>

效果

设置margin的时候

<View style={{width:320,height:200,backgroundColor:‘gray‘,alignItems:‘center‘,justifyContent:‘center‘,flexDirection:‘row‘}}>
  <View style={{width:30,height:40,backgroundColor:‘pink‘ }}></View>
  <View style={{width:30,height:50,backgroundColor:‘blue‘,marginLeft:10,marginRight:20}}></View>
  <View style={{width:30,height:60,backgroundColor:‘green‘}}></View>
</View>

效果


后续

由于没有Web的开发经验,所以React Native的博客更新较慢,这个系列应该会一直更新下去。如果发现问题,欢迎评论,我会及时修正。

时间: 2024-09-30 09:03:14

React Native开发之FlexBox代码+图解的相关文章

React—Native开发之 Could not connect to development server(Android)解决方法

写在最前面: 本来,我是有一篇博客 RN开发之BUG 总结(持续更新) 来专门总结自己在React-Native开发中遇到的各种BUG 以及其解决办法的. 但是,由于 Could not connect to development server是我深恶痛绝的一个超级大BUG. 为什么这么说呢? 因为这个BUG并不容易在网上找到解决方法.网上确实有这个BUG,但是大部分都是解决IOS开发中遇到的,一 些老外的网站中也在讨论这个问题,好不容易找到点和我问题相似的,还并没有给出确定的解决方案,实在是

转 : React Native 开发之 IDE 选型和配置

转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde3050d469be98db815c267e&scene=0&key=18e81ac7415f67c4bcc2eaac3ca13f8d294ec1b8fa5828d4d7f13f2e81cc62f72e55e828ee04e2002284521336a3766d&ascene=0&

React Native开发之IDE(Atom+Nuclide)安装,运行,调试

版权声明:本文为博主原创文章,如需转载请注明出处 目录(?)[-] 前言 MacWindowsLinux 准备工作 安装Atom 安装Nuclide 新建一个工程 自动补全 类型标注 语法检查 跳转到方法或者类型定义 在Nuclide运行项目 在Nuclide中调试 添加断点 Element Inspector 总结 欢迎Follow我的Github,博客会同步在Github的Blog仓库更新.也可以关注CSDN博客的React Native分类 Github地址: LeoMobileDevel

React Native开发之npm start加速

在Windows下好不容易安装好React Native环境之后,运行npm start,结果就是无限被等待,快的话160秒(将近3分钟啊....) 而Mac下因为有watchman所以是飞一样的速度,1秒不到,一般几十到几百毫秒.此处一千一万只草泥飞在胸中奔腾-   所幸找到一个解决方案了,能让npm start也飞起来(500毫秒左右),操作步骤如下: 1.安装watchman,在Windows下暂时处于alpha版本但是可以使用,是一个zip包 https://facebook.githu

React Native开发之expo中camera的基本使用

之前做RN项目没调用过本地摄像头,今天下班早,做了一个简单的小demo:主要实现的功能:点击拍照按钮进入拍照界面,点击flip进行前后摄像头转换,点击开始拍照实现拍照功能(没写保存到本地的功能,大家可以自主开发),代码是参照expo官网的Camera写的一个小demo,大家可以结合的expo官网来看,该加注释的地方都在代码中加了,希望能对你有所帮助. import React from 'react' import { View, Text, TouchableOpacity, Button,

React Native 弹性布局FlexBox

React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件.Flexbuju的主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间. 在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

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,默认