时间戳

首页 > 解决方案 > 在 React Native 中使用带有维度的 flex 时设计中断

javascript - 在 React Native 中使用带有维度的 flex 时设计中断

问题描述

当 js 中存在输入字段时，在 css 样式中同时使用import {dimension} from 'react-native'和对于某些设备设计会被破坏。flex:1CSS 如此简单，不应该被破坏

MainContainer: {
    height : Dimensions.get('window').height,
    width : Dimensions.get('window').width,
    backgroundColor: '#fff',
    flex: 1
}

此外，一些安卓设备还有 1 px 的空白空间。

标签： javascriptcssreactjsreact-native

解决方案

早些时候，当我开始编码时，react-native 我在使用相同的 css 样式时遇到了同样的问题。您应该首先仔细阅读文档以了解flex.

flex将定义您的项目将如何“<em>战斗”沿主轴的可用空间。大多数情况下，您会希望您的应用容器flex:1占据所有屏幕高度。空间将根据每个元素的 flex 属性进行划分。在下面的示例中，红色、黄色和绿色视图都是容器视图中的子视图，它们得到了flex:1.红色视图 flex:1，黄色视图flex:2和绿色视图 flex:3。1+2+3=6 表示红色视图占空间的1/6，黄色占空间的2/6，红色占空间的3/6。我想你明白了……</p>

要更清楚地了解上述行，请参阅此medium.com的帖子

并且基本上我们在dimension使用react-native.

MainContainer: {
   height: '100%',
   width: '100%',
   backgroundColor: '#fff',
}

这足以设计主容器。另外，如果您使用的是输入字段，那么我建议您使用scrollView

我想我的回答会对你有所帮助。

推荐阅读