今天开始来完整的讲解和学习下React Native的样式与布局，样式布局决定了颜值，颜值决定成败！呵呵。

第一章：样式与布局

一、样式声明与使用

（一）、声明样式集：

//const:声明关键词 styles:样式集名 
const styles = StyleSheet.create({
  //一个样式
  container: {
        flex: 1, //样式内容
  },
  //一个样式
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },

});

（二）、样式使用：

注：所有核心组件都支持

1、行内样式：

 <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

    在组件后加style={{样式具体值}} 多个样式值用逗号分隔，字符串型的样式值用单引号。

    注：当写入具体样式值时用两个花括号包裹，当写入的是样式集时用一个花括号包裹。

    官方不推荐使用行内样式，因为每次刷新都会被重新创建和渲染。

2、单一样式：

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

   组件中用类似html中的方式加上 style={样式集名.样式名} 必须用花括号包裹，意思是这是一个变量需要计算后获得最终值。

3、多样式[接收一个数组]：

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

   与单一样式唯一区别是，花括号中用方括号将多个样式包裹，并且多个样式之间用逗号分隔。

注：多样式中，从右向左优先级递减，即：当在base中定义了width:10,在background中也定义了width:50,

   那么由于background样式在base右侧所以优先级更高，因此width:50会覆盖width:10,最终结果是width:50.

注：[]此处方括号的意思是数组。

4、根据条件添加样式：

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

书写方法与多样式一样，区别是条件与条件成立时加入的样式。

this.state.active && styles.active

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

5、样式集与行内样式混合添加：

<View
  style={[styles.base, {
    width: this.state.width,
    height: this.state.width * this.state.aspectRatio
  }]}
/>

混写接收的同样也是一个数组，所以最外层{[ ]}包裹，只相当于变量与行内样式的字符串组成的数组。所以行内样式要用{}再次包裹。

二、React native支持的样式表属性：

写在前面：

React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

1、尺寸定位（宽度、高度）

width: 10,  //宽度 不能加单位，默认单位：与设备像素密度无关的逻辑像素点
height: 10, //高度 不能加单位，默认单位：与设备像素密度无关的逻辑像素点

2、边框宽度（值为数字，无需单位，不用引号）

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

3、边框颜色（值为RGB或颜色英文单词，单引号包裹）

borderBottomColor  //底部边框颜色
borderLeftColor    //左边边框颜色
borderRightColor   //右边边框颜色
borderTopColor     //顶部边框颜色
borderColor        //所有边框颜色

4、外边距（值为数字，无需单位，不用引号）

marginBottom            //下外边距
marginLeft              //左外边距
marginRight             //右外边距
marginTop               //上外边距
marginVertical          //上下外边距
marginHorizontalmargin  //左右外边距
margin                  //上下左右外边距

5、内边距（值为数字，无需单位，不用引号）

paddingBottom        //下内边距
paddingLeft          //左内边距
paddingRight         //右内边距
paddingTop           //上内边距
paddingVertical      //上下内边距
paddingHorizontal    //左右内边距
padding              //上下左右内边距

6、背景色（值为RGB或颜色英文单词，单引号包裹）

backgroundColor: '#222222',

7、边框圆角（值为数字，无需单位，不用引号）

borderTopLeftRadius       //左上角圆角
borderTopRightRadius      //右上角圆角
borderBottomLeftRadius    //左下角圆角
borderBottomRightRadius   //右下角圆角
borderRadius              //四角圆角

8、字体相关属性

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') 文字方向 从左到右 从右到左

9、图片相关属性

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

10、图像变换属性

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

11、阴影属性

shadowColor     //阴影颜色
shadowOffset    //阴影位移
shadowOpacity   //阴影透明度
shadowRadius    //阴影圆角

12、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')

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

好了，今天就简单介绍React Native的样式声明与使用和样式属性。

下一篇我们来具体介绍下React Native的布局和部分属性的实际使用。