ReactNative：文本将内容推送到屏幕外

Question

我正在努力构建一个iOS风格的表格单元格组件，右侧是标题，副标题，信息文本，显示箭头（雪佛龙）和可选图标。从左到右，这可以被认为是：

1. 固定宽度图标
2. 可变宽度标题/副标题
3. 可变宽度信息文本
4. 固定宽度的人字形图像

没有图标，我有这个，看起来很不错：



但是一旦我看到图标，它就会将雪佛龙推离屏幕：



因为两个文本字段都是可变宽度，所以我不能在它们上设置宽度（相反，我在左边有flex：0，右边有flex：1，这导致左边的一个像它一样大需要是，并且正确的一个是调整大小以填充剩余空间。一般来说，这一切都很好，除了左边和右边的固定图像（图标和雪佛龙）导致左边的文字开始将雪佛龙从屏幕上推开（此时右边的文字是零宽度，所以是否＆＃ 39;离屏并不重要。）

我已尝试过各种修复方法，但我提出的唯一要求是测量组件的大小。这两个黑客是： 1）在左侧文本上设置maxWidth，从总容器宽度中减去图标/ V形大小。 2）在最顶层的View上设置paddingRight，以包括图标的度量宽度。 我试图避免这些中的任何一个，因为图标/容器的大小未知，我不想添加onLayout处理程序来测量它们并重新计算。有什么想法可以做到这一点吗？

以下是我所处的地方的要点，我用固定大小的橙色视图取代了人字形：https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6

Answer 1

对我来说，将flex: 1添加到文本样式中很有帮助。然后，它会进行适当的调整，并让其他所有内容都适合。

Answer 2

如果需要，您可以尝试将 position: 'absolute' 加入样式和一些填充中。