React Native学习（6）Flexbox布局

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

flexDirection

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列，默认值是竖直轴(column)方向。
如：

/**
 * 慢慢学习
 * https://blog.csdn.net/quanhaoH
 */

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

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'row',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

Justify Content

在组件的 style 中指定 justifyContent 可以决定其子元素沿着主轴的排列方式。对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及 space-evenly。
如：

/**
 * 慢慢学习
 * https://blog.csdn.net/quanhaoH
 */

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

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'column',
		//flex-start center flex-end space-around space-between space-evenly
		justifyContent: 'space-around',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
注意：注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。
如：

/**
 * 慢慢学习
 * https://blog.csdn.net/quanhaoH
 */

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

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'row',
		//flex-start从左开始(不能使用columu) center flex-end从右开始(不能使用columu) space-around space-between space-evenly
		justifyContent: 'center',
		//flex-start顶部开始 center底部开始 flex-end stretch
		alignItems: 'flex-end',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);