Kiedy tworzymy aplikację React Native, w niektórych przypadkach oczekujemy, że aplikacja będzie działać zarówno na telefonach komórkowych, jak i tabletach (iPad, tablety z systemem Android).

Jednym z wyzwań związanych z tego rodzaju wymaganiami są wizualnie różne style, takie jak rozmiary czcionek, które nie są dostosowywane do rozmiaru ekranu.

Urządzenia iOS i Android mają różne proporcje pikseli. Jeśli definiujesz rozmiary czcionek w pikselach, rozmiar może się różnić w zależności od urządzenia. W rezultacie musimy zdefiniować każdą czcionkę, szerokość, wysokość zgodnie z gęstością pikseli i wymiarami urządzenia.

Rozwiązanie:

Ten rodzaj problemu z React Native Application można rozwiązać poprzez normalizację stylów w odniesieniu do stałej skali rozmiaru ekranu.

Przykład: na podstawie skali iPhone'a 11

screenWidth = 414 screenHeight = 896

UWAGA: Każde urządzenie może być brane pod uwagę w przypadku wejść o stałej skali. Najlepiej wybrać urządzenie, dla którego przeznaczony jest UX.

Użyj tych stałych skal, aby obliczyć baseWidth i baseHeight.

KROK 1:

Najpierw musielibyśmy wyodrębnić wysokość i szerokość ekranu za pomocą wymiarów z pakietu React-native.

import { Dimensions } from 'react native';
const { 
  width: SCREEN_WIDTH, 
  height: SCREEN_HEIGHT 
  } = Dimensions.get('window');

const widthBaseScale = SCREEN_WIDTH / 414;
const heightBaseScale = SCREEN_HEIGHT / 896;

Korzystając ze skali bazowej musimy stworzyć funkcję, która obliczy najlepiej dopasowany rozmiar.

import { PixelRatio } from 'react-native';
function normalize(size, based = 'width') {
 const newSize = (based === 'height') ? 
                 size * heightBaseScale : size * widthBaseScale;
return Math.round(PixelRatio.roundToNearestPixel(newSize));
}

KROK 3:

Ta funkcja normalizacji może być używana do tworzenia i eksportowania funkcji, które mogą być zasilane rozmiarami czcionek, marginesami, dopełnieniem, wysokością, szerokością itp.

//for width  pixel
const widthPixel = (size) => {
  return normalize(size, 'width');
};
//for height  pixel
const heightPixel = (size) => {
  return normalize(size, 'height');
};
//for font  pixel
const fontPixel = (size) => {
  return heightPixel(size);
};
//for Margin and Padding vertical pixel
const pixelSizeVertical = (size) => {
  return heightPixel(size);
};
//for Margin and Padding horizontal pixel
const pixelSizeHorizontal = (size) => {
  return widthPixel(size);
};
export {
  widthPixel,
  heightPixel,
  fontPixel,
  pixelSizeVertical,
  pixelSizeHorizontal
};

Wyeksportowane powyżej funkcje mogą być używane w arkuszach stylów do normalizacji rozmiarów, jak pokazano w poniższym fragmencie kodu.

const styles = StyleSheet.create({
 container: {
   paddingHorizontal: pixelSizeHorizontal(15),
   paddingVerticle: pixelSizeVertical(20),
   marginBottom: pixelSizeVertical(10),
   height: heightPixel(200),
   width: widthPixel(200),
 },
 
 title: {
   fontSize: fontPixel(18),
   paddingVerticle: pixelSizeVertical(10),
 },
})

Powyższa implementacja jest jednym z najprostszych sposobów uzyskania czystego, dobrze zwymiarowanego interfejsu użytkownika na urządzeniach o różnych rozmiarach.