Flexbox 生成器在我的 React 应用程序中显示不佳

Question

我正在测试 https://yogalayout.com/playground 并创建了该模板：

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

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 500,
        justifyContent: 'space-between',
      backgroundColor: 'red',
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'blue',
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'green',
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          backgroundColor: 'purple',
        }} />
      </View>
    );
  }
};

我希望得到这样的结果：

相反，我有这个：

是什么破坏了我的 flexbox 布局？

Answer 1

默认的flexDirection在React Native中是column。因此，尝试在您的容器 View.

中将其设置为 row

<View style={{
        flex: 1,
        width: 500,
        height: 500,
        justifyContent: 'space-between',
        backgroundColor: 'red',
        flexDirection: "row"
      }}>
  .
  .
  .