- react native寬度基于pt為單位, 可以通過Dimensions 來獲取寬高,PixelRatio 獲取密度。
- 基于flex的布局
view默認寬度為100%
水平居中用alignItems, 垂直居中用justifyContent
基于flex能夠實現現有的網格系統需求,且網格能夠各種嵌套無bug - 圖片布局
通過Image.resizeMode來適配圖片布局,包括contain, cover, stretch
默認不設置模式等于cover模式
contain模式自適應寬高,給出高度值即可
cover鋪滿容器,但是會做截取
stretch鋪滿容器,拉伸 - 定位
定位相對于父元素,父元素不用設置position也行
padding 設置在Text元素上的時候會存在bug。所有padding變成了marginBottom - 文本元素
文字必須放在Text元素里邊
Text元素可以相互嵌套,且存在樣式繼承關系
numberOfLines 需要放在最外層的Text元素上,且雖然截取了文字但是還是會占用空間
alignItems
alignSelf,
backfaceVisibility,
backgroundColor,
borderBottomColor,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderLeftColor,
borderLeftWidth,
borderRadius,
borderRightColor,
borderRightWidth,
borderStyle,
borderTopColor,
borderTopLetRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
bottom,
color,
flex
flexDirection,
flexWrap,
fontFamily,
fontSize,
fontStyle,
fontWeigt,
height,
justifyContent,
left,
letterSpacing,
lineHeight,
margin,
marginBottom,
marginHorizontal,
marginLeft,
marginRight,
marginTop,
marginVertical,
opacity,
overflow,
padding,
paddingBottom,
paddingHorizontal,
paddingLeft,
paddingRight,
paddingTop,
paddingVertical,
position,
resizeMode,
right,
rotation,
scaleX,
scaleY,
shadowColor,
shadowOffset,
shadowOpacity,
shadowRadius,
textAlign,
textDecorationColor,
textDecorationLine,
textDecorationStyle,
tintColor,
top,
transform,
transformMatrix,
translateX,
translateY,
width,
writingDirection