Flexbox布局

flexDirectionJustify ContentAlign Items 在 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);