解析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,