Question

我在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

Answer 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。您可以将第四个设置为flex: 2。现在，第4个元素将使用的空间是其他组件的两倍（可用空间的40％，而不是20％）。也可以将Flex设置为负数，这意味着它会在需要时缩小到最小的高度和宽度。

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

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

1 个答案: