StyleSheet

StyleSheet.create()方法

//定义组件
  var App = React.createClass({
      render:function () {
        return(
            <View style={styles.container}>
              /*拼接样式,使用数组的方式,使用多个样式 */
              <View style={[styles.top,styles.border]}>
              </View>
              /*单独增加一个样式对象,在数组中追加{} */
              <View style={[styles.bottom,styles.border,{borderWidth:5}]}>
              </View>

            </View>
        );
      }

  });

  /* 样式 与 h5 的区别:
  * 1.h5中,以 ; 分号结尾
  *   RN中,以 , 逗号结尾
  * 2.h5中,value如果是数字,需要带单位
  *   RN中,不需要单位
  * 3.h5中,key value 都不加引号
  *   RN中,属于javaScript对象,key的名字不能出现'-',需要驼峰命名,如果value为字符串,需要加引号
  *
  * */

 //定义样式
  var styles = StyleSheet.create({
    //外层view
    container:{
      marginTop:25,//驼峰规则,不能使用-分隔
      marginLeft:30,
      backgroundColor:"red",
      width:300,
      height:400
    },
    //上层view
    top:{
      backgroundColor:"green",
      width:280,
      height:250,
      margin:10,

    },
    //下层view
    bottom:{
      backgroundColor:"yellow",
      width:280,
      height:110,
      margin:10,

    },
    //公共样式
    border:{
      borderWidth:3,
      borderColor:"black"
    }

  });