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