React Native-Layout with Flexbox

一个组件通过使用Flexbox语法来制定它的子组件的布局，通常使用flexDirection,justifyContent,alignItems,来实现布局。

• flexDirection
  • column，垂直布局，默认值或flexDirection :'column',
  • row，水平布局，flexDirection :'row',
• justifyContent
  • flex-start，从开始位置进行布局，justifyContent: 'flex-start',
  • flex-end，从结束位置进行布局，justifyContent: 'flex-end',
  • space-around，周围有空隙布局，justifyContent: 'space-around',
  • space-between，等分布局，justifyContent: 'space-between',
  • center，居中布局，justifyContent: 'center',
• alignItems
  • flex-start，从开始位置进行布局，alignItems: 'flex-start',
  • flex-end，从结束位置进行布局，alignItems: 'flex-end',
  • stretch，拉伸布局，子控件没有固定宽高时，alignItems: 'stretch',
  • center，居中布局，alignItems: 'center',

常见的几种布局：

• 垂直左上

  flexDirection :'column', // 可省略
  justifyContent: 'flex-start',
  

• 垂直左下

  flexDirection :'column', // 可省略
  justifyContent: 'flex-end',
  

• 水平左上

  flexDirection :'row', 
  justifyContent: 'flex-start',
  

• 水平右上

  flexDirection :'row', 
  justifyContent: 'flex-end',
  

• 垂直屏幕居中

  flexDirection :'column', // 可省略
  justifyContent: 'center',
  alignItems:'center',
  

• 水平屏幕居中

  flexDirection :'row', 
  justifyContent: 'center',
  alignItems:'center',