2

我正在尝试从 react-native 项目创建仪表板布局。这个想法是为了让大部分代码在 Android、iOS 和 Web 上保持相似，只有布局或导航样式会改变。但我发现在 web 中制作这种类型的布局很容易，但在不重新渲染的情况下使其具有响应性是困难的。

我通过按照代码手动计算窗口高度和宽度来实现这一点

Dimensions.get('window').width Dimensions.get('window').height

并通过 eventListener 不断更新状态，以便它一次又一次地重新呈现整个页面。

Dimensions.addEventListener("change", this.updateScreen);

有没有办法我可以简单地使用一些 % 值来填满屏幕。现在，如果我使用 % 它会压缩到儿童View大小。我什至尝试过flex:1,alignSelf:stretch等alignItem:stretch，width:'100%'但没有运气。

一会儿，让我们谈谈中心行（附图）它包含 3 列。我希望左右块（菜单和号召性用语）各为 300 像素。现在，如果我在 1000 像素宽度监视器上，我的内容块应该是 (1000 - (300+300)) 400 像素。如果监视器为 1200 像素，则内容块将为 (1200 - (300+300)) 600 像素。

在此处输入图像描述

4

1 回答 1

3

我希望这不会来得太晚。

  <View style={{ flex: 1 }}>
    <View style={{ height: 100, backgroundColor: 'red' }} />

    <View style={{ flex: 1, backgroundColor: 'gray', flexDirection: 'row' }}>
      <View style={{ width: 100, backgroundColor: 'green' }} />
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
      <View style={{ width: 100, backgroundColor: 'green' }} />
    </View>

    <View style={{ height: 100, backgroundColor: 'red' }} />
  </View>

这是上面代码的结果。 结果

您根本不需要进行百分比计算；只需将其构造为 2 层 flex 布局即可。

对于不应拉伸的组件，请说明它们的宽度。对于其余部分，请指定 flex 值。

如果你坚持使用1层来处理这一切，那么我们将再次讨论。

干杯。

于 2019-06-27T15:29:14.627 回答