007_ReactNative: Layout with Flexbox

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

Flexbox: 用于在不同的屏幕上显示相同的布局. 需要使用flexDirection, alignItems, 和 justifyContent 相互组合达到目标布局效果

• flexDirection(默认column),确定子组件的布局主轴向.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
//       
       {/* 默认column */}
        
        
        
      
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

• justifyContent:(默认flex-start) 决定子组件沿着主布局轴向如何分配. 可用的选项有flex-start, center, flex-end, space-around, and space-between.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      
        
        
        
      
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

• alignItems: 在相对于主轴向而言的次级轴向(主轴向是column,那次级轴向为row;如果主row则次column)上子元素的分布,默认为stretch(但如果在次轴向上子元素指定了一个固定尺寸值,则此时默认表现为flex-start),可选值有flex-start, center, flex-end, 和 stretch.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      
        {/*这里没有指定确定的宽度,则宽度与父相同*/}
        
        {/*这里指定确定的宽度,则显示为指定的值*/}
        
        
      
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);