React Native通过一个基于FlexBox的布局引擎,在所有移动平台上实现了一致的跨平台样式和布局方案。
FlexBox布局目前支持的属性有如下6个:
(1)flex
(2)flexDirection
(3)alignSelf
(4)alignItems
(5)justifyContent
(6)flexWrap
接下来,我们一个一个的看一下每个属性的作用。
(1)flex属性
当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)。
var Demo = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={styles.style_1}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={styles.style_1}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={{flex:10, borderWidth:1, borderColor:'red'}}> <Text style={{marginTop:40, fontSize:25}}>1/2高</Text> </View> </View> ); } }); var styles = StyleSheet.create({ style_0:{ flex: 1, }, style_1:{ flex: 5, height: 40, borderWidth: 1, borderColor: 'red', } });
上面的代码,最外层的View是可伸缩的,而且没有兄弟节点和它抢占空间。内层的三个View的flex属性值分别是5、5、10,所以,第一个View和第二个View分别占1 / 4的伸缩空间,最后一个View占1 / 2的伸缩空间。
(2)flexDirection
flexDirection在React Native中只有两个属性值,row(横向伸缩)和column(纵向伸缩)。
var Demo = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={styles.style_1}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={[styles.style_1, {flexDirection:'column'}]}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={{flex:10, borderWidth:1, borderColor:'red'}}> <Text style={{marginTop:40, fontSize:25}}>1/2高</Text> </View> </View> ); } }); var styles = StyleSheet.create({ style_0:{ flex: 1, }, style_1:{ flex: 5, flexDirection: 'row', height: 40, borderWidth: 1, borderColor: 'red', } });
(3)alignSelf
alignSelf的对齐方式主要有四种:flex-start、flex-end、center、auto、stretch。
var Demo = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={[styles.view]}> <Text>自由摆放</Text> </View> <View style={[styles.view, styles.center]}> <Text>居中摆放</Text> </View> <View style={[styles.view, styles.left]}> <Text>居左摆放</Text> </View> <View style={[styles.view, styles.right]}> <Text>居右摆放</Text> </View> </View> ); } }); var styles = StyleSheet.create({ style_0:{ flex: 1, borderColor: 'red', borderWidth: 1 }, view:{ borderWidth: 5, borderColor: 'blue', marginTop: 40, width: 100, height: 40 }, center:{ alignSelf: 'center' }, left:{ alignSelf: 'flex-start' }, right:{ alignSelf: 'flex-end' } });
(4)alignItems
alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中。justifyContent用于垂直居中。
var Demo = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={[styles.view]}> <Text>居中摆放</Text> </View> </View> ); } }); var styles = StyleSheet.create({ style_0:{ flex: 1, borderColor: 'red', borderWidth: 1, justifyContent: 'center', alignItems: 'center' }, view:{ borderWidth: 3, borderColor: 'blue', width: 100, height: 50 } });
相关推荐
Flexbox模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。
主要介绍了浅谈React Native Flexbox布局(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React Native实战之flexbox布局(伸缩属性) 第5讲5、手把手教React Native实战之盒子模型BoxApp 第6讲6、手把手教React Native实战之JSX入门...
创建样式react native是通过StyleSheet.create来创建样式,前面说了样式是对容器和容器里的项目应用的,所以我们创建一个样式:contai
React Native By Example by Richard Kho English | 24 Apr. 2017 | ASIN: B01M31KB4Q | 414 Pages | AZW3 | 4.46 MB Key Features Work on native APIs and UI Elements using React Native Get the best of both...
mac端可视化调试react或者reactnative工具,可以调试redux应用状态
在 React Native 中利用现有的 JavaScript 和 React 知识,就可以开发和部署功能完备的、真正原生的移动应 用,并同时支持 iOS 与 Android 平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三 方库,以及...
2.3 在React Native 中创建组件 2.4 宿主平台接口 11 2.5 小结 12 第3章 构建你的第一个应用 13 3.1 搭建环境 13 3.2 创建一个新的应用 17 3.3 探索示例代码 24 3.4 开发天气应用 27 3.5 小结 40 第4章 ...
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, ...
ReactNative布局样式大全,比如如下: 布局的: "alignItems", 对外垂直对齐 flex-start、flex-end、center、auto、stretch "alignSelf",相对水平对齐 flex-start、flex-end、center、auto、stretch "flexDirection...
React and React Native by Adam Boduch English | 8 Mar. 2017 | ASIN: B01MQ1GHCS | 604 Pages | AZW3 | 7.22 MB Key Features Build React and React Native applications using familiar component concepts ...
react native 显示本地图片
React Native版本的ViewPager控件,自动播放,无限循环。项目地址:https://github.com/race604/react-native-viewpager 效果图:使用说明: 运行 npm 安装 react-native-viewpager --save代码如下:var ViewPager...
autoresponsive_react_native_sample, 面向ReactNative的自动响应网格布局库 autoresponsive_react_native_sample自动响应的网格布局库的 ReactNative 。 CI平台状态 repoiOS autoresponsive_react_native_samp
本篇文章主要介绍了浅谈React Native 中组件的生命周期,非常具有实用价值,需要的朋友可以参考下
react native 实现水波纹效果,效果非常棒哦
By bringing the advantages of ReactJS to mobile, React Native transforms every web developer into a potential mobile developer. Unlike existing JavaScript-for-mobile approaches, React Native actually ...
ReactNative中文文档.chm
React Native Cookbook English | 5 Jan. 2017 | ISBN: 1786462559 | 437 Pages | AZW3/MOBI/EPUB/PDF (conv) | 54.26 MB Key Features Build rich and engaging user experiences in React Native while ...