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

Question

我正在努力构建一个 iOS 风格的表格单元组件，其中包含标题、副标题、右侧的信息文本、公开箭头（V 形）和可选图标。从左到右，这可以被认为是：

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

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

但是，一旦我使图标可见，它就会将 V 形符号推离屏幕：

因为两个文本字段都是可变宽度的，所以我无法在它们上设置宽度（相反，我在左边的文本字段上设置了 flex: 0，在右边的文本字段上设置了 flex: 1，这导致左边的文本字段达到所需的大小） ，以及调整大小以填充剩余空间的正确尺寸）。一般来说，这一切都运行良好，除了左侧和右侧的固定图像（图标和 V 形）导致左侧文本开始将 V 形从屏幕上推出（此时右侧文本为零宽度，因此无论它是否关闭） - 屏幕并不重要）。

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

这是我所在位置的要点，我用固定大小的橙色视图替换了 V 形：https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6

Answer 1

对我来说，它有助于简单地添加flex: 1文本样式。然后它会进行适当的调整，让其他一切都适应。