PixelRatio.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow strict-local
  9. */
  10. 'use strict';
  11. const Dimensions = require('./Dimensions');
  12. /**
  13. * PixelRatio class gives access to the device pixel density.
  14. *
  15. * ## Fetching a correctly sized image
  16. *
  17. * You should get a higher resolution image if you are on a high pixel density
  18. * device. A good rule of thumb is to multiply the size of the image you display
  19. * by the pixel ratio.
  20. *
  21. * ```
  22. * var image = getImage({
  23. * width: PixelRatio.getPixelSizeForLayoutSize(200),
  24. * height: PixelRatio.getPixelSizeForLayoutSize(100),
  25. * });
  26. * <Image source={image} style={{width: 200, height: 100}} />
  27. * ```
  28. *
  29. * ## Pixel grid snapping
  30. *
  31. * In iOS, you can specify positions and dimensions for elements with arbitrary
  32. * precision, for example 29.674825. But, ultimately the physical display only
  33. * have a fixed number of pixels, for example 640×960 for iPhone 4 or 750×1334
  34. * for iPhone 6. iOS tries to be as faithful as possible to the user value by
  35. * spreading one original pixel into multiple ones to trick the eye. The
  36. * downside of this technique is that it makes the resulting element look
  37. * blurry.
  38. *
  39. * In practice, we found out that developers do not want this feature and they
  40. * have to work around it by doing manual rounding in order to avoid having
  41. * blurry elements. In React Native, we are rounding all the pixels
  42. * automatically.
  43. *
  44. * We have to be careful when to do this rounding. You never want to work with
  45. * rounded and unrounded values at the same time as you're going to accumulate
  46. * rounding errors. Having even one rounding error is deadly because a one
  47. * pixel border may vanish or be twice as big.
  48. *
  49. * In React Native, everything in JavaScript and within the layout engine works
  50. * with arbitrary precision numbers. It's only when we set the position and
  51. * dimensions of the native element on the main thread that we round. Also,
  52. * rounding is done relative to the root rather than the parent, again to avoid
  53. * accumulating rounding errors.
  54. *
  55. */
  56. class PixelRatio {
  57. /**
  58. * Returns the device pixel density. Some examples:
  59. *
  60. * - PixelRatio.get() === 1
  61. * - mdpi Android devices (160 dpi)
  62. * - PixelRatio.get() === 1.5
  63. * - hdpi Android devices (240 dpi)
  64. * - PixelRatio.get() === 2
  65. * - iPhone 4, 4S
  66. * - iPhone 5, 5c, 5s
  67. * - iPhone 6
  68. * - iPhone 7
  69. * - iPhone 8
  70. * - iPhone SE
  71. * - xhdpi Android devices (320 dpi)
  72. * - PixelRatio.get() === 3
  73. * - iPhone 6 Plus
  74. * - iPhone 7 Plus
  75. * - iPhone 8 Plus
  76. * - iPhone X
  77. * - xxhdpi Android devices (480 dpi)
  78. * - PixelRatio.get() === 3.5
  79. * - Nexus 6
  80. */
  81. static get(): number {
  82. return Dimensions.get('window').scale;
  83. }
  84. /**
  85. * Returns the scaling factor for font sizes. This is the ratio that is used to calculate the
  86. * absolute font size, so any elements that heavily depend on that should use this to do
  87. * calculations.
  88. *
  89. * If a font scale is not set, this returns the device pixel ratio.
  90. *
  91. * This reflects the user preference set in:
  92. * - Settings > Display > Font size on Android,
  93. * - Settings > Display & Brightness > Text Size on iOS.
  94. */
  95. static getFontScale(): number {
  96. return Dimensions.get('window').fontScale || PixelRatio.get();
  97. }
  98. /**
  99. * Converts a layout size (dp) to pixel size (px).
  100. *
  101. * Guaranteed to return an integer number.
  102. */
  103. static getPixelSizeForLayoutSize(layoutSize: number): number {
  104. return Math.round(layoutSize * PixelRatio.get());
  105. }
  106. /**
  107. * Rounds a layout size (dp) to the nearest layout size that corresponds to
  108. * an integer number of pixels. For example, on a device with a PixelRatio
  109. * of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to
  110. * exactly (8.33 * 3) = 25 pixels.
  111. */
  112. static roundToNearestPixel(layoutSize: number): number {
  113. const ratio = PixelRatio.get();
  114. return Math.round(layoutSize * ratio) / ratio;
  115. }
  116. // No-op for iOS, but used on the web. Should not be documented.
  117. static startDetecting() {}
  118. }
  119. module.exports = PixelRatio;