React-Native 中的基本布局技巧

相对布局

React Native 中,position 默认值为 relative,即相对布局。

  • 如果父组件没有设置 flex 值,则子组件不论是否设置 flex ,子组件都不会显示在界面上

如下示例代码中,子组件会等比例的占满屏幕

return (
      
        
        
        
      
    );
  • 如果父组件设置了 flex 值,子组件设置了 flex 值的同时,也设置了高度值,则高度无效

如下示例代码中,子组件会等比例的占满屏幕,设置高度并不影响所占的比例

return (
      
        
        
        
      
    );
  • 如果父组件设置了 flex 值,子组件没有设置 flex 值,只设置了高度值,则高度有效

如下示例代码中,子组件在界面所占的比例受高度控制,最后一个子组件则自动占满剩余空间

return (
      
        
        
        
      
    );

绝对布局

样式设置 position: 'absolute'

  • 绝对布局情况下,设置 flex 不能达到页面整屏占满的效果,需要同时设置组件的宽高,否则父组件与子组件都将无法显示

正确设置父组件的样式方式

return (
      
        
        
        
      
    );
  • 只设置父组件的宽,设置子组件的高度有效,子组件的flex无效

如下示例代码中,只有第一个设置了高度的view会显示在界面上,而设置了flex的view不会显示

return (
      
        
        
        
      
    );
  • 只设置父组件的高,则设置子组件的高度和flex均无效,父组件与子组件都无法显示

如下示例代码中,父组件与子组件都不会显示

return (
      
        
        
        
      
    );
  • 同时设置了父组件的宽和高的前提下,再设置子组件的高度和flex均有效

如下示例代码中,分别设置了高度和flex的view均会显示在界面上

return (
      
        
        
        
      
    );
  • 父组件与子组件同时绝对布局的情况下,且设置绝对布局的子组件写在最后一个时,保持原则一样,则父组件与子组件可正常显示

如下示例代码中,子组件均能正常显示,且设置了flex的view会将剩余的屏幕占满显示,不会被绝对布局的同级子view阻挡

return (
      
        
        
        
      
  • 父组件与子组件同时绝对布局的情况下,且设置绝对布局的子组件没有写在最后一个时,保持原则一样,则绝对布局的子组件不会显示在父组件中,它会被前一个子组件覆盖

如下示例代码中,除相对布局的子组件能正常显示外,绝对布局的子组件会被同级的子view覆盖

return (
      
        
        
        
      
    );

你可能感兴趣的:(React-Native 中的基本布局技巧)