问题标签 [react-native-flexbox]

我想制作一个带有固定宽度为 1“像素”的分隔符的元素网格。就像在PhotoiOS 的应用程序网格中一样。

对于 FlatList 中的项目宽度，我使用flex样式，因为我无法预测它们在不同屏幕上的宽度。

代码示例：https ://snack.expo.io/ryK_zPmEM

但是在我的iPhone 7 Plus（真实设备）上，我得到了这个结果：

第二个和第三个单元格之间的分隔符有一个样式marginLeft: 1，但看起来比其他两个分隔符更宽。

这是模拟器的截图iPhone 5S：

结果适得其反。您还可以注意到，行之间的分隔符的厚度也不同。

问题是：应该为margin样式设置什么值，以便分隔符对于所有屏幕尺寸看起来都一样，并且不会改变行内单元格之间的宽度？

或者也许我需要计算单元格宽度的确切值而不是使用 flex: 1？

完整代码示例：

我有这个组件：

我想要的是用style={styles.footer}（粘滞页脚）定位最新视图。我试图设置position: "absolute, bottom:0"，但没有工作。父容器 ( ScrollView) 有height:"100%"和position:"relative"，如果这对 React Native 来说很重要。

我有这个设计，我试图在本机反应中进行，但无法使用 flexbox 正确安排。

期望的结果

.

我的代码

输出

我认为我的方法有问题。如果有人指出，那就太好了。谢谢。

我想建立一个聊天室。在消息的视图中是消息和消息的输入字段。输入框应该在底部并且应该使用它需要的高度。如果用户输入多行文本，输入框的高度可能会发生变化。msgs-View 应该填充其余的高度（上图）。我不想放置绝对输入，因为消息的 FlatList 应该始终在“可见”区域中。

我正在尝试在 React Native 中创建一个简单的内容大小的对话框。在这个层次结构中最高的我有我的叠加<View>样式：

在这里面，我有一个<View>这种风格的包装器：

然后我有对话框<View>：

不过，看起来问题在于我构建对话框的方式：

通过这种样式，我得到了这个结果：

如果我更改flex为 0，我会得到这个：

如何让对话框根据内容调整大小？

我在使用 flexbox 时遇到问题。我想在我的标题顶部有一个不透明的栏。但我似乎无法让它发挥作用。见图片：

我不知道如何让它伸展整个屏幕的宽度。

这是我的整个屏幕文件：

我想以相同的宽度连续渲染 7 个按钮以水平填充所有可用空间。

它们在一个平面列表中，包裹在一个视图中，因为我不能直接设置按钮样式。在 HTML 页面中的常规 flexbox 中，这种方法有效。

这是我在 React Native 中得到的：

也许有一些我不熟悉的平面列表行为？

我正在尝试在 Flexbox（和 React Native）中创建这个布局，但我无法让它工作。具体来说，无论我做什么，左右按钮都拒绝扩展到容器宽度的 50%。它们始终是其内容的大小。

我正在使用嵌套容器。这些按钮位于列 Flex 容器中，该容器嵌套在还包含图像的行 Flex 容器中。

这是我的 JSX：

所有回复都非常感谢...

我有一个产品列表，想在信息框的右端显示文本“ITEM UNIT”。但是，它会受到其上方文本位置的影响。

我该如何解决这个问题并将“ITEM UNIT”放在显示器的右端？

我正在尝试重叠线框中所示的元素，并定位它们。

我试过 - position: 'relative' 并且元素消失了 - position: 'absolute' 但 alignItems: 'center' 什么都不做

任何人都可以帮助确定缺少什么吗？

愿望清单的线框（忽略不同的标题；它来自旧版本）

这就是我得到的，即使在使用 flex 之后

我已从所有单独的 .js 文件中附加了代码，并省略了所有导入和导出语句。

谢谢！