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

【问题标题】：Design breaking while using flex with dimension in react native在 React Native 中使用带有维度的 flex 时设计中断
【发布时间】：2020-07-18 07:54:09
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

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

flex 将定义您的物品将如何“战斗” 沿主轴的可用空间。大多数时候你会希望您的应用容器为 flex:1 以占据所有屏幕高度。空间将根据每个元素的 flex 属性进行划分。在以下示例中，红色、黄色和绿色视图都是得到flex:1.的容器视图中的子项@红色视图得到 flex:1，黄色视图得到flex:2，绿色视图得到 flex:3 。 1+2+3=6 这意味着红色视图将获得 1/6 空间，空间的黄色 2/6 和空间的红色 3/6。一世认为你明白了……

要更清楚地了解以上几行，请参阅medium.com的post

而且基本上我们在使用react-native 开发应用程序时不使用dimension。

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

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

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

【讨论】：