响应式 React-native-web 布局答案

【问题标题】：Responsive React-native-web layout响应式 React-native-web 布局
【发布时间】：2019-06-27 23:29:14
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： react-native responsive-design react-native-web

【解决方案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 布局即可。

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

如果你坚持用1层来处理，那我们再讨论。

干杯。

【讨论】：