Introduction to react Native (11) screen fitting _react-native

Get ready

First, we can see in the Official document width and Height section that the unit in Rn is a DP, which is consistent with the units in Android.
In the official website:

A DP is equal to one physical pixel on a screens with a density of 160.To calculate DPS:
dp = (width in pixels * 160)/< C1/>screen density

Here's screen density density, it's about equal to (dpi/160), in Rn we can get through Pixelratio: pixelratio.get () = = 1
MDPI Android Device (160 dpi) pixelratio.get () = = 1.5
HDPI Android Device (the 2-inch dpi) Pixelratio.get
iphone 4, 4S iphone 5, 5c, 5s iphone 6 xhdpi Android device (Apple dpi) pixelratio.get () = 3
IPhone 6 Plus xxhdpi Android device (pixelratio.get dpi) () = = 3.5
Nexus 6

Here, we might as well comb through some of the concepts involved: DP (DIP) (density-independent pixels) is an abstract unit based on screen density, pixel-independent density. 1DP = 1px on display at 160 dots per inch. It is particularly necessary to note that the DP is a relative length unit, and simply say that the "physical length" displayed by the 1DP on different screens or different PPI may not be consistent. PX Pixel point. Also relative length in (inch) inches. Physical length pt Chinese is called pound, equal to 1/72 inches. Physical length SP (pixel-independent): Similar to DP, but can be scaled according to the user's font size preference, and used when Android sets the font. Density density. This can be referred to above, and pixelratio close, about equal to dpi/160. Pixelratio device pixel ratio. Obtain the PPI (pixels per inch) image resolution (the number of pixels in each inch, the diagonal) (dots per inch) print precision (points that can be printed in each inch, Pixelratio.get) Resolution: 2-directional pixel The number of points, common values 480x800, 750x1334 screen Size: The length of the screen diagonal (inches). Computer TV is the same.

So we can know:
1dp= (1 * density) px, opposite 1px= (1/density) DP

So how do we set up a 1px-wide split in Rn.

Width:1/Pixelratio.get ()

That's it.

In addition, the wide height of a device, we can get this:

Width:Dimensions.get (' window '). Width,
height:Dimensions.get (' window '). Height,

So what is the width of this?
We can print it out, like iphone6s, this value is printed out width:375,height:667, because the 6s density is 2, so we know that the width of this is DP. Fitting scheme

So, here's the adaptation scheme in Rn: Take 6,6s as an example:
UI design Prototypes: Based on Iphone6
Resolution: 1334 x 750 px;
Screen Size: 4.7 inches
DPI:326DPI (approximately equal to 320dpi,density=2)

Import {Dimensions} from ' react-native ';

Const DEVICEWIDTHDP = dimensions.get (' window '). Width;
Const UIWIDTHPX = 750;

Export default function PX2DP (UIELEMENTPX) {return
  uielementpx * DEVICEWIDTHDP/UIWIDTHPX;
}

DEVICEWIDTHDP is the width of the currently running device, uiwidthpx the width of the UI design chart, uielementpx the PX value of the element that is annotated in the design diagram.
Then use, such as a picture UI callout width is 200x400:

<image STYLE={{WIDTH:PX2DP, HEIGHT:PX2DP ()} source=xxx/>

Other

We can write a tool class, these commonly used to write together, easy to use:
Screenutil.js

Import {Dimensions, Platform, pixelratio} from ' react-native '

export default {
  width:Dimensions.get (' window ') . width,
  height:Dimensions.get (' window '). Height,
  onepixel:1/Pixelratio.get (),
  statusbar_height: ( Platform.os = = ' iOS '? 20:0),
  appbar_height: (Platform.os = = ' iOS '? 44:56),
}

Note that if this tool class and caller are not under a package, we need to write a index.js export in the tool class package, or we can't find it.

Import Screenutil from './screenutil '
...

Export {Screenutil};

Use the time directly: Screenutil.width on the line.

Another problem is statusbar_height and appbar_height, by the way.
iOS screen coordinates are included in the status bar, so we run a component in the iOS environment that will be drawn under the status bar, which will overlap the status bar, and Android will not, and he will start drawing below the status bar.

The top code is in Stacknavigator/header, especially when we customize the header title bar, and we need to be aware of setting paddingtop:statusbar_height, which avoids the problem of being drawn under the status bar under iOS.

：
Default unit and adaptive layout scheme for react Native
React-native Unit conversion (PX,PT,DP,PPI)
DPI, dip, resolution, screen size, px, density relationships, and conversions