问题标签 [react-native-flexbox]

我有一个逗号分隔的内联可触摸列表，如下所示：

呈现为以逗号分隔的项目字符串：

问题是有时逗号会换行，看起来有点难看：

如何组合两个“内联”元素以便将它们包裹在一起？

更新。代码：

结果：

我正在尝试将一些文本垂直居中放置在 flexWrap 中的框中。但它略高于或低于中心，取决于有多少盒子（？？？）。随着更多框的添加，观察所有的 Hello 向上移动：

世博小吃在这里：https ://snack.expo.io/@danbock/vertically-center-text

无论框数如何，如何使此文本保持在中心？

我制作了一个自定义后退按钮组件，只是为了在某些屏幕上向用户弹出警报，他们可能正在更改实体的数据，如果Save在离开屏幕之前没有点击，这些更改将丢失。

链接到小吃以获取完整的 CustomBackButton 组件代码

（零食不会运行，我只是用它来提供我正在使用的完整代码）

此逻辑/实现按预期工作，但外观与 iOS 上的本机后退按钮外观大不相同。我想知道如何最好地尽可能接近地模拟它，以便用户可以感觉到该按钮与整个应用程序中各处的本机体验相同。

你有什么建议？我愿意接受任何和所有建议，例如 flexbox 改进、hacky RNN mods 等。

自定义后退按钮：

原生后退按钮：

我正在使用 flex-box 设计反应原生应用程序的 UI。但是它的代码没有显示预期的结果？

问题

Margin 属性InnerContainer2没有margin:'5%'垂直覆盖相等的空间。

代码：

预期产出

实际输出

我在 react-native-android 中创建了一个 2 列的 FLatlist

我要这个

我试试这些：

在渲染项目中我flexDirection:'row-reverse'也使用

但没有成功！

我的代码如下所示：

相关样式如下所示：

问题是（方形）图像无法缩放以适应容器内部（注释掉的边框是为了确保容器在我认为它们所在的位置，并且尺寸正确 - 它们是）。

我已经看到了有关此的各种问题 - 有些涉及远程图像，而不是这里的情况。其他建议：

• 将 resizeMode 设置为 Image 元素的道具。

• 将 resizeMode 设置为样式。

• 使用样式中的宽度为“未定义”执行上述任一操作。

• 使用样式中的宽度为“自动”执行上述任一操作。

没有任何区别，唯一有效的是专门设置宽度和高度，如上面的代码所示。这在较新的（阅读：更大的）iPhone sim 上看起来不错，但会导致图像与 iPhone 5 sim 上的其他内容重叠。

要检查 resizeMode 道具是否有任何效果，我将其设置为“中心”（没有宽度或高度样式）。这更有希望，因为图像现在只比屏幕宽一点。但是，它仍然比视图高得多，这与 resizeMode: center 上的文档相矛盾：

center：将图像在视图中沿两个维度居中。如果图像大于视图，则将其均匀缩小，使其包含在视图中。

尝试将 width=auto/undefined 添加到 resizeMode="center"，会导致图像根本不显示。

logoImageContainer 是一个定义的大小（通过 flexbox 定义），我只希望图像缩放和居中以适合它。

这是我面临的问题：

我有一个名为 Header 的 react native 组件。标题有 3 个属性 - 左后缀（例如后退按钮）、右后缀（用于附加操作，有时 1 个按钮，有时 2 个按钮，有时没有）和标题。

布局规则如下：

• 无论是否存在右后缀或左后缀，标题都应始终位于标题的中心。如果存在右后缀但不存在左后缀，则标题仍应位于标题中间。
• 如果声明了右后缀和左后缀，则它们应该始终可见。这意味着如果我有右后缀 + 左后缀 + 一个很长的标题，标题应该缩小以为后缀腾出空间。

我做了零食来证明我的问题：https ://snack.expo.io/@anjayka/header-challenge

正如您所看到的，大多数布局都可以正常工作 - 如果我添加右后缀，标题保持在原位，如果我删除左后缀 - 它仍然在原位。问题出现在标题是一个非常长的文本之后 - 它扩展得如此之多以至于它完全推出了后缀。

任何帮助解决这个难题表示赞赏

我试图制作一个包含一些数据和每行按钮的平面列表。我试图以典型的“网络”方式来做这件事，嵌套视图并相对于它们的父元素格式化元素，但没有成功。

这是列表的当前结构：

这是我的样式：

我试图让它看起来像这样：

但我不断得到这个：

我正在尝试在 React Native中实现类似于 Android 上的谷歌地图“探索”的 UI 布局（参见gif ）。

在我的 UI 设计中，我在屏幕底部有应用程序导航选项卡，带有完整的页面地图背景，上面覆盖有来自选项卡上方的“底页”，顶部有一个搜索框组件。请参阅下面的 UI 草图。

我发现了各种看起来很有用的 react-native ui 组件，但我无法弄清楚将它们排列在我想要的布局中的样式。

我正在查看的几个底部组件，例如，rn-bottom-drawer 显示的 gif 与我正在尝试创建的内容类似，例如这个动画，但我找不到该 UI 的实际代码示例创建的。例如，同一个库示例仅在空屏幕上显示底部抽屉。

包装元素和样式的哪种组合可以让我创建所描述的布局？我来自 XAML 背景，这种布局很容易创建，但我无法理解如何在本机反应中做到这一点。

我有一个我无法解决的问题。看看这个截图：

呈现 Utility & Sequences 按钮的代码如下：

风格

当第四个按钮下降到下一行时，我希望新行和上一行之间有一个间距。我尝试为每个有边距的按钮添加样式，但这没有区别。我在这里遗漏了什么？提前致谢。