react-native - 让子容器占据父容器的高度[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 的工作方式有点不同，因为它只接受一个数字。这是因为 Yoga layout engine facebook uses

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

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

此行为与 flex-grow 属性在 CSS 中的工作方式几乎相同。如果你想在不考虑它的 sibling 的情况下操纵弹性容器的初始大小，你应该使用 flex-basis (flexBasis 在 react 中)属性。 flexBasis: content 将根据内容调整容器的大小。如果您想手动设置容器的初始宽度，flexBasis 也接受一个数字。