ReactNative--StyleSheet樣式表

樣式表就是在view的層次結構布置好了之后，確定大小，位置等屬性

樣式表可以使用外聯也可以使用內聯

這就是外聯，樣式是寫在外面的

綠色的是內聯樣式

最好不要寫內聯樣式，不利於修改和維護

樣式最好單獨寫一個地方，比較容易更改

創建一個樣式表使用StyleSheet.create

創建之后里面可以寫多個樣式，用逗號隔開，樣式中的數字不加單位

例子

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

var HelloWorld = 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>
    );
  }
});

//定義樣式
var styles = StyleSheet.create({
  container:{
    marginTop:25,
    marginLeft:30,
    backgroundColor:"red",
    width:300,
    height:400
  },
  top:{
    backgroundColor:"green",
    height:250,
    margin:10,
  },
  bottom:{
    backgroundColor:"yellow",
    height:110,
    margin:10,
  },
  border:{
    borderWidth:3,
    borderColor:"black",
  }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);