react-native - 响应式 React-native-web 布局

Question

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

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

Dimensions.get('window').宽度
Dimensions.get('窗口').height

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

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

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

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

Answer 1

我希望这不会来得太晚。

  <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 布局中构建它。

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

如果你非要用一层来处理，那我们再讨论。

干杯。