Генератор Flexbox плохо отображается в моем приложении

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 равно column в React Native. Итак, попробуйте установить значение row в вашем контейнере View.

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