React Native - <Text>/<View> 溢出问题

Question

我正在努力设置正确的样式以避免视图溢出的一些问题。

因此，对于上面的图像，我需要黄色框随着橙色框的增长（随着文本的增长）而缩小，但将黄色框限制为 minWidth=100 并且橙色框被红色框包裹;黄色框的行为正确...但是当文本很大时橙色框会溢出红色框...我不知道该怎么做才能将橙色框限制在红色框内。

这是橙色框溢出红色框的示例：

理想情况下，如果橙色框内的文字对于容器大小来说太大了，应该将其夹住，不要让橙色框溢出红色框。

这是一个链接，您可以查看和使用生成此视图的代码：https://snack.expo.io/SJD1bbhQX

谢谢，何塞。

Answer 1

如果你不想让橙色框溢出红色框尝试使用：

style={{
          borderWidth: 1,
          borderStyle: 'solid',
          padding: 5,
          margin: 5,
          backgroundColor: 'red',
          width:0.9*width,
        }}

在您的第二个视图中， 这种风格的宽度等于Dimension.get('window').width