React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)

版权声明:本文仅供个人学习。

CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

布局源码

import React, { Component } from ‘react‘;
import {
  Platform,
  StyleSheet,
  View,
  Image,
} from ‘react-native‘;

const instructions = Platform.select({
  ios: ‘Press Cmd+R to reload,\n‘ +
    ‘Cmd+D or shake for dev menu‘,
  android: ‘Double tap R on your keyboard to reload,\n‘ +
    ‘Shake or press menu button for dev menu‘,
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={require(‘./img/point.png‘)}/>
        <Image style={styles.image} source={require(‘./img/point.png‘)}/>
        <Image style={styles.image} source={require(‘./img/point.png‘)}/>
      </View>
    );
  }
}

水平布局(不设置朝向,则默认为竖直布局)

const styles = StyleSheet.create({
    container: {
        flexDirection: ‘row‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

竖直布局(不设置朝向,则默认为竖直布局)

const styles = StyleSheet.create({
    container: {
        flexDirection: ‘column‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});


默认样式 顶部 水平居左/左上角

const styles = StyleSheet.create({
  container: {

  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
    background: ‘#00000033‘
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘flex-start‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
    background: ‘#00000033‘
  }
});

顶部 水平居中

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: ‘center‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

顶部 水平居右/右上角

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: ‘flex-end‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

居左 竖直居中

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

水平且垂直居中(显示在屏幕中央)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

居右 竖直居中

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘flex-end‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

底部 水平居左/左下角

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘flex-end‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

底部 水平居中

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘flex-end‘,
    alignItems: ‘center‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

底部 水平居右/右下角

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘flex-end‘,
    alignItems: ‘flex-end‘,
  },
  image: {
    width: 40,
    height: 40,
    padding: 20,
  }
});

设置 flexDirection 属性,改变的是主轴的方向,如果不设置 flexDirection 属性,则默认布局朝向是竖直方向的,上面的例子是 flexDirection: column(竖直朝向)的效果,可以用 flexDirection: row(水平朝向) 和 flexDirection: column(竖直朝向) 来设置布局朝向。如果在 style 中添加 flexDirection: row 属性,则上述效果会改变,如下述例子(建议尝试上述样式基础上、添加 flexDirection: row 后的效果) 
理解:flexDirection: column(竖直朝向)时, x 轴为主轴,justifyContent 属性控制子控件相对 x 轴的 上/中/下 位置,y 轴为副轴,alignItems 属性控制子控件相对 y 轴的 左/中/右 位置;flexDirection: row(水平朝向)时, y 轴为主轴,justifyContent 属性控制子控件相对 y 轴的 左/中/右 位置,x 轴为副轴,alignItems 属性控制子控件相对 x 轴的 上/中/下 位置

默认或设置为 flexDirection: column 时

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘flex-start‘,
        alignItems: ‘center‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: ‘column‘,
        justifyContent: ‘flex-start‘,
        alignItems: ‘center‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

设置为 flexDirection: row 时

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: ‘row‘,
        justifyContent: ‘flex-start‘,
        alignItems: ‘center‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});


justifyContent 的属性值

上述代码中用到了 justifyContent 属性的 flex-start(默认值):左对齐、center: 居中、flex-end:右对齐,但 justifyContent 还有2个属性值

下面的这两个属性值,可以搭配 alignItems 的 flex-start、flex-end、center 三个属性搭配使用

‘space-between’:两端对齐,项目之间的间隔都相等

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘space-between‘
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

‘space-around’:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘space-around‘
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

alignItems 的属性值

上述代码中用到了 alignItems 属性的 flex-start(默认值):上对齐、center: 居中、flex-end:下对齐,但 alignItems 还有2个属性值

下面的这两个属性值,可以搭配 justifyContent 的 flex-start、flex-end、center 三个属性搭配使用

‘baseline’: 项目的第一行文字的基线对齐

//TODO 没看到效果呢

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: ‘baseline‘
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

‘stretch’(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

//TODO 没看到效果呢

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: ‘stretch‘
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});


flex-grow 的属性值:定义项目的放大比例

默认为0,如果所有 item 的 flex-grow 属性都为1,则它们将等分剩余空间。如果某一个 item 的flex-grow属性为2,其他 item 都为1,则该 item 占据的剩余空间将比其他 item 多一倍

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flexGrow: 1,
        width: 40,
        height: 40,
        padding: 20,
    }
});

const styles = StyleSheet.create({
    container: {
        flexDirection: ‘row‘,
        flex: 1,
    },
    image: {
        flexGrow: 1,
        width: 40,
        height: 40,
        padding: 20,
    }
});


flex-wrap 的属性值:如果一条轴线排不下,换行。默认情况下,项目都排在一条线上(又称”主轴线”)。flex-wrap 属性定义

有三个属性值:nowrap(默认):不换行;wrap:换行、第一行在前;wrap-reverse:换行、第一行在后

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexWrap: ‘wrap‘,
    },
    image: {
        width: 40,
        height: 40,
        padding: 20,
    }
});

原文地址:https://www.cnblogs.com/xihehua/p/10857730.html

时间: 2024-11-08 19:57:50

React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)的相关文章

React Native中的网络请求

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

Facebook React Native 中文教程一:介绍

React Native 中文版 Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/),本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html

react native中如何往服务器上传网络图片

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

react native中Unable to load script from assets &#39;index.android.bundle&#39;解决方案

刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个解决方案,分享一下. 解决这个问题的方案是: 进入你该项目的根目录下的 android目录下的app目录下的src文件下的mian文件,(可能说的有点绕),在main件夹下,创建一个assets文件,这个文件是rn的资源文件夹! 之后用dos进入你的项目根目录,执行一下命令: react-nativ

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映

在 React Native 中使用 Redux 架构

前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也只有一个 Store,而且只用一个 state 树来管理组件的状态.随着应用逐渐变得复杂,React 将组件看成状态机的优势仿佛变成了自身的绊脚石.因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化.Redux 试图让状态的变化变得可预测.Redux

react native中一次错误排查 Error:Error: Duplicate resources

最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate resources”,什么意思呢,就是打包资源有重复,后来查看了一下,发现打包到android/app/src目录下的静态文件重名了. 重现步骤: 1:通过vscode打开项目,运行打包命令 react-native ram-bundle --entry-file index.js --platfo

在 React Native 中使用 moment.js 無法載入語系檔案

moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以只寫 moment().get('year'),可讀性增強許多. 問題 React Native 0.29.x 預設使用 ES6,並支援 import 語法.問題出在如果遵照官方網站的說明去載入語系檔,會發生找不到模組 (cannot find module) 的錯誤.推測可能是 moment.js