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,
}
});
React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)的更多相关文章
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- React Native中加载指示器组件ActivityIndicator使用方法
这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...
- [RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示
React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的 ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
随机推荐
- Bcompare 提示 “这个授权密钥已被吊销” 解决方法
Bcompare 提示 “这个授权密钥已被吊销” 解决方法 打开文件夹 %appdata%\Scooter Software 找到相应的版本,例如 Beyond Compare 3 删除里面的 BCS ...
- windows程序意外关闭子订重启脚本
window程序意外关闭自动重启脚本实现 @echo off :1 tasklist|find /i "xxxx"||start yyyy ping/n 11 127.1> ...
- jquery左划出现删除按钮,右滑隐藏
jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...
- 使用openoffice转pdf,详细
期由于项目的需求,需要word文档转pdf在线预览,由于一直没有接触这块,所以花了将近四天时间才弄明白. 写这篇文章的主要目的是加深自己的记忆,同时方便以后在用. (最近有使用了这个功能,发现这篇文章 ...
- 使用PS进行切图
一,设置PS 使用PS进行切图前的设置: 1,打开PS----打开PSD图片----点击窗口-----分别把:历史记录,信息,图层,三个打勾. 历史记录:可以回到之前想要的步骤,特别是不小心把图层的文 ...
- js与json的区别,json的概述,json与面向对象,json与对象的转换
<script> //js与json的区别,json的概述,json与面向对象,json与对象的转换 //json的概述:json(javascript object Notation,j ...
- 转,sql 50道练习题
SQL语句50题 -- 一.创建教学系统的数据库,表,以及数据 --student(sno,sname,sage,ssex) 学生表--course(cno,cname,tno) 课程表--sc( ...
- java上传1t文件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用.此控件PC全平台支持包括mac,linux系统的文件上传,文章末尾将附上控件下载与教程链接 ...
- 当margin和padding的值是百分比时,如何计算
对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...
- Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...