RN 布局篇 LayoutPropTypes.js

解析RN样式依赖包的文件

依赖包的文件地址:react-native/Libraries/StyleSheet/LayoutPropTypes.js
// 显示隐藏,默认属性是flex
display: none,
display: flex,

// 宽高:值为数字或百分比,没有单位
width: 100,
height: 20%,
left: 5,
right: 5,
top: 5,
bottom: 5,
minWidth: 80,
minHeight: 80,
maxWidth: 120,
maxHeight: 120,

// 外边距和内边距 ,padding同margin写法
margin:5,
marginVertical: 5,  //上下外边距
marginHorizontal: 5, //水平外边距
marginTop:5,
marginRight: 5,
marginBotton: 5,
marginLeft: 5,

// 边框
borderWidth: 2,
borderTopWidth: 1,
borderRightWidth: 1,
borderBottonWidth: 1,
borderLeftWidth: 1,

// 定位 默认属性是relative 
position:absolute,
position:relative,
zIndex: -1,

// 弹性布局,
flexDirection: column,  //默认值
flexDirection: row,
flexDirection: row-reverse,
flexDirection: column-reverse,

flex-wrap: nowrap,  //默认值
flex-wrap: wrap,

justifyContent: flex-start, //默认值
justifyContent: flex-end,
justifyContent: center,
justifyContent: space-between,
justifyContent: space-around,

alignItems: stretch,  //默认值
alignItems: flex-start, 
alignItems: flex-end,
alignItems: center,
alignItems: baseline,

alignSelf: auto,  //默认值
alignSelf: flex-start,
alignSelf: flex-end,
alignSelf: center,
alignSelf: stretch,
alignSelf: baseline,

alignContent: flex-start,
alignContent: flex-end,
alignContent: center,
alignContent: stretch,
alignContent: space-between,
alignContent: space-around,

flex: 1,
flexGrow: 2,
flexShrink: 2,
flexBasis: 2,

// 溢出显示方式
overflow: visible, //默认值
overflow: hidden,
overflow: scroll,

// width/height 的比  可用于:若知道图片的比例
aspectRatio: 1,

// 不知道是干嘛用的
direction: inherit. // 默认值
direction: ltr,
direction: rtl,

猜你喜欢

转载自blog.csdn.net/snow51/article/details/80501941
RN