MENU


PixelRatio

PixelRatio contains information about the device's pixel density and font scale.

Methodsget()getFontScale()getPixelSizeForLayoutSize()roundToNearestPixel()

RESETRUNFULL
import React from "react";import { Image, PixelRatio, ScrollView, StyleSheet, Text, TextInput, View }
                                     from "react-native";const size = 50;const cat = {
  uri: "https://reactnative.dev/docs/assets/p_cat1.png",
  width: size,
  height: size};const App = () => (
  <ScrollView style={styles.scrollContainer}>
    <View style={styles.container}>
      <Text>Current Pixel Ratio is:</Text>
      <Text style={styles.value}>{PixelRatio.get()}</Text>
    </View>
    <View style={styles.container}>
      <Text>Current Font Scale is:</Text>
      <Text style={styles.value}>{PixelRatio.getFontScale()}</Text>
    </View>
    <View style={styles.container}>
      <Text>On this device images with a layout width of</Text>
      <Text style={styles.value}>{size} px</Text>
      <Image source={cat} />
    </View>
    <View style={styles.container}>
      <Text>require images with a pixel width of</Text>
      <Text style={styles.value}>
        {PixelRatio.getPixelSizeForLayoutSize(size)} px
      </Text>
      <Image source={cat}
                   style={{
                    width: PixelRatio.getPixelSizeForLayoutSize(size),
                    height: PixelRatio.getPixelSizeForLayoutSize(size)}}/>
    </View>
  </ScrollView>);const styles = StyleSheet.create({
  scrollContainer: {flext: 1, marginTop: "2em", justifyContent: "center"},
  container: {justifyContent: "center", alignItems: "center"},
  value: {fontSize: 24, marginBottom: 12, marginTop: 4}});export default App;