本文共 988 字，大约阅读时间需要 3 分钟。

• react 宽度基于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 和 justifyContent
       
    
   
   
        垂直居中
   
       
    
   
   
        水平垂直居中
   
       
    
   

'use strict';flexContainer: {    // 容器需要添加direction才能变成让子元素flex  column:列  row:行    flexDirection: 'row'},cell: {    flex: 1,    height: 50,    backgroundColor: '#aaaaaa'},var keys = Object.keys(Image.resizeMode).join(' ');// 打印出来的是 contain, cover, stretch 这几种模式/** * * stretch模式图片被拉伸适应屏幕 * cover模式同100px高度模式 * 100px 高度， 可以看到图片适应100高度和全屏宽度，背景居中适应未拉伸但是被截断也就是cover *    contain 模式容器完全容纳图片，图片自适应宽高 * * */