反应原生对齐标题左、右后缀以及标题



这是我面临的问题:

我在反应原生中有一个名为 Header 的组件。标题有 3 个属性 - 左后缀(例如用于后退按钮)、右后缀(用于其他操作,有时为 1 个按钮,有时为 2 个按钮,有时为无)和标题。

布局规则如下:

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

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

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

任何帮助解决这个难题,不胜感激

只需用position: 'absolute'将磁贴包裹在视图中,并将磁贴文本居中放在中间,并为标题文本样式提供maxWidth道具

最新更新