javascript - 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 布局？

标签： javascriptcssreact-nativeflexboxreact-native-web

Answer 1

默认flexDirection在columnReact Native 中。因此，尝试将其设置为row在您的容器中View。

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