Question

因此，我正在开发一个跨平台的React Native应用程序，该应用程序根据设计要求使用图像分配按钮作为按钮，需要为其指定初始高度和宽度，以确保其宽高比正确。从那里开始，我构建了使用这些图像按钮的组件，然后将这些组件放置在主屏幕上。通过使用上下左右的权利，使组件在一个屏幕上看起来完美，可以根据我已经给出的设计要求来定位组件。

我遇到的问题是现在将此主屏幕缩放为不同的屏幕尺寸。我基本上是通过父级大多数视图上的transform属性缩放x和y的。 transform: [{ scaleX: .8 }, { scaleY: .8 }]在编写了说明基本高度和当前高度的缩放函数后，此方法适用于实际物体的尺寸，但是我的定位很麻烦。

我知道我要解决这个错误，并且开始认为我需要重新考虑自己的方法，但是对于如何使这些组件正确定位在每个屏幕上而不必进行硬编码感到困惑。

有什么方法可以使用顶部和左侧/右侧放置视图，将其锁定在适当的位置，然后像图像一样缩放它？

Answer 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 };

然后，您可以导入这些文件并在您的组件中使用。秤的类型不同，您可以尝试找到最适合您的组件的秤。希望如此。

Answer 2

我最终遍历每个视图，并将使用硬编码的高度和宽度像素的所有内容转换为设置宽度，然后使用属性AspectRatio并给出硬编码的高度和宽度。加上实现缩放功能后，我得到了最大视图的一小部分，例如.9，然后使用转换来缩放主视图。人们说这种响应式ui内容很困难时，他们不会开玩笑。

反应原生视图缩放

2 个答案: