容器内的多行 - Flex - React-Native答案

【问题标题】：Multiple Rows Within Container - Flex - React-Native容器内的多行 - Flex - React-Native
【发布时间】：2020-03-28 11:20:18
【问题描述】：

首先，我似乎无法设置 CodeSandBox - index.js 文件中的以下代码只会呈现空白屏幕：https://codesandbox.io/s/q4qymyp2l6

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

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}>
        <View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'powderblue'}} />
        <View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'skyblue'}} />
        <View style={{flex: 1, flexDirection: 'row', height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

但是 - 如果您将此代码复制并粘贴到 React-Native flexbox 文档中：

https://facebook.github.io/react-native/docs/flexbox

（“LEARN MORE HERE”下的第一个代码示例）它将在一行中呈现三列。

我不明白为什么。我已经声明视图是带有flexDirection: 'row' 的行，它们每个都得到flex: 1，所以我希望三个大小相同的行。

使用 Bootstrap，您可以像这样在容器中声明一行：

https://jsfiddle.net/HappyHands31/z0ncwe6b/

如何在 React-Native 中实现同样的效果？

【问题讨论】：

标签： css reactjs react-native jsx

【解决方案1】：

你将代码的内容放到APP.JS文件中

如果你给出 COL 值，你会得到 3 行的结果

flexDirection 这是容器内的孩子的方向

<View style={{
        flex: 1,
        flexDirection: 'col',//try change this line
        justifyContent: 'space-between',
      }}>

【讨论】：

是的，做到了 - 不知道为什么在文档中没有更明确。谢谢。