响应式React-native-web布局
我正在尝试从react原生项目创建一个仪表板布局。我们的想法是让大部分代码在安卓、iOS和网页上保持相似，只有布局或导航样式会发生变化。但是我发现在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。如果监视器是1200px，那么内容块将是(1200 - (300+300)) 600px。
回答 1
Stack Overflow用户
发布于 2019-06-27 23:29:15
我希望这不会来得太晚。
<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层来处理所有问题，那么我们将再次讨论。
干杯。
https://stackoverflow.com/questions/56450030
复制相似问题
腾讯云开发者
