current position:Home>Reactnative foundation - 04 (custom rpx)

Reactnative foundation - 04 (custom rpx)

2022-01-27 03:26:33 The black cat made a strange mistake

        rpx(responsive pixel): You can adapt to the width of the screen . Set the screen width to 750rpx. If in iPhone6 On , The screen width is 375px, share 750 Individual physical pixels , be 750rpx = 375px = 750 Physical pixel ,1rpx = 0.5px = 1 Physical pixel .

      ReactNative  There is no rpx Company , Use the formula to calculate , Encapsulated as a function, use , for example :rpx(20) = 20rpx

1、 Get screen width : adopt Dimensions obtain

        Dimensions.get('window'):window Than screen Highly adaptable , Will automatically remove the navigation bar 、 status bar ... Height , What is obtained is the operable area

2、 Calculation rpx

import React, {Component} from 'react';
import {Text, View, Dimensions} from 'react-native';

const {width, height} = Dimensions.get('window');
const rpx = x => (width / 750) * x;
export default class App extends Component {
  render() {
    console.log(width, height);
    return (
      <View>
        <Text style={
   {fontSize: rpx(46)}}> OOOOOO </Text>
      </View>
    );
  }
}

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270326317052.html

Random recommended