[ReactNative] 02--style & width/height & FlexBox
来源:互联网 发布:淘宝软文范例 编辑:程序博客网 时间:2024/05/22 16:38
style
在ReactNative中,所有的组件都接收style的属性,类似于Html的css样式.
style属性可以是一个简单的js对象,也可以是一个js对象的数组,数组中后面的样式优先级大于前面的样式,如果重复,以后面的为准.
在写样式的时候可以直接在style属性中直接写,如:
<Text style={{color: 'red'}}>我是红色</Text>
也可以通过StyleSheet.create
集中管理样式,如:
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: config.css.color.appBackground }, body: { flex: 1 }, item: { flexDirection: 'row', backgroundColor: config.css.color.white, height: 100, width: Dimen.window.width, borderTopWidth: 1, borderTopColor: config.css.color.line }})
链接: 布局样式属性查询
宽高
屏幕的宽高
我们可以通过
Dimensions
来获取当前屏幕的宽高:let window = { width: Dimensions.get('window').width, height: Dimensions.get('window').height}
组件的宽高
组件的宽高决定了其在屏幕中的显示的尺寸.
我们可以通过在
style
中设置width
和height
来直接设置组件的宽高;也可以通过设置
flex
属性来填充空间,通常情况下,我们设置flex: 1
指定某个组件填充整个父控件. 当有多个并列的子组件使用flex: 1
的时候,子组件会按照当前控件的排列方向平均分配给子组件,类似于android中的weight
:<View style={{flex: 1}}> <View style={{flex: 1}}>view1</View> <View style={{flex: 2}}>view2</View></View>// 此时View会平分为3份,view1占1份,view2占2份
另外当父组件没有固定
width
和height
,或者设置flex
的时候,这个时候父组件的尺寸为0,此时,子组件尺寸也将为0,将不会显示出来.
Flexbox
ReactNative的flexbox规则类似于web中的css.
flexDirection
flexDirection
可以指定当前view的内部的主轴方向,默认为column
沿着Y轴,也可以设置为row
沿着x轴.flexWrap
flexWrap
表示View中的子组件达到屏幕宽度的时候是否可以换行,默认是nowrap
不换行,可以设置wrap
让子组件适应屏幕,进行换行justifyContent
justifyContent
表示当前沿着当前的flexDirection
设置的主轴方向上,子组件的排列方式.- flex-start: 默认,居左
- center: 居中
- flex-end: 居右
- space-between: 两端对齐
- space-around: 平均分配剩余空间
alignItems
alignItems
表示与flexDirection
相反的轴的子组件的排列方式.- center
- flex-start
- flex-end
- stretch 拉伸到和父容器相同
alignSelf
alignSelf
表示子组件自身的在当前View中的排列方式,会覆盖alignItems
- flex-start
- center
- flex-end
后记
前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧.
准备通过blog将这段时间学习的东西和踩得坑好好总结.
你也可以认为这是一系列的通过项目学习ReactNative的教程,( ̄▽ ̄)感觉自己在给自己挖坑.
- [ReactNative] 02--style & width/height & FlexBox
- HTML5 Canvas 的width/height 与style.width/height
- scrollWidth() clientWidth() offsetWidth() style.width() screen.height()
- JavaScript中的style.width/height和offsetWidth/height区别
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- php 去除图片以及DIV的width、height、style
- offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
- offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
- offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
- offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
- width height
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 基础篇章:React Native之Flexbox的讲解(Height and Width)
- javascript控制css中style.width和style.height属性时单位px的问题
- 用javascript控制css中style.height和style.width时应注意px单位问题
- 用javascript控制css中style.height和style.width时应注意px单位问题
- win7 设置电源管理方案
- 自定义HtmlTextView,让textView显示多种颜色的文字
- EventBus使用详解
- CentOS7 (精简操作指令)
- W/ResourceType: No package identifier when getting value for resource number 0x00000034
- [ReactNative] 02--style & width/height & FlexBox
- 准备学习的技能
- python模块与包的导入
- Linux编程基础之epoll简析
- PHP设计模式(2)
- ArcGIS Engine 几何对象和WKB的转换
- Elasticsearch5.0 安装问题集锦
- Html5 新特性
- @Column