React Native Samsung One UI 3.0 尺寸屏幕宽度未返回正确值答案

【问题标题】：React Native Samsung One UI 3.0 Dimensions screen width not returning correct valueReact Native Samsung One UI 3.0 尺寸屏幕宽度未返回正确值
【发布时间】：2020-12-29 00:39:25
【问题描述】：

我使用的是 react native 0.63.4，我使用 <View style={{flex: 1}}> 作为每个页面的根元素。

我使用Dimensions.get("screen").width 使元素具有响应性。由于某种原因，屏幕宽度的值不正确，而是一个更大的值。因此屏幕上的每个元素都会变大。

预期行为： Expected image.
问题：issue image

我已经用许多设备进行了测试。我只在 Galaxy S20 Ultra 和 S10 Lite 上看到这个问题。安装 Android 11 和 OneUi 3.0 更新后出现此问题。

代码：

const {height: screen_height, width: screen_width} = Dimensions.get('screen');

<View style={{ flex: 1,justifyContent:"center",alignItems:"center" }}>
  <Text style={{fontSize:screen_width/15}}>text</Text>
</View>;

什么可能导致问题？

更新：仅当设备的屏幕分辨率设置为 3200x1440 时才会出现此问题。该应用在较低分辨率下可以正常工作。

【问题讨论】：

你能添加你的代码吗？没有它很难帮助你。

标签： react-native

【解决方案1】：

替换此代码：

const {height: screen_height, width: screen_width} = Dimensions.get('screen');

有了这个：

let scale = Dimensions.get('screen').scale / Dimensions.get('window').scale;
const screen_height =  Dimensions.get('window').height * scale;
const screen_width =  Dimensions.get('window').width * scale;

【讨论】：

请您解释一个合乎逻辑的原因。我有点迷茫

【解决方案2】：

试试Dimensions.get("window").height 和Dimensions.get("window").width 可以解决您的问题。

【讨论】：

【解决方案3】：

我认为您的文本组件与实际视口重叠。您能否添加呈现实际（文本）内容的代码？

如果它导致问题，那么您可以尝试使用flexWrap: 'wrap' 样式属性包装它。

【讨论】：

文本元素的字体大小为：screen_width / 15。在其他设备上按预期工作，文本适合屏幕。可能在 One UI 中，screen_width 的值会很大。因此，文本大小变得非常大，不再适合屏幕。我想我必须找到另一种方法来让我的应用具有响应性。
像screen_width / 15 这样的“神奇数字”通常迟早会引起问题。我建议您找到另一种计算和缩放内容的方法。
您有什么建议吗？我做了很多研究，但除了使用 screen_width 来制作响应式屏幕之外找不到任何东西。
@bilin 你有没有在计算中使用PixelRatio：stackoverflow.com/questions/33628677/…