响应式React-Native-Web布局

Question

我正在尝试从本机项目创建仪表板布局。这样做的目的是使大多数代码与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列。我希望左右块（菜单和号召性用语）各为300px。现在，如果我使用的是1000px宽度的监视器，则我的内容块应为（1000-（300 + 300））400px。如果监视器为1200像素，则内容块将为（1200-（300 + 300））600像素。

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值。

如果您坚持使用1层来处理所有内容，那么我们将再次讨论。

干杯。