使子容器占据父容器的高度 [React Native]答案

【问题标题】：Make child container occupy height of parent container [React Native]使子容器占据父容器的高度 [React Native]
【发布时间】：2019-01-19 02:48:26
【问题描述】：

我在 react native 中创建了一个 <View> 对象，其中连续包含多个包含文本对象的 <View> 对象。

当文本超过 1 行时，文本容器不会扩展以填充父组件，看起来很有趣。

截图：

这是样式代码：

  bigContainer: {
    flex: 1,
    justifyContent: 'center',
    // flexDirection: 'row'
  },

  textContainer: {
    flex: 1,
    paddingLeft: 0,
    paddingRight: 0,
    borderRightWidth: 1,
    borderRadius: 0,
    borderColor: 'rbga(0, 0, 0, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 7,
    paddingBottom: 7,
    overflow: 'hidden'
  },

  text: {
    fontSize: 18,
    textAlign: 'center'
  },

请帮忙，我不明白为什么会发生这种情况，因为我有 flex: 1 并且我的研究对我没有帮助。谢谢！！

更新：已解决：我忘记了 <TouchableOpacity>，包含文本容器的容器，其行为也类似于 flexbox

【问题讨论】：

编辑：已解决：我忘记了 <TouchableOpacity> 的行为就像一个 flexbox ！！
bigContainer: { alignItems: 'stretch'}

标签： react-native flexbox

【解决方案1】：

在 React Native 中，flex 的工作方式有点不同，因为它只接受一个数字。这是因为Yoga layout engine facebook uses

flex: 1 并不意味着“随心所欲地增长”。当您为一组子组件分配该属性时，您实质上是在说每个具有flex: 1 属性的元素应该占用与其他元素一样多的空间。将flex: 1 视为分配比率。如果您有 1 个没有兄弟姐妹的元素，它将尝试填充所有可用空间。如果您有 4 个元素并且它们都是同级元素，并且它们都设置为 flex: 1，那么每个元素将占用 1/4 (25%) 的可用空间。

这也可以被操纵，假设你有 4 个元素，其中 3 个被设置为flex: 1。您可以将第 4 个设置为flex: 2。现在，第 4 个元素将使用两倍于其他组件的空间（可用空间的 40% 而不是 20%）。 Flex 也可以设置为负数，这意味着它会在需要时收缩到最小高度和宽度。

这种行为与 flex-grow 属性在 CSS 中的工作方式非常相似。如果你想操纵 flex 容器的初始大小而不考虑它的兄弟姐妹，你应该使用flex-basis（反应中的flexBasis）属性。 flexBasis: content 将根据容器的内容调整容器的大小。 flexBasis 也接受一个数字，如果您想手动设置容器的初始宽度。

【讨论】：