Android-React Native 中处理不同屏幕尺寸的问题

Question

我对处理应用程序不同尺寸的屏幕有点困惑。

在android中，有一个名为的单元dp似乎可以处理屏幕尺寸和分辨率变化。我希望当我使用这个单位而不是像素时，我会component在每个屏幕上看到相同的尺寸（如按钮，...）。例如，具有尺寸的按钮20dp在所有屏幕中必须看起来尺寸相同。

在我读到的文章中，React-Nativedp也用作其主要单元。所以在这里期待同样的事情，但它没有像我预期的那样工作。一个按钮20dp在不同的屏幕上看起来不一样。

还有一些文章展示了如何处理不同的屏幕尺寸，尽管他们说 RN 使用dp一些算术逻辑来将组件缩放到每个屏幕尺寸。

例如const scaleX = Dimension.getWidth() / baseWdith=>简化的代码

流程是这样的，我们使用特定的基本屏幕制作一个 UI，并使其看起来像我们想要的那样，然后我们稍后在新屏幕中缩放组件。

我的问题是dp单位不应该做同样的事情吗？为什么 RN 本身不处理自动缩放？如果有一个名为dp管理屏幕尺寸比例的东西，那么为什么他们要进行手动缩放？

Answer 1

UPD

\n\n

\n

感谢你的回答。1-你可以分享一个使用它进行样式化的代码片段吗2-对于IOS来说它的逻辑像素和对于android dp来说似乎是这样。检查 stackoverflow.com/questions/34493372/\xe2\x80\xa6 3-为什么没有同时缩放宽度和高度。我的意思是真正的缩放需要依赖于两个方向的缩放

\n

\n\n

\n
1. 完成，我已经更新了答案。
\n

2. 像素在样式内部使用，但您可以重新计算它，例如：

   \n\n

   style={{ borderWidth: 1 / PixelRatio.get() }}\n

   \n\n

   PixelRatio另外，您可以使用方法编写自己的缩放函数

\n

3. 一切正常

   \n\n

   imageContainer: ViewStyle = {\n    height: scaleHeight(63),\n    width: scaleWidth(63),\n    borderRadius: scaleWidth(63 / 2),\n    backgroundColor: R.color.white,\n    alignItems: 'center',\n    justifyContent: 'center',\n};\n

\n

\n\n

原来的

\n\n

\n

我的问题是 dp 单位不应该做同样的事情吗！？为什么 RN 本身不处理自动缩放？如果有名为 dp 的东西来管理屏幕尺寸比例那么为什么他们要进行手动缩放？

\n

\n\n

1) 在 RN 中它只是像素\n2) 不能说\n3) 你可以使用百分比，但这不是像素完美设计的好解决方案

\n\n

它在我的项目中运行得怎么样

\n\n

该脚本用于生产，一切正常；

\n\n

对于缩放尺寸，我使用“scaleWidth”和“scaleHeight”

\n\n

对于缩放距离，例如状态栏和某些内容之间的距离，我使用“scaleY”

\n\n

import { Dimensions } from 'react-native';\nimport DeviceInfo from 'react-native-device-info';\n\nconst IPHONE6_SCREEN_WIDTH = 375;\nconst IPHONE6_SCREEN_HEIGHT = 667;\n\nexport const isTablet = DeviceInfo.getDeviceType() !== 'Handset';\n\nexport const scaleWidth = (width: number) => {\n    if (isTablet) {\n        return width;\n    }\n    return Dimensions.get('screen').width / IPHONE6_SCREEN_WIDTH * width;\n};\n\nexport const scaleHeight = (height: number) => {\n    if (isTablet) {\n        return height;\n    }\n    return Dimensions.get('screen').width / IPHONE6_SCREEN_WIDTH * height;\n};\n\nexport const scaleX = scaleWidth;\n\nexport const scaleY = (height: number) =>\nDimensions.get('screen').height / IPHONE6_SCREEN_HEIGHT * height;\n\nexport const scaleFont = scaleWidth;\n

\n\n

例子：

\n\n

textStyle: TextStyle = {\n    fontFamily: R.font.montserratBold,\n    fontSize: scaleFont(14),\n    lineHeight: scaleHeight(18),\n    letterSpacing: scaleWidth(1.75),\n    color: R.color.white,\n};\n\nsmallButtonStyle: ViewStyle = {\n    ...this.buttonStyle,\n    height: scaleHeight(36),\n};\n\nsmallTextStyle: TextStyle = {\n    ...this.textStyle,\n    fontSize: scaleFont(12),\n    lineHeight: scaleHeight(15),\n    letterSpacing: 0,\n    marginHorizontal: scaleWidth(10),\n};\n

\n\n

正如我之前所说，我使用scaleY 表示屏幕上的垂直距离。\n示例：

\n\n

render() {\n    const { loginRequestState } = this.props;\n\n    return (\n        <HideKeyboardView>\n            <KeyboardAwareScrollView\n                style={styles.mainContentView()}\n                contentInsetAdjustmentBehavior={'never'}\n                enableOnAndroid\n                contentInset={{ bottom: R.constant.botNavBarPlaceholderHeight }}\n            >\n                <LinkedText\n                    text={R.string.signUp.title}\n                    onPress={this.goToSignUp}\n                    insets={{ top: scaleY(23) }}\n                    alignToEnd\n                />\n                <Title\n                    text={R.string.signIn.title}\n                    insets={{ top: scaleY(36) }}\n                />\n                <SignInButton\n                    onPress={this.handleMyElevation}\n                    icon={R.image.icon.myElevationLogo}\n                    insets={{ top: scaleHeight(30) }}\n                    signInVariant={'myElevation'}\n                />\n                <SeparatorWithText\n                    insets={{ top: scaleY(40) }}\n                    text={R.string.global.or}\n                />\n                {this.renderForm()}\n            </KeyboardAwareScrollView>\n\n            <SafeAreaView style={styles.container}>\n                <FlexView />\n                <BotNavPlaceholder\n                    toScreen={'signUp'}\n                    onPress={this.goToSignUp}\n                />\n            </SafeAreaView>\n            <TransparentLoadingView\n                isVisible={loginRequestState === 'progress'}\n            />\n        </HideKeyboardView>\n    );\n}\n

\n