React Native使用Flexbox布局 – React Native实战教程

上一章React Native实战教程请查看：React Native设置元素样式

为了适应不同的屏幕尺寸，React Native提供了Flexbox支持。

我们将使用与React Native设置元素样式一章中相同的代码，我们只更改PresentationalComponent。

Flexbox布局

为了实现理想的布局，flexbox提供了三个主要特性——flexDirection、justifyContent和alignItems。

下表显示了可能的选项。

如果想要垂直对齐和集中这些项，那么可以使用以下代码。

App.js

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

const Home = props => {
  return (
    <View style={styles.container}>
      <View style={styles.redbox} />
      <View style={styles.bluebox} />
      <View style={styles.blackbox} />
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey',
    height: 600,
  },
  redbox: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
  bluebox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
  blackbox: {
    width: 100,
    height: 100,
    backgroundColor: 'black',
  },
});

如果需要将项移动到右侧，并且需要在它们之间添加空格，那么我们可以使用以下代码。

App.js

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

const App = props => {
  return (
    <View style={styles.container}>
      <View style={styles.redbox} />
      <View style={styles.bluebox} />
      <View style={styles.blackbox} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    backgroundColor: 'grey',
    height: 400,
  },
  redbox: {
    width: 70,
    height: 70,
    backgroundColor: 'red',
  },
  bluebox: {
    width: 70,
    height: 70,
    backgroundColor: 'blue',
  },
  blackbox: {
    width: 70,
    height: 70,
    backgroundColor: 'black',
  },
});