React Native 视图缩放

Question

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

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

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

有什么方法可以使用顶部和 lefts/rights 定位视图，将其锁定到位，然后将其缩放得更像图像？

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

然后您可以导入这些并在您的组件中使用。有不同类型的秤，您可以尝试查看最适合您 components.Hope 的秤。

Answer 2

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

React Native 视图缩放

React Native view scaling

flexbox

responsive-design

react-native