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
邊框顏色
- 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>
);
}