flex number
用于設定或檢索彈性盒模型對象的子元素如何配置設定空間
flexDirection enum('row', 'row-reverse' ,'column','column-reverse')
flexDirection屬性決定主軸的方向，預設是“column”：
- row：主軸為水準方向，起點在左端
- row-reverse：主軸為水準方向，起點在右端
- column(預設值)：主軸為垂直方向，起點在上沿
- column-reverse：主軸為垂直方向，起點在下沿
flexWrap enum('wrap', 'nowrap')
軸線，wrap換行展示，nowrap不換行（可能會顯示不全）；
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
- justifyContent屬性定義了項目在主軸上的對齊方式
- flex-start（預設值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等
- space-around：每個項目兩側的間隔相等。是以，項目之間的間隔比項目與邊框的間隔大一倍
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
- align-items屬性定義項目在交叉軸上如何對齊
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- stretch（預設值）：如果項目未設定高度或設為auto，将占滿整個容器的高度。
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf決定了元素在父元素的次軸方向的排列方式（此樣式設定在子元素上），其值會覆寫父元素的alignItems的值。
圖檔相關
resizeMode enum('cover', 'contain', 'stretch')
- cover：裁剪展示
- stretch：拉伸展示
- contain：原圖展示
overflow enum('visible', 'hidden') 超出部分是否顯示，hidden為隐藏
tintColor 着色，rgb字元串類型
opacity 透明度
邊框寬度
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- borderColor
邊框顔色
外邊距
- marginBottom
- marginLeft
- marginRight
- marginTop
- marginVertical
- marginHorizontal
- margin
内邊距
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- paddingVertical
- paddingHorizontal
- padding
邊框圓角
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomLeftRadius
- borderBottomRightRadius
- borderRadius
陰影
- shadowColor
- shadowOffset
- shadowOpacity
- shadowRadius
布局
position
- absolute
- relative
left/top/right/bottom 距“左/上/右/下”N個機關
box:{
width:50,
height:50,
backgroundColor:'#f00',//紅色
position :'absolute',
left:30,//左邊距離螢幕左側30機關
} 擷取目前螢幕寬、高
import { Dimensions } from 'react-native';
var { width, height, scale } = Dimensions.get('window');
render() {
return (
<View>
<Text>
螢幕的寬度：{width + '\n'}
螢幕的高度：{height + '\n'}
</Text>
</View>
);
}
關注下面二維碼，訂閱更多精彩内容。
關注公衆号（加好友）：
作者：
王磊的部落格
出處：
http://vipstone.cnblogs.com/