react native 样式

react native react native 样式
创建时间:
阅读:
  1. alignItems
  2. alignSelf
  3. backgroundColor
  4. borderColor
  5. borderStyle
  6. flex
  7. font
  8. margin
  9. padding
  10. position
  11. “textAlign”,文本对齐方式
  12. transform
  13. FlexStyle

alignItems

"alignItems",居中对齐弹性盒的各项 <div> 元素
 例：alignItems:'center',
 -> stretch(项目被拉伸以适应容器)
 -> center(项目位于容器的中心)
 -> flex-start(项目位于容器的开头)
 -> flex-end(项目位于容器的结尾)
 -> baseline(项目位于容器的基线上)
 -> initial(设置该属性为它的默认值)
 -> inherit(从父元素继承该属性)

alignSelf

"alignSelf",居中对齐弹性对象元素内的某个项
例：alignSelf:'center',
-> auto(默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch")
-> stretch(项目被拉伸以适应容器)
-> center(项目位于容器的中心)
-> flex-start(项目位于容器的开头)
-> flex-end(项目位于容器的结尾)
-> baseline(项目位于容器的基线上)
-> initial(设置该属性为它的默认值)
-> inherit(从父元素继承该属性)

"backfaceVisibility",当元素不面向屏幕时是否可见
例：backfaceVisibility:'visible'
-> visible (背面是可见的)
-> hidden  (背面是不可见的)

backgroundColor

"backgroundColor",背景色
例：backgroundColor:'red'
例：backgroundColor:'#cccccc'
-> color   (指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表)
-> transparent (指定背景颜色应该是透明的。这是默认)
-> inherit (指定背景颜色，应该从父元素继承)

borderColor

"borderColor",四个边框颜色
 例：borderColor:'#00ff00'

 "borderLeftColor",左边框颜色
 例：borderLeftColor:'yellow'

"borderRightColor",右边框颜色
 例：例：borderRightColor:'yellow'

 "borderBottomColor",底部边框颜色
 例：borderBottomColor:'red'
 例：borderBottomColor:'#cccccc'
 -> color   (指定背景颜色。在CSS 颜色值 查找颜色值的完整列表)
 -> transparent (指定边框的颜色应该是透明的。这是默认)
 - >inherit (指定边框的颜色，应该从父元素继承)

 "borderBottomLeftRadius",左下角添加圆角边框
 例：borderBottomLeftRadius:10

 "borderBottomRightRadius",右下角添加圆角边框
 例：borderBottomRightRadius:10

 "borderBottomWidth",底部边框宽度
 例：borderBottomWidth:8

 "borderLeftWidth",左边框宽度
 例：borderLeftWidth:10

 "borderRadius",四角圆角弧度
 例：borderRadius:15



 "borderRightWidth",右边框宽度
 例：borderRightWidth:10

borderStyle

"borderStyle",四个边框的样式
例：borderStyle:'dotted'
-> none    定义无边框。
-> hidden  与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
-> dotted  定义点状边框。在大多数浏览器中呈现为实线。
-> dashed  定义虚线。在大多数浏览器中呈现为实线。
-> solid   定义实线。
-> double  定义双线。双线的宽度等于 border-width 的值。
-> groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。
-> ridge   定义 3D 垄状边框。其效果取决于 border-color 的值。
-> inset   定义 3D inset 边框。其效果取决于 border-color 的值。
-> outset  定义 3D outset 边框。其效果取决于 border-color 的值。
-> inherit 规定应该从父元素继承边框样式。

"borderTopColor",上边框颜色
例：borderTopColor：'red'

"borderTopLeftRadius",左上角圆角弧度
例：borderTopLeftRadius：3

"borderTopRightRadius",右上角圆角弧度
例：borderTopRightRadius：4

"borderTopWidth",顶部边框宽度
例：borderTopWidth：13

"borderWidth",四个边框的宽度
例：borderWidth：2

"bottom",图像的底部边缘
例：bottom:20

"color",颜色
例：color:'red'

"elevation",Z轴，可产生立体效果
例：elevation:1

flex

 "flex",让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

例：flex:1

 "flexDirection",设置 <div> 元素内弹性盒元素的方向为相反的顺序
 例：flexDirection:'column'
 -> row ((默认值。灵活的项目将水平显示，正如一个行一样)
 -> row-reverse (与 row 相同，但是以相反的顺序)
 -> column  (灵活的项目将垂直显示，正如一个列一样)
 -> column-reverse  (与 column 相同，但是以相反的顺序)
 -> initial (设置该属性为它的默认值。请参阅 initial)
 -> inherit (从父元素继承该属性。请参阅 inherit)

 "flexWrap",让弹性盒元素在必要的时候拆行
 例：flexWrap:'wrap'
 -> nowrap  (默认值。规定灵活的项目不拆行或不拆列)
 -> wrap    (规定灵活的项目在必要的时候拆行或拆列)
 -> wrap-reverse    (规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序)
 -> initial (设置该属性为它的默认值。请参阅 initial)
 -> inherit (从父元素继承该属性。请参阅 inherit)

font

"fontFamily",字体
例：fontFamily:'courier'

"fontSize",字体大小
例：fontSize:20

"fontStyle",
例：fontStyle:'italic'
-> normal  默认值。浏览器显示一个标准的字体样式。
-> italic  浏览器会显示一个斜体的字体样式。
-> oblique 浏览器会显示一个倾斜的字体样式

"fontWeight",文本的粗细
例：fontWeight:'bold'
-> normal  (默认值。定义标准的字符)
-> bold    (定义粗体字符)
-> bolder  (定义更粗的字符)
-> lighter (定义更细的字符)
-> 100    (定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold)
-> 200
-> 300
-> 400
-> 500
-> 600
-> 700
-> 800
-> 900

"height",设置元素的高度
例：height:200

"justifyContent",在弹性盒对象的元素中的各项周围留有空白
例：justifyContent:'space-between'
-> flex-start  (默认值。项目位于容器的开头)
-> flex-end    (项目位于容器的结尾)
-> center  (项目位于容器的中心)
-> space-between   (项目位于各行之间留有空白的容器内)
-> space-around    (项目位于各行之前、之间、之后都留有空白的容器内)

"left",把图像的左边缘设置在其包含元素左边缘向右5像素的位置
例：left:20

"letterSpacing",字母间距
例：letterSpacing:20

"lineHeight",行高
例：lineHeight:30

margin

"margin",元素的所有四个边距
例：

"marginBottom",下边距
例：marginBottom:50

"marginHorizontal",水平间距，即左边距和右边距
例：marginHorizontal:10

"marginLeft",左边距
例：marginLeft:50

"marginRight",右边距
例：marginRight:50

"marginTop",上边距
例：marginTop:50

"marginVertical",垂直间距，即上边距和下边距
例：marginVertical:10

"opacity",透明度级别
例：opacity：0.5

"overflow",设置overflow属性进行滚动
例：overflow:'hidden'
visible    (默认值。内容不会被修剪，会呈现在元素框之外)
hidden (内容会被修剪，并且其余内容是不可见的)
scroll (内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容)

"overlayColor",
例：

padding

"padding",填充
例：

"paddingBottom",下填充
例：

"paddingHorizontal",左右填充
例：

"paddingLeft",左填充
例：

"paddingRight",右填充
例：

"paddingTop",上填充
例：

"paddingVertical",上下填充
例：

position

"position",定位
例：position:'fixed'
-> absolute    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
-> fixed       生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
-> relative    生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
-> static      默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

"resizeMode",用户调整大小
例：resizeMode:'cover'
-> cover    等比拉伸
-> strech   保持原有大小
-> contain  图片拉伸  充满空间

"right",把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置
例：right:5

"rotation",元素旋转
例：rotation：180

"scaleX",
例：

"scaleY",
例：

"shadowColor",
例：

"shadowOffset",
例：

"shadowOpacity",
例：

"shadowRadius",
例：

“textAlign”,文本对齐方式

 例：textAlign:'left'
 -> left    把文本排列到左边。默认值：由浏览器决定。
 -> right   把文本排列到右边。
 -> center  把文本排列到中间。
 -> justify 实现两端对齐文本效果

textAlign
 "textAlignVertical",
 例：

 "textDecorationColor",下划线文本中下划线的颜色
 例：textDecorationColor:'red'

 "textDecorationLine",显示一条线
 例：textDecorationLine:'underline'
 -> none            默认值。规定文本修饰没有线条。 测试 »
 -> underline       规定文本的下方将显示一条线。  测试 »
 -> overline        规定文本的上方将显示一条线。  测试 »
 -> line-through    规定文本的中间将显示一条线

 "textDecorationStyle",显示一条线的样式
 例：textDecorationStyle:'solid'
 -> solid   默认值。线条将显示为单线。
 -> double  线条将显示为双线。
 -> dotted  线条将显示为点状线。
 -> dashed  线条将显示为虚线。
 -> wavy    线条将显示为波浪线

 "textShadowColor",文字阴影颜色
 例：textShadowColor：'red'

 "textShadowOffset",文字阴影偏移量
 例：textShadowOffset:2

 "textShadowRadius",文字阴影圆角
 例：textShadowRadius:3

 "tintColor",
 例：

 "top",上
 例：

transform

"transform",旋转
例：
none   定义不进行转换。
matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x)  定义转换，只是用 X 轴的值。
translateY(y)  定义转换，只是用 Y 轴的值。
translateZ(z)  定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)  定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x)  通过设置 X 轴的值来定义缩放转换。
scaleY(y)  通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)  通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)  定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)  定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。    测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)  定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图

"translateX",
例：

"translateY",
例：

"width",宽
例：

"writingDirection"文本方向
 auto’,’ltr’,’rtl

FlexStyle

export interface FlexStyle {
    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
    alignItems?: FlexAlignType;
    alignSelf?: "auto" | FlexAlignType;
    aspectRatio?: number;
    borderBottomWidth?: number;
    borderEndWidth?: number | string;
    borderLeftWidth?: number;
    borderRightWidth?: number;
    borderStartWidth?: number | string;
    borderTopWidth?: number;
    borderWidth?: number;
    bottom?: number | string;
    display?: "none" | "flex";
    end?: number | string;
    flex?: number;
    flexBasis?: number | string;
    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    flexGrow?: number;
    flexShrink?: number;
    flexWrap?: "wrap" | "nowrap" | "wrap-reverse";
    height?: number | string;
    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
    left?: number | string;
    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;
    maxHeight?: number | string;
    maxWidth?: number | string;
    minHeight?: number | string;
    minWidth?: number | string;
    overflow?: "visible" | "hidden" | "scroll";
    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";
    right?: number | string;
    start?: number | string;
    top?: number | string;
    width?: number | string;
    zIndex?: number;

    /**
     * @platform ios
     */
    direction?: "inherit" | "ltr" | "rtl";
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 ancjf@163.com

赏

文章标题:react native 样式

本文作者:ancjf

发布时间:2020-09-15, 08:58:46

最后更新:2020-09-15, 09:02:29

原始链接:http://ancjf.com/2020/09/15/react-native-%E6%A0%B7%E5%BC%8F/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2016-2019 Yelog

Built with Hexo and 3-hexo theme

目录
×

喜欢就点赞,疼爱就打赏