javascript - 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

React Native 中默认的 flexDirection 是 column。因此，尝试将其设置为容器 View 中的 row。

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