反应原生布局固定宽度并拉伸剩余空间

Posted

技术标签:

【中文标题】反应原生布局固定宽度并拉伸剩余空间【英文标题】:React native layout fixed width and stretch remaining space 【发布时间】:2017-05-05 11:34:54 【问题描述】:

如何在 react-native 中制作这样的东西?

在右边我想要一个具有固定宽度的组件,在左边占据所有剩余空间另一个组件。

【问题讨论】:

【参考方案1】:

试试这个:

  <View style=flex: 1, flexDirection: 'row'>
    <View style=
      backgroundColor: 'blue',
      flexGrow: 1,
    >
      <Text>Fluid</Text>
    </View>
    <View style=
      backgroundColor: 'red',
      width: 100,
    >
      <Text>Fixed</Text>        
    </View>
  </View>

【讨论】:

不错。我不知道flexGrow 属性。泰 我在尝试使用此解决方案时遇到问题......也许这是我的代码......但如果我输入大量文本(替换“Fluid”)......列大小不起作用...请帮助 谢谢!为我省去了很多麻烦。直到我看到这个才弄明白。 即使我不知道 flexGrow 属性谢谢。

以上是关于反应原生布局固定宽度并拉伸剩余空间的主要内容,如果未能解决你的问题,请参考以下文章

在列的可用空间中拉伸小部件

flex

Flex 具有一个固定宽度的列和一个必须填充剩余空间的流体列[重复]

Flex 过渡:拉伸(或收缩)以适应内容

Android布局权重是怎样的

CSS 布局实现左边固定宽度,右边占满剩余宽度