React Native 视图缩放答案

【问题标题】：React Native view scalingReact Native 视图缩放
【发布时间】：2020-05-01 11:29:44
【问题描述】：

所以我正在开发一个跨平台的 React Native 应用程序，该应用程序根据设计要求使用分配的图像作为按钮，需要给定初始高度和宽度，以便它们的纵横比正确。从那里我构建了使用这些图像按钮的组件，然后将这些组件放置在主屏幕上。我可以通过使用 top 和 lefts/rights 来根据给定的设计要求定位组件，从而使事物在一个屏幕上看起来完美。

我现在遇到的问题是将此主屏幕缩放为不同的屏幕尺寸。我基本上是通过父视图上的变换属性来缩放 x 和 y。 transform: [{ scaleX: .8 }, { scaleY: .8 }] 在编写了一个考虑了基本高度和当前高度的缩放函数之后，这种方法适用于事物的实际大小，但我的定位很糟糕。

我知道我做错了，并且开始认为我需要重新考虑我的方法，但是对于如何在每个屏幕上正确定位这些组件而无需硬编码感到困惑。

有没有办法使用顶部和左侧/右侧来定位视图，将其锁定到位，然后像图像一样缩放它？

【问题讨论】：

标签： react-native responsive-design flexbox

【解决方案1】：

首先，尽量使用 flex。然后，例如，当您需要对内部零件进行额外缩放时，可以使用缩放功能。我一直在使用基于屏幕尺寸和像素密度的缩放功能，到目前为止几乎完美无缺。

import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const screenSize = Math.sqrt(width * height) / 100;


const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) =>
size + (scale(size) - size) * factor;


export { scale, verticalScale, moderateScale, screenSize };

然后您可以导入这些并在您的组件中使用。有不同类型的秤，您可以尝试查看最适合您的组件的秤。希望对您有所帮助。

【讨论】：

太棒了，我今晚会试试这些。在今天考虑它并阅读您刚才的答案时，我想我可能已经弄清楚了我的问题。今晚要测试一些东西，希望能有结果！
非常好。我一开始也很挣扎。我感到沮丧和绝望，直到我想通了这一点。到目前为止，对于不同的屏幕尺寸，我对这个实现有疑问。让我知道，干杯。
最终弄清楚了，虽然您的回答并不是我问题的全部，但它能够让我朝着正确的方向前进。我会把你的标记为答案，谢谢！

【解决方案2】：

我最终浏览了每个视图并将所有使用硬编码的高度和宽度像素转换为设置宽度，然后使用属性 aspectRatio 并给出硬编码的高度和宽度。除了实现一个缩放功能，它给了我最大视图的一小部分，比如 0.9，然后使用变换缩放主视图。当人们说这种响应式 ui 的东西很难时，他们并不是在开玩笑。

【讨论】：