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

Question

我<View>在 react native 中创建了一个对象，其中连续<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

Answer 1

React Native flex 的工作方式有点不同，因为它只接受一个数字。这是因为facebook 使用的Yoga布局引擎

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( flexBasisin react) 属性。flexBasis: content将根据其内容调整容器的大小。flexBasis如果您想手动设置容器的初始宽度，也接受一个数字。