React Native - 图像将文本推出屏幕 - 用第三个视图修复？

Posted 2023-02-19

【中文标题】React Native - 图像将文本推出屏幕 - 用第三个视图修复？

【英文标题】：React Native - image pushes text out screen - fixed with 3rd view?

【发布时间】：2017-12-18 10:44:54

【问题描述】：

我正在使用 React Native 版本 0.44.0 和 expo 应用程序在 ListView 的屏幕上呈现一些图像和文本。

我的问题在于样式。

A. 最初我只有一个 View (View1) 和一个并排在 View1 中的图像和文本组件。我设置了 flexDirection="row" 和 justifyContent="center" 并将图像和文本在屏幕中居中。

B. 我需要在第一个文本下插入另一个具有不同样式的文本组件，但 flexDirection="row" 根本不允许它进入它。

我插入了 View2 并且确实允许文本垂直定位，但是较高的文本在屏幕的右边缘被切断（我相信这是因为图像设置了 固定高度和宽度）。

在我添加 View3 并给它一个固定宽度之前，我无法让文本回到中心。

所以 View1 有 flex=1 ， View2 有 flex=1 ， View3 有

我的担忧：现在它在设备上完美呈现。但这是可以接受的做法吗？它会在其他设备上失真，还是会根据屏幕分辨率动态呈现固定宽度，因为它的像素单元与密度无关？

【参考方案1】：

它会根据屏幕动态呈现固定宽度吗 分辨率与密度无关的像素单元？

不。它不会根据不同的屏幕尺寸进行调整。宽度会因屏幕而异。使用 flex-box 是获取东西的最佳方式 完成，但有时您需要屏幕宽度和屏幕高度的帮助。为此，您可以使用 react-native 中的 Dimensions。这是使用它的guide。还有一些库可以让应用程序响应，如react-native-responsive 和react-native-extended-stylesheet。

在您的特定情况下，您可以将行视图（view1）与具有所需弹性的 2 个内部视图分开。并且第一个内部视图可能包含图像视图，如果您发现图像的高度和宽度与其父级的高度和宽度有困难，您可能还需要参考图像resizemod。第二个内部视图包含您的文本。还要记住向 view1 添加一些填充，以便内部视图将始终位于视口中，而 Nevers 会离开视口。