【React Native】React Native元素样式设置

　　学习React Native时，总是会将样式的设置和JavaScript的样式设置混淆。特地总结一下使用上的问题并将其与CSS样式进行对比。
　　

---

　　 React Native中文网上明确说React Native的样式就是JavaScript的样式，只是按照JS的语法使用了驼峰命名法。而且推荐使用StyleSheet.create的方式来创建样式。看看这些常用样式的做法：

 <Text style={styles.bigblue}>just bigblue</Text>
 <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>

而styles的定义是这样的：

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

上面使用样式的过程中，通过数组设置多个样式，靠后的样式对象具有更高的优先级，也就是说后面的样式可能覆盖前面的样式。下面的文字显示为蓝色：

<Text style={[styles.red, styles.bigblue]}>红色会被蓝色覆盖</Text>

　上面的的使用是style={[styles.bigblue, styles.red]}，这里的styles.bigblue和styles.red都是定义过的样式，还可以在其中再添加普通样式(需要用大括号括起来)：

  　<View style={[styles.bigblue, styles.red, { marginTop: 20 }]}>

上面创建样式再引用来添加样式的方法是最常用的方法。还有更为简单的内联样式.
内联样式style={{, , , , , }} ，在两个大括号中间各个属性用多好分开：

<Text style={{color:'red', fontSize:30}}> 内联样式的Text</Text>

关于React Native的样式的使用大概就是注意上面这些了，下面对比一下
JS中的样式的设置。

---

对比JavaScript的样式

JavaScript的外联样式在CSS文件中通过元素选择器，属性选择器，类选择器等将选取的元素设置成指定样式：
CSS文件：

        table {
            height: 400px;
            margin: 15px auto 15px;
        }

        #startButton,#freshButton {
            width: 150px;
            height: 35px;
        }

        td {
            width: 120px;
            height: 70px;
            text-align: center;
            background: rgba(160, 80, 10, 0.8);
        }

　可以看到，CSS的外联样式中，多个指定元素，类选择器等选择元素之间是不需要分隔符号的。每个选择器跟随一个大括号来设置样式。
　而在React Native中，也是一个大括号完成样式设置，大括号前有一个冒号，创建的多个样式之间，是需要逗号来分开的。并且，在单个样式中的各个属性值是逗号分割，而CSS中是分号分割。
　
JavaScript的内联样式：

 <div style="font-size:18px;
                height:100px;
                width:20px;
                background-color:red;
    ">

直接在style=” … ; …. ; … ;” 在引号中写上属性和属性值。用分号分隔。

　CSS的内联样式中，style=“ ；；”,大括号中直接写属性和属性值，并用分号分隔。而在React Native的内联样式中，style={{ , ,}} 定义属性和属性值用逗号分隔。

　React Native中为了避免属性写错而没有报错信息，需要尽量将属性写到创建表中，也就是使用外联样式。

---

可参见博客： http://blog.csdn.net/dingxiaowei2013/article/details/54142488