007_ReactNative: Layout with Fle

(问渠那得清如许，为有源头活水来。 双手奉上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`.
//       <View style={{flex: 1, flexDirection: 'row'}}>
      <View style={{flex: 1}}> {/* 默认column */}
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

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`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
//         justifyContent: 'flex-start', //从开始点紧密排列
//         justifyContent: 'center', //整体居中排列
//         justifyContent: 'flex-end', //末尾与结束点对齐
//           justifyContent: 'space-around', //每个元素的外边距相等
          justifyContent: 'space-between',  //相邻元素的外边距相等
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

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`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        //flex-start, center, flex-end 与justifyContent中效果相同
        //stretch为与父元素相同.但前提条件是子元素在次级轴向上没有指定一个确认的值
//         alignItems: 'flex-end',
      }}>
        {/*这里没有指定确定的宽度,则宽度与父相同*/}
        <View style={{ height: 50, backgroundColor: 'powderblue'}} />
        {/*这里指定确定的宽度,则显示为指定的值*/}
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

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