写了这么多篇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‘,
  },
});

使用样式

<Text style={styles.base} />
<View style={styles.background} />

也可以接收一个数组

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

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

<View style={[styles.base, this.state.active && styles.active]} />

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

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

<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