常用Style

fontSize: 20,
textAlign: 'center',
color: '#333333',
backgroundColor: '#F5FCFF',

height: 200,
width: 200,

alignItems: 'flex-start',
alignItems: 'center',
alignItems: 'flex-end',
alignItems: 'stretch',

justifyContent: 'flex-start',
justifyContent: 'center',
justifyContent: 'flex-end',
justifyContent: 'space-around',
justifyContent: 'space-between',

flex: 1,

flexDirection:'row',
flexDirection:'column',

flexWrap: 'nowrap', //預設值，單行
flexWrap: 'wrap', //多行

flexGrow: 0,//數字，無單位，當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
flexShrink: 0,//數字，無單位，當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
flexBasis: 0,//子元素的基本大小，作為父元素的大小比較基準，預設值為 0，也因為預設值為 0，所以沒有設定此屬性的時候，會以直接採用 flex-grow 屬性，flex-basis 也可以設為 auto，如果設為 auto，就表示子元素以自己的基本大小為單位。。

backgroundColor: '#F5FCFF',

padding: 5,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5,


margin: 10,
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,

Get Screen Height & Width

import {Dimensions} from 'react-native';

var screenHeight=Dimensions.get('window').height；

var screenWidth=Dimensions.get('window').width；


//Apply Screen Height/Width to style
const styles = StyleSheet.create({
    item: {
        height: screenHeight/2,
        width: screenWidth/3
    },


});