react-native - React Native - 问题/溢出

Question

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

因此，对于上面的图像，我需要黄色框随着橙色框的增长（随着文本的增长）而缩小，但将黄色框限制为 aminWidth=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