Andriod React Native 样式表中可用样式属性

写了这么多篇Android React Native的博文，基本上把复杂的东西都搞定了，接下来来看看一些轻松的东西，和布局有关，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你只要在样式表中书写一个不存在的样式，就会报一大堆错，提示你该样式不存在，然后提供所有可用的样式给你，如图

下面的样式就是样式表中所有可用的属性。

"alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"

接下来我们来一一解释一下。不过在这之前，我们还需要解释一下再React中，样式表的几种使用方法。

样式的声明

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: ‘#222222‘,
  },
  active: {
    borderWidth: 2,
    borderColor: ‘#00ff00‘,
  },
});

使用样式

" data-snippet-id="ext.aa509d6f30a32f005f24a8d6e4ff9d13" data-snippet-saved="false" data-codota-status="done"><Text style={styles.base} />
<View style={styles.background} />

也可以接收一个数组

<View style={[styles.base, styles.background]} />

也可以根据条件来应用样式

" data-snippet-id="ext.3bbd9d8827ab51d4f76bc1d214047d14" data-snippet-saved="false" data-codota-status="done"><View style={[styles.base, this.state.active && styles.active]} />

假如this.state.active是true，styles.active就会被应用，如果为false，styles.active就不会被应用。

当然也是支持下面的这种写法

" data-snippet-id="ext.f05f6af519aa220be500507b7324e73e" data-snippet-saved="false" data-codota-status="done"><View
  style={[styles.base, {
    width: this.state.width,
    height: this.state.width * this.state.aspectRatio
  }]}
/>

接下来来讲讲样式表中的具体属性。

定位

定位分为相对定位和绝对定位，属性名为position，属性值为absolute和relative。

当使用绝对布局时，定位根据屏幕来进行。

var AwesomeProject = React.createClass({
  render: function() {
    return (
    <View style={styles.container}>
        <View style={styles.box1}/>
        <View style={styles.box2}/>
        <View style={styles.box3}/>
        <View style={styles.box4}/>
   </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:‘#ff0‘//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:‘#f00‘,//红色
    position :‘absolute‘,
    left:30,//左边距离屏幕左侧30单位
  },
  box2:{
    width:50,
    height:50,
    backgroundColor:‘#0f0‘,//绿色
    position :‘absolute‘,
    top:30,//上边距离屏幕上侧30单位
  },
  box3:{
    width:50,
    height:50,
    backgroundColor:‘#f0f‘,//紫色
    position :‘absolute‘,
    right:30,//右边距离屏幕右侧30单位
  },
  box4:{
    width:50,
    height:50,
    backgroundColor:‘#00f‘,//蓝色
    position :‘absolute‘,
    bottom:30//下边距离屏幕下侧30单位
  }
});

效果图如下。

当对应的值为负数时，方向与原方向相反，即如果top为-50，则会整个移出到屏幕外（向上移到50个单位）。

那么相对布局又是怎么样的呢

var AwesomeProject = React.createClass({

  render: function() {
    return (
    <View style={styles.container}>
        <View style={styles.box1}/>
   </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:‘#ff0‘//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:‘#f00‘,//红色
    position :‘relative‘,
    left:30,
    top:30,
  },
});

效果图

可以看到设置了top和left后，相对于不使用定位的位置向右向下移动了30单位，如果值为负数，也是往相反的方向移到。

但是如果设置了right和bottom后，又会怎么样呢

var styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:‘#ff0‘//黄色
  },
  box1:{
    width:50,
    height:50,
    backgroundColor:‘#f00‘,//红色
    position :‘relative‘,
    right:30,
    bottom:30,
  },
});

其实它的效果就是对应的top和left为负值的情况。距离原来位置的右侧30单位，距离原来位置下侧30单位，即向上向左平移30单位。原来位置就是不使用定位时的位置。如图

默认情况下使用的是相对定位

边框宽度

borderBottomWidth //底部边框宽度
borderLeftWidth  //左边边框宽度
borderRightWidth //右边边框宽度
borderTopWidth //顶部边框宽度
borderWidth  //所有边框宽度

你可以使用设置所有边框的宽度，也可以设置指定某条边的宽度。

边框颜色

同边框宽度属性，属性值为字符串类型的rgb表示方式

borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
borderColor

外边距

marginBottom
marginLeft
marginRight
marginTop
marginVertical
marginHorizontal
margin

值得注意的是marginVertical相当于同时设置marginTop和marginBottom，marginHorizontal相当于同时设置marginLeft和marginRight，margin相当于同时设置四个

内边距

paddingBottom
paddingLeft
paddingRight
paddingTop
paddingVertical
paddingHorizontal
padding

背景色

背景色，属性值为字符串类型的rgb表示方式

backgroundColor

边框圆角

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderRadius

宽高

width
height

Flex布局相关

相关内容见Flex 布局教程：语法篇和Flex 布局教程：实例篇，个人觉得写得很清晰

flex number
flexDirection enum(‘row‘, ‘column‘)
flexWrap enum(‘wrap‘, ‘nowrap‘)
alignItems enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)
alignSelf enum(‘auto‘, ‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)
justifyContent enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘space-between‘, ‘space-around‘)

字体相关属性

color 字体颜色
fontFamily 字体族
fontSize 字体大小
fontStyle 字体样式，正常，倾斜等，值为enum(‘normal‘, ‘italic‘)
fontWeight 字体粗细，值为enum("normal", ‘bold‘, ‘100‘, ‘200‘, ‘300‘, ‘400‘, ‘500‘, ‘600‘, ‘700‘, ‘800‘, ‘900‘)
letterSpacing 字符间隔
lineHeight 行高
textAlign 字体对齐方式，值为enum("auto", ‘left‘, ‘right‘, ‘center‘, ‘justify‘)
textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum("none", ‘underline‘, ‘line-through‘, ‘underline line-through‘)
textDecorationStyle enum("solid", ‘double‘, ‘dotted‘, ‘dashed‘) 貌似没效果，修饰的线的类型
textDecorationColor 貌似没效果，修饰的线的颜色
writingDirection enum("auto", ‘ltr‘, ‘rtl‘) 不知道什么属性，写作方向？从左到右？从右到左？

图片相关属性

resizeMode enum(‘cover‘, ‘contain‘, ‘stretch‘)
overflow enum(‘visible‘, ‘hidden‘) 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度

其中resizeMode 中的三个属性，contain是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示

测试代码如下


var AwesomeProject = React.createClass({

  render: function() {
    return (
    <View style={styles.container}>
       <Image source={{uri:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘}} style={styles.img}></Image>
    </View>
    );
  },
});

var styles = StyleSheet.create({
  container:{
    backgroundColor:‘#ff0‘//黄色
  },
  img:{
    flex:1,
    height:150,
    resizeMode:"contain"
  },

});

效果图如下图显示

将高度改成50，则进行缩小

cover是指按实际大小进行显示，超出部分进行裁剪，将属性值改成cover之后的效果图如下

stretch是指将图像进行拉伸显示，将属性值改为stretch后的效果如下图所示

图像变换

scaleX:水平方向缩放
scaleY:垂直方向缩放
rotation:旋转
translateX:水平方向平移
translateY:水平方向平移

阴影

shadowColor
shadowOffset
shadowOpacity
shadowRadius
时间： 2024-08-08 23:46:32

Andriod React Native 样式表中可用样式属性的相关文章

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

css样式表中的样式覆盖顺序

css样式表中的样式覆盖顺序 - - ITeye技术网站http://spartan1.iteye.com/blog/1526735 重点归纳: 查找一些教材中(w3schools等),只说css的顺序是“元素上的style”>“文件头上的style元素”>“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明.经过测试和继续搜索,得知优先级如下排列: 或者以下也可以称之为一些优先原则(by liwei 20140803) 1.样式表的元素选择器选择越精确,则其中的样式

样式表中的样式及其布局常用标签

样式表中的样式及其布局1.大小:width宽度,height高度.2.背景:backgrpund-color,backgrpund-image,backgrpund-repeat,backgrpund-position,backgrpund-attachment,backgrpund-size.3.字体:font-family,font-size,font-style,font-weight,text-decoration:(underline,overline,lin-through,none

css样式表中的样式覆盖顺序(转)

转自:http://spartan1.iteye.com/blog/1526735 有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的

css样式表中设置table的第一列的宽度是固定值

table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

在XSLT样式表中插入VBScript脚本进行数学计算

继上次我写了篇文章<在XSLT样式表中使用莱布尼兹级数计算π的近似值>后,我发现在XSLT中使用模板的递归调用,有下面两个缺点:1)易读性差,有失灵活:2)效率低下.因此,我又想了一个新的策略实现在XSLT中的一些复杂的计算工作,这就是在XSLT中嵌入脚本,本文以VBScript为例描述了这一过程 现有XML文档pi.xml如下: <?xml version="1.0" encoding="utf-8"?> <?xml-styleshe

CSS 样式表中padding 的用法

CSS中padding 描述的是内边距的意思,margin是外边距.QSS中同样的道理. 1. padding表示内边距的意思,margin---外边距.2. CSS的 padding 属性定义元素边框与元素内容之间的空白区域.3. padding 接受长度值或百分比值,但不允许使用负值.4. 示例:如果希望所有内边距都是10 像素,只需要设置:padding:10px; 就可以了.5. 也可以分别设置4个边的内边距,只需通过它们的单独属性,分别设置上.右.下.左内边距:* padding-to

不允许修改SQLserver2008r2表中字段的属性问题

SQLserver2008r2修改表中字段的属性时弹出 点击工具->选项,取消阻止保存要求重新创建表的更改