react native css样式

2017-2-21    分类: css3基础教程,前端资源

react native 布局 RN css 样式
react_native

在react native中使用的样式布局基本都是flex box的布局方式

作用在父容器:

flexDirection //控制子元素的排列方式
--row:横向布局
--column:纵向布局

 

alignItems //控制子元素的对齐方式,(竖直方向)
--flex-start:与父组件的顶部对齐
--flex-end:与父组件的底部对齐
--center:处于父容器的中间位置 (设置此值后,如果子元素有设置flex值,那么height:100%就没效果,widht仍然按比例分配)
--stretch:竖直上填充整个容器,子元素不能设置高度

 

justifyContent //控制子元素的对齐方式,(水平方向)
--flex-start:伸缩项目与父容器左端靠齐。
--flex-end:与父容器右端靠齐。
--center:水平居中。
--space-between:第一个子组件位于父容器左端,最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。
--space-around:所有子组件平均分配在父容器的水平方向上,左右都有留空隙

flexWrap
--nowrap:即使空间不够也不换行。
--wrap:空间不够的话自动换行。

——————————————————

作用在子容器:

alignSelf //设置单个元素对齐方式
--auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样。
--flex-start:与父容器顶部对齐。
--flex-end:与父容器底部对齐。
--center:位于垂直位置。
--streth:垂直拉伸。

 

flex //效果宽、高均按比例分配
1:宽度陪数 (如果只有一个子元素相当于 宽100% 高100%)
2:宽度陪数
3:宽度陪数

https://sanwen8.cn/p/3fdlM7q.html

 

-------------------------------------------------

-------------------------------------------------

RN自带的样式本身就有限不跟pc端一样那么丰富,这里列出RN能识别出来的css属性

alignltems
alignSelf
backfaceVisibility
backgroundColor
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomWidth
borderColor
borderLeftWidth
borderRadius
borderRightColor
borderRightWidth
borderStyle
borderTopLeftRadius
borderTopRightRadius
borderTopWidth
borderWidth
decomposedMatrix
elevation
flex
flexBasis
flexDirection
flexGrow
flexShrink
flexWrap
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
justifyContent
letterSpacing
lineHeight
margin
marginBottom
marginHorizontal
marginVertical
maxHeight
opacity
overflow
overlayColor
paddingHorizontal
paddingVertical
resizeMode
rotation
scaleX
scaleY
shadowColor
shadowOffset
shadowOpacity
shadowRadius
textAlign
textAlignVertical
textDecorationColor
textDecorationLine
textDecorationStyle
textShadowColor
textShadowOffset
textShadowRadius
tintColor
transform
transformMatrix
translateX
translateY
writingDirection
zIndex