- 首页 > it技术 > >
react-native的位置与排列
type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
export interface FlexStyle {
//作用类似于alignItems，运用于视图内包含多行容器的情况，用法类似justifyContent
alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
// 定义了子视图的对齐方式（顶部对齐、底部对齐、中间对齐、拉伸对齐）
alignItems?: FlexAlignType;
/**
判断子视图是否忽略父视图的alignItems，默认为‘auto’，表示遵守父视图的对齐方式，
当值为其他的时候，就忽略父视图的排列，遵循自身的值
*/
alignSelf?: "auto" | FlexAlignType;
// css3对其的解释为：定义输出设备中的页面可见区域宽度与高度的比率
aspectRatio?: number;
// 边框的宽度
borderBottomWidth?: number;
borderLeftWidth?: number;
borderRightWidth?: number;
borderTopWidth?: number;
borderWidth?: number;
// flexBasis、flexGrow、flexShrink的效果的叠加
flex?: number;
flexBasis?: number | string;
// 空间足够时产生效果：放大比例
flexGrow?: number;
// 空间足够时产生效果：缩放比例
flexShrink?: number;
// 内部子视图的排列方式 从左到右|从上到下|从右到左|从下到上
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
// 是否自动换行 换行|不换
flexWrap?: "wrap" | "nowrap";
// 定义水平方向上如何排列子视图
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
// 间隙宽度：定义容器与容器间的宽度
margin?: number | string;
marginBottom?: number | string;
marginEnd?: number | string;
marginHorizontal?: number | string;
marginLeft?: number | string;
marginRight?: number | string;
marginStart?: number | string;
marginTop?: number | string;
marginVertical?: number | string;
// 填充宽度：定义容器内元素与边框间的宽度
padding?: number | string;
paddingBottom?: number | string;
paddingEnd?: number | string;
paddingHorizontal?: number | string;
paddingLeft?: number | string;
paddingRight?: number | string;
paddingStart?: number | string;
paddingTop?: number | string;
paddingVertical?: number | string;
// 位置相关 绝对位置|相对位置
position?: "absolute" | "relative";
left?: number | string;
right?: number | string;
top?: number | string;
bottom?: number | string;
width?: number | string;
height?: number | string;
maxHeight?: number | string;
maxWidth?: number | string;
minHeight?: number | string;
minWidth?: number | string;
// 当两个视图重叠时，zIndex值大的视图处于上层显示位置
zIndex?: number;
/**
* @platform ios
*/
direction?: "inherit" | "ltr" | "rtl";
}
推荐阅读
