React Native Dimensions API中的“窗口”和“屏幕”有什么区别

92dk7w1h  于 2023-01-27  发布在  React
关注(0)|答案(3)|浏览(182)

在我的iOS模拟器上,它们都返回相同的值。
我理解在普通浏览器上的区别,但是在React Native上有什么区别呢?是否有返回不同值的场景?

ars1skjm

ars1skjm1#

关于Dimensions的文档很差(outstanding issue),所以你必须深入到代码中去了解发生了什么。如果你看Dimensions的源代码,你会在第47行看到这样的注解:

// Screen and window dimensions are different on android

如果使用bless追溯历史记录,您将在指向this old issue的代码的相关部分中找到this commit,而this old issue本身指向this issue(关于报告不同屏幕高度的维度)。
我对Android本身了解不够,但据我所知,Android似乎可以报告两个不同的数字:
1.软菜单栏的宽度/高度
1.宽度/高度,无软菜单栏(因此实际为整个屏幕)
在我的Android设备上进行一个快速测试,打印出这些值,我能够确认window的高度〈screen的高度。所以在所有的可能性中,这意味着:

  • window:报告宽度/高度,无软菜单栏
  • screen:报告整个屏幕的宽度/高度

我没有跟踪this product pain关于Android上方向变化的信息,所以我不知道旋转屏幕会有什么影响。

qeeaahzv

qeeaahzv2#

在Android上,window反映可用于此应用的screen总数部分。大多数情况下,**window的宽度和高度将与screen**相同或更小。

screenwindow至少有3种情况不同:
1.如果Android设备显示设备navigation barwindow高度(或横向时的宽度)将比screen高度低导航器的高度。这是illustrated in this answer by RY Zheng,在此问题的答案中链接到该illustrated in this answer by RY Zheng,但已删除。
来自www.example.com的Android系统导航栏示例图像developer.android.com:

1.**如果应用程序以Android's split screen/multi-window模式显示,**两个应用程序的窗口并排显示,window的宽度或高度将低于screen的宽度或高度,并将为该应用程序的窗口分配宽度或高度。此PR by ThisIsMissEm本应记录这一点,但它被Facebook关闭,因为Facebook没有人抽出时间查看它。
developer.android.com中Android多窗口模式的示例说明:

1.如果Android设备在应用打开时更改了辅助功能设置 * 中的"screen zoom""display size"设置*,则windowscalewidthheight属性将更新以反映缩放,但screen的属性不会更新。如果重启应用,window``scale属性将与屏幕的属性匹配。
如果具有固定尺寸的元素在更改屏幕缩放时无法缩放,而无需重新启动应用,则将这些尺寸乘以Dimensions.get('window').scale / Dimensions.get('screen').scale可能会有所帮助。
androidpolice.com中“显示大小”辅助功能设置UI的示例图像:

因此,window的宽度和高度通常是相同的大小,或者,在Android上,有时小于screen
我只知道一个例外,window可能给予大于screen的值:如果应用程序在“显示大小”或“屏幕缩放”设置为高的情况下打开,则在应用程序仍然打开的情况下将其设置为低。在这种情况下,高度和宽度将更大,scale将以相同的比例降低。我怀疑这可能是React Native中的一个错误,而不是预期的行为,并可能在未来版本中更改。

vwkv1x7d

vwkv1x7d3#

这是我目前所知道的
对于iOS-〉窗口高度=屏幕高度
对于android-〉screen_height = window_height + navbar_height,窗口高度是可见视口,您可以将其分为两部分:

  • 窗口高度不包括状态栏高度(我发现这适用于Android版本的设备10及以上),所以
const window_height = Dimensions.get('window').height + 
                      StatusBar.currentHeight
  • 窗口高度包括状态栏高度(我发现这适用于Android版本设备低于10)
const window_height = Dimensions.get('window').height

注:

  • 如果器械有缺口,则根据我的测试和react原生文档中的说明,缺口将包含在状态栏高度中。
  • 我上面提到的我在真实的设备上测试,但这将是不一样的模拟器,因为我测试,模拟器包括像30,31,33这是不是真实设备的情况下版本的状态栏高度.

我可以把这一切总结如下:

const WINDOW_HEIGHT =
  Platform.OS === 'android' && Platform.Version  >= 29   ? 
  Dimensions.get('window').height + StatusBar.currentHeight
    : Dimensions.get('window').height;

希望这能帮助到一些人。

相关问题