[Turn] react-native layout

PS: The width unit used by Apple is designed for developers to use close values on the application. For example, the width range is between 320-414. But the width corresponds to the pixel is a conversion scale, especially for the background map to prepare enough pixels of the picture. This enough pixel can be calculated by formula Pixelratio, iphone6p maximum is 1080*1920

Width units and pixel density

The width of the react does not support the percentage, and the width is not required to bring {width: 10} the unit, then 10 what is the specific width?

Do not know the official website documents are not all or my eyes blind, anyway is not found, then do an experiment to find it yourself:

    var Dimensions = require(‘Dimensions‘);    <Text style={styles.welcome}> window.width={Dimensions.get(‘window‘).width + ‘\n‘} window.height={Dimensions.get(‘window‘).height + ‘\n‘} pxielRatio={PixelRatio.get()} </Text> 

The default is Ihone6 simulator results are:

    window.width=375    window.height=667

We know the size of the iphone series such as:

You can see that the iphone 6 has a width of 375pt, which corresponds to the top 375, in fact frustration indicates that the unit is DP. So how do you get the actual pixel size? This is very important for HD, if my picture is the size of the image. Set width to 100. The size on the iphone is blurry. The size of the image needed at this time should be pixelratio.

REACT provides a way to get Pixelratio https://facebook.github.io/react-native/docs/pixelratio.html

var image = getImage({   width: 200 * PixelRatio.get(),   height: 100 * PixelRatio.get() }); <Image source={image} style={{width: 200, height: 100}} />

[Turn] react-native layout