RN stylesheet

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

/*


 1.  HTML5以;结尾
 React以,结尾
 2.  HTML5中key  value 都不加引号
 React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法,如果value为字符串,需要加引号
 3.  HTML5中,value如果是数字,需要带单位
 React中不需要带单位


 */
/*
 拼接样式,在数组中,位置居后的样式要比位置居前的优先级高,越后写的优先级越高
 */
/*
 内联样式,用大括号括起来

 */

class LessonStyle extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.top, styles.border]}>
        </View>
        <View style={[styles.bottom, styles.border, {borderWidth: 5}]}>
        </View>
      </View>
    )
  }
}

const 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,
    // borderWidth: 3,
    // borderColor: 'black'
  },
  //下层View
  bottom: {
    backgroundColor: 'yellow',
    width: 280,
    height: 110,
    margin: 10,
    //borderWidth: 3,
    //borderColor: 'black'
  },
  //拼接样式,公共的部分
  border: {
    borderWidth: 3,
    borderColor: 'black'
  }
});

AppRegistry.registerComponent('SytleSheet', () => LessonStyle);