From 66645b5ebabcdec23780ad4a8fc64e54fc586d9a Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 3 Mar 2020 15:57:05 +0000 Subject: [PATCH] Deploy website Deploy website version based on ea9c3babdc8730fa76a1def229c4ace7b9b78ebb --- docs/next/pixelratio.html | 110 +++++++++++++++++++++++++++----- docs/next/pixelratio/index.html | 110 +++++++++++++++++++++++++++----- 2 files changed, 186 insertions(+), 34 deletions(-) diff --git a/docs/next/pixelratio.html b/docs/next/pixelratio.html index 218f8d44f0e..ac2f7cfad0d 100644 --- a/docs/next/pixelratio.html +++ b/docs/next/pixelratio.html @@ -1,4 +1,4 @@ -PixelRatio · React Native
Edit

PixelRatio

PixelRatio class gives access to the device pixel density.

+
Edit

PixelRatio

PixelRatio gives you access to the device's pixel density and font scale.

Fetching a correctly sized image

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({
@@ -82,7 +82,80 @@
 
In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

 
We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

 
In React Native, everything in JavaScript and within the layout engine works with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

-

+
Example

+

 
Reference

 
Methods

 
get()

@@ -90,30 +163,30 @@

Returns the device pixel density. Some examples:

    -
  • PixelRatio.get() === 1 +
  • PixelRatio.get() === 1
    • -
  • PixelRatio.get() === 1.5 +
  • PixelRatio.get() === 1.5
    • -
  • PixelRatio.get() === 2 +
  • PixelRatio.get() === 2
      -
    • iPhone 4, 4S
      • -
    • iPhone 5, 5C, 5S
      • -
    • iPhone 6, 7, 8
      • +
    • iPhone SE, 6S, 7, 8
    • iPhone XR
      • +
    • iPhone 11
    • xhdpi Android devices
    • -
  • PixelRatio.get() === 3 +
  • PixelRatio.get() === 3
      -
    • iPhone 6 Plus, 7 Plus, 8 Plus
      • +
    • iPhone 6S Plus, 7 Plus, 8 Plus
    • iPhone X, XS, XS Max
      • +
    • iPhone 11 Pro, 11 Pro Max
    • Pixel, Pixel 2
    • xxhdpi Android devices
    • -
  • PixelRatio.get() === 3.5 +
  • PixelRatio.get() === 3.5
    • Nexus 6
    • Pixel XL, Pixel 2 XL
      • @@ -122,23 +195,26 @@

    getFontScale()

    -
    static getFontScale()
+
    static getFontScale(): number
 
    
 
    Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.
    
+
      
+
    • on Android value reflects the user preference set in Settings > Display > Font size,
      • 
+
    • on iOS it will always return the default pixel ratio.
      • 
+
    
 
    If a font scale is not set, this returns the device pixel ratio.
    
-
    Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android
    
 
    
 
    getPixelSizeForLayoutSize()
    
-
    static getPixelSizeForLayoutSize(layoutSize)
+
    static getPixelSizeForLayoutSize(layoutSize: number): number
 
    
 
    Converts a layout size (dp) to pixel size (px).
    
 
    Guaranteed to return an integer number.
    
 
    
 
    roundToNearestPixel()
    
-
    static roundToNearestPixel(layoutSize)
+
    static roundToNearestPixel(layoutSize: number): number
 
    
 
    Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to exactly (8.33 * 3) = 25 pixels.
    
-
← PermissionsAndroid🚧 PushNotificationIOS →
Edit

PixelRatio

PixelRatio class gives access to the device pixel density.

+
Edit

PixelRatio

PixelRatio gives you access to the device's pixel density and font scale.

Fetching a correctly sized image

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({
@@ -82,7 +82,80 @@
 
In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

 
We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

 
In React Native, everything in JavaScript and within the layout engine works with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

-

+
Example

+

 
Reference

 
Methods

 
get()

@@ -90,30 +163,30 @@

Returns the device pixel density. Some examples:

    -
  • PixelRatio.get() === 1 +
  • PixelRatio.get() === 1
    • -
  • PixelRatio.get() === 1.5 +
  • PixelRatio.get() === 1.5
    • -
  • PixelRatio.get() === 2 +
  • PixelRatio.get() === 2
      -
    • iPhone 4, 4S
      • -
    • iPhone 5, 5C, 5S
      • -
    • iPhone 6, 7, 8
      • +
    • iPhone SE, 6S, 7, 8
    • iPhone XR
      • +
    • iPhone 11
    • xhdpi Android devices
    • -
  • PixelRatio.get() === 3 +
  • PixelRatio.get() === 3
      -
    • iPhone 6 Plus, 7 Plus, 8 Plus
      • +
    • iPhone 6S Plus, 7 Plus, 8 Plus
    • iPhone X, XS, XS Max
      • +
    • iPhone 11 Pro, 11 Pro Max
    • Pixel, Pixel 2
    • xxhdpi Android devices
    • -
  • PixelRatio.get() === 3.5 +
  • PixelRatio.get() === 3.5
    • Nexus 6
    • Pixel XL, Pixel 2 XL
      • @@ -122,23 +195,26 @@

    getFontScale()

    -
    static getFontScale()
+
    static getFontScale(): number
 
    
 
    Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.
    
+
      
+
    • on Android value reflects the user preference set in Settings > Display > Font size,
      • 
+
    • on iOS it will always return the default pixel ratio.
      • 
+
    
 
    If a font scale is not set, this returns the device pixel ratio.
    
-
    Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android
    
 
    
 
    getPixelSizeForLayoutSize()
    
-
    static getPixelSizeForLayoutSize(layoutSize)
+
    static getPixelSizeForLayoutSize(layoutSize: number): number
 
    
 
    Converts a layout size (dp) to pixel size (px).
    
 
    Guaranteed to return an integer number.
    
 
    
 
    roundToNearestPixel()
    
-
    static roundToNearestPixel(layoutSize)
+
    static roundToNearestPixel(layoutSize: number): number
 
    
 
    Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to exactly (8.33 * 3) = 25 pixels.
    
-
← PermissionsAndroid🚧 PushNotificationIOS →