react-native screen size and text size fit

Today's mobile phone brands and models are more and more, resulting in our usual writing layout in a different mobile devices will display different effects,

For example, our design draft a view size is 300px, if directly write 300px, may be in the current device display normal, but to other devices may be small or large, which requires us to match the screen.

Android native words have their own adaptation rules, can be based on different sizes to create different folders, the system will be based on the current device size of the corresponding size of the layout. And the RN itself does not fit the rules, and the original and compared to the lock, which requires us to the screen to fit.

First look at the newly released screen adapter class:

/ **
 * Created by zhuoy on 2017/6/27.
 * Screen tools
 * UI design benchmark, iPhone 6
 * width: 750
 * height: 1334
 * /

/ *
 The pixel density of the device, for example:
 PixelRatio.get () === 1 mdpi Android device (160 dpi)
 PixelRatio.get () === 1.5 hdpi Android device (240 dpi)
 PixelRatio.get () === 2 iPhone 4, 4S, iPhone 5, 5c, 5s, iPhone 6, xhdpi Android device (320 dpi)
 PixelRatio.get () === 3 iPhone 6 plus, xxhdpi Android device (480 dpi)
 PixelRatio.get () === 3.5 Nexus 6 * /

import {
    Dimensions,
    PixelRatio,
} from 'react-native';


export const deviceWidth = Dimensions.get ('window'). width; // device width
export const deviceHeight = Dimensions.get ('window'). height; // Height of the device
let fontScale = PixelRatio.getFontScale (); // Return the font size scaling

let pixelRatio = PixelRatio.get (); // pixel density of the current device
const defaultPixel = 2; // pixel density of iphone6
// px to dp
const w2 = 750 / defaultPixel;
const h2 = 1334 / defaultPixel;
const scale = Math.min (deviceHeight / h2, deviceWidth / w2); // Get the scale
/ **
 * Set text to sp
 * @param size sp
 * return number dp
 * /
export function setSpText (size: number) {
    size = Math.round ((size * scale + 0.5) * pixelRatio / fontScale);
    return size / defaultPixel;
}

export function scaleSize (size: number) {

    size = Math.round (size * scale + 0.5);
    return size / defaultPixel;
}

Because the general design draft is based on Iphone6 to design, so here based on IPhone6 to write this tool class,

Of course, if you are not, you can change the above, Defaultpixelratio changed to your device pixel.

Here we fit the text and the size.

Look at the same code on the different phone display effect:

Code:

export default class Home extends React.Component {      render () {          return (              <View>                  <Text style = {{fontSize: 30}}> No adaptation, native pixels: {PixelRatio.get ()} </ Text>                  <Text style = ({fontSize: ScreenUtil.setSpText (30)})> fitted </ Text>                  <View style = {{                      height: 50, width: 240, backgroundColor: 'green'                  }}> </ View>                  <View style = {{                      height: ScreenUtil.scaleSize (50),                      width: ScreenUtil.scaleSize (240),                      backgroundColor: 'red'                  }}> </ View>              </ View>          )      } } 

Here, I've used 2 Android devices with pixels of 1.5 and 2.65 to show:

Picture: The left side is a large screen, the right side is a small screen mobile phone.

The first line is the size of 30px text, because the screen itself causes that may look different size, but in fact it is the same size text.

And the second line we fit to see, on the large screen (relative to the IPhone6), 30px Zoom in, and small screen on the smaller operation.

In this way, the appropriate font size is displayed on different devices.

The following view is also the same truth, have been reduced to varying degrees.

OK, here, the screen fitting is complete.

GitHub Source code Address