Wymiary

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 →

useWindowDimensions to zalecane API dla komponentów Reacta. W przeciwieństwie do Dimensions, aktualizuje się automatycznie przy zmianie wymiarów okna, co idealnie wpisuje się w paradygmat Reacta.

tsx

import {Dimensions} from 'react-native';

Szerokość i wysokość okna aplikacji możesz uzyskać za pomocą poniższego kodu:

tsx

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

Chociaż wymiary są dostępne natychmiast, mogą ulec zmianie (np. z powodu rotacji urządzenia, urządzeń składanych itp.), dlatego wszelka logika renderowania lub style zależne od tych stałych powinny wywoływać tę funkcję przy każdym renderowaniu, zamiast przechowywać wartość (np. używając stylów inline zamiast ustawiania wartości w StyleSheet).

Jeśli tworzysz aplikację dla urządzeń składanych lub urządzeń mogących zmieniać rozmiar ekranu/okna aplikacji, możesz użyć odbiornika zdarzeń dostępnego w module Dimensions, jak pokazano w przykładzie poniżej.

Przykład

Dokumentacja

Metody

addEventListener()

tsx

static addEventListener(
  type: 'change',
  handler: ({
    window,
    screen,
  }: DimensionsValue) => void,
): EmitterSubscription;

Dodaje obsługę zdarzenia. Obsługiwane zdarzenia:

• change: Wyzwalane gdy zmienia się właściwość w obiekcie Dimensions. Argument przekazywany do obsługi zdarzenia jest obiektem typu DimensionsValue.

---

get()

tsx

static get(dim: 'window' | 'screen'): ScaledSize;

Początkowe wymiary są ustawiane przed wywołaniem runApplication, więc powinny być dostępne przed uruchomieniem innych modułów, ale mogą zostać zaktualizowane później.

Przykład: const {height, width} = Dimensions.get('window');

Parametry:

Name	Type	Description
dim Required	string	Name of dimension as defined when calling set. Returns value for the dimension.

W przypadku Androida wymiar window wyklucza miejsce zajmowane przez status bar (jeśli nie jest półprzezroczysty) oraz bottom navigation bar.

---

Definicje Typów

DimensionsValue

Właściwości:

Name	Type	Description
window	ScaledSize	Size of the visible Application window.
screen	ScaledSize	Size of the device's screen.

ScaledSize

Type
object

Właściwości:

Name	Type
width	number
height	number
scale	number
fontScale	number