Przejdź do treści głównej

PixelRatio

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

PixelRatio zapewnia dostęp do gęstości pikseli urządzenia i skali czcionek.

Pobieranie obrazu o prawidłowym rozmiarze​

Na urządzeniu o wysokiej gęstości pikseli należy użyć obrazu o wyższej rozdzielczości. Dobrą zasadą jest pomnożenie rozmiaru wyświetlanego obrazu przez współczynnik pikseli.

tsx
const image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />;

Przyciąganie do siatki pikseli​

W systemie iOS można precyzyjnie określać pozycje i wymiary elementów, np. 29.674825. Jednak fizyczny wyświetlacz ma stałą liczbę pikseli, np. 640×1136 dla iPhone'a SE (1. generacja) czy 828×1792 dla iPhone'a 11. iOS stara się jak najwierniej oddać wartości użytkownika, rozkładając jeden oryginalny piksel na wiele mniejszych. Wadą tej techniki jest rozmyty wygląd wynikowego elementu.

W praktyce odkryliśmy, że programiści nie chcą tej funkcji i muszą ją omijać, ręcznie zaokrąglając wartości, aby uniknąć rozmytych elementów. W React Native automatycznie zaokrąglamy wszystkie piksele.

Należy uważać na moment tego zaokrąglania. Nigdy nie należy jednocześnie używać wartości zaokrąglonych i niezaokrąglonych, ponieważ prowadzi to do kumulowania błędów zaokrąglania. Nawet jeden błąd może być krytyczny - jednopikselowa obramówka może zniknąć lub stać się dwukrotnie szersza.

W React Native wszystko w JavaScripcie i silniku układu działa na liczbach o dowolnej precyzji. Zaokrąglanie następuje dopiero przy ustawianiu pozycji i wymiarów natywnego elementu w głównym wątku. Zaokrąglanie odbywa się też względem korzenia, a nie rodzica, aby uniknąć kumulowania błędów.

Przykład​

Dokumentacja

Metody​

get()​

tsx
static get(): number;

Zwraca gęstość pikseli urządzenia. Przykłady:

getFontScale()​

tsx
static getFontScale(): number;

Zwraca współczynnik skalowania rozmiarów czcionek. Jest to stosunek używany do obliczania bezwzględnego rozmiaru czcionki, więc wszystkie elementy silnie zależne od tego powinny go wykorzystywać w obliczeniach.

  • w Androidzie wartość odzwierciedla preferencje użytkownika w Ustawienia > Ekran > Rozmiar czcionki

  • w iOS wartość odzwierciedla preferencje w Ustawienia > Ekran i jasność > Rozmiar tekstu, można ją też zmienić w Ustawienia > Ułatwienia dostępu > Wyświetlacz i rozmiar tekstu > Większy tekst

Jeśli skala czcionki nie jest ustawiona, zwracana jest gęstość pikseli urządzenia.

getPixelSizeForLayoutSize()​

tsx
static getPixelSizeForLayoutSize(layoutSize: number): number;

Konwertuje rozmiar układu (dp) na rozmiar w pikselach (px).

Gwarantuje zwrócenie liczby całkowitej.

roundToNearestPixel()​

tsx
static roundToNearestPixel(layoutSize: number): number;

Zaokrągla rozmiar w jednostkach układu (dp) do najbliższej wartości odpowiadającej całkowitej liczbie pikseli. Na przykład na urządzeniu z PixelRatio równym 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, co odpowiada dokładnie (8.33 * 3) = 25 pikselom.