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 →

informacja

useWindowDimensions jest preferowanym interfejsem API dla komponentów Reacta. W przeciwieństwie do Dimensions, aktualizuje się automatycznie przy zmianie wymiarów okna. To rozwiązanie doskonale współgra z paradygmatem 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;

uwaga

Chociaż wymiary są dostępne natychmiast, mogą ulec zmianie (np. z powodu obrotu urządzenia, urządzeń składanych itp.). Dlatego wszelka logika renderowania lub style zależne od tych wartości powinny wywoływać tę funkcję przy każdym renderowaniu, zamiast buforować 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.

uwaga

W przypadku Androida wymiar window będzie pomniejszony o rozmiar paska stanu (jeśli nie jest półprzezroczysty) i dolnego paska nawigacyjnego.

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