美文网首页
react-native的位置与排列

react-native的位置与排列

作者: sweetwine | 来源:发表于2018-05-21 14:01 被阅读0次
    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";
    }
    

    相关文章

      网友评论

          本文标题:react-native的位置与排列

          本文链接:https://www.haomeiwen.com/subject/szcfjftx.html