React-Native layout

Left image {flex-direction: row}, Right image {flex-direction: column}
  • 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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一個組件通過使用Flexbox語法來制定它的子組件的布局,通常使用flexDirection,justifyCon...
    JoyceZhao閱讀 631評論 0 6
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,330評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 前言 學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人...
    珍此良辰閱讀 20,710評論 15 16