Widok

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 →

Najbardziej podstawowy komponent do budowania interfejsu użytkownika, View jest kontenerem obsługującym układ z flexbox, stylami, podstawową obsługą dotyku i kontrolami ułatwień dostępu. View bezpośrednio odpowiada natywnemu odpowiednikowi widoku na każdej platformie, na której działa React Native, niezależnie czy jest to UIView, <div>, android.view itp.

View jest zaprojektowany do zagnieżdżania wewnątrz innych widoków i może mieć od 0 do wielu dzieci dowolnego typu.

Ten przykład tworzy View, który otacza dwa kolorowe prostokąty i komponent tekstowy ułożone w rzędzie z dopełnieniem (padding).

Komponenty View są przeznaczone do używania z StyleSheet dla przejrzystości i wydajności, choć obsługiwane są również style inline.

Syntetyczne zdarzenia dotykowe

Dla właściwości odpowiadających na zdarzenia w View (np. onResponderMove), syntetyczne zdarzenie dotykowe przekazywane do nich ma formę PressEvent.

---

Dokumentacja

Właściwości

---

accessibilityActions

Akcje ułatwień dostępu pozwalają technologiom asystującym na programowe wywoływanie akcji komponentu. Właściwość accessibilityActions powinna zawierać listę obiektów akcji. Każdy obiekt akcji powinien zawierać pola name i label.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
array

---

accessibilityElementsHidden

iOS

Wartość wskazująca, czy elementy ułatwień dostępu zawarte w tym elemencie są ukryte. Domyślnie false.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
bool

---

accessibilityHint

Podpowiedź ułatwień dostępu pomaga użytkownikom zrozumieć, co się stanie, gdy wykonają akcję na elemencie ułatwień dostępu, gdy wynik nie jest jasny z etykiety ułatwień dostępu.

Type
string

---

accessibilityLanguage

iOS

Wartość określająca język używany przez czytnik ekranu podczas interakcji użytkownika z elementem. Powinna być zgodna ze specyfikacją BCP 47.

Więcej informacji znajdziesz w dokumentacji accessibilityLanguage dla iOS.

Type
string

---

accessibilityIgnoresInvertColors

iOS

Wartość wskazująca, czy ten widok powinien być inwertowany, gdy włączona jest inwersja kolorów. Wartość true spowoduje, że widok nie zostanie odwrócony nawet przy włączonej inwersji kolorów.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
bool

---

accessibilityLabel

Nadpisuje tekst odczytywany przez czytnik ekranu, gdy użytkownik wchodzi w interakcję z elementem. Domyślnie etykieta jest konstruowana poprzez przejście wszystkich dzieci i zebranie wszystkich węzłów Text oddzielonych spacją.

Type
string

---

accessibilityLiveRegion

Android

Wskazuje usługom ułatwień dostępu, czy użytkownik powinien być powiadamiany o zmianach w tym widoku. Działa tylko dla Androida z API >= 19. Możliwe wartości:

• 'none' - Usługi ułatwień dostępu nie powinny ogłaszać zmian tego widoku.

• 'polite'- Usługi ułatwień dostępu powinny ogłaszać zmiany tego widoku.

• 'assertive' - Usługi ułatwień dostępu powinny przerwać bieżącą mowę, aby natychmiast ogłosić zmiany tego widoku.

Więcej informacji znajdziesz w dokumentacji View dla Androida.

Type
enum('none', 'polite', 'assertive')

---

accessibilityRole

accessibilityRole komunikuje cel komponentu użytkownikowi technologii asystujących.

accessibilityRole może przyjmować jedną z następujących wartości:

• 'none' - Używane gdy element nie pełni żadnej roli.

• 'button' - Używane gdy element powinien być traktowany jak przycisk.

• 'link' - Używane gdy element powinien być traktowany jak odnośnik.

• 'search' - Używane gdy pole tekstowe powinno być również traktowane jako pole wyszukiwania.

• 'image' - Używane gdy element powinien być traktowany jako obraz. Może być łączone z przyciskiem lub odnośnikiem.

• 'keyboardkey' - Używane gdy element działa jak klawisz klawiatury.

• 'text' - Używane gdy element powinien być traktowany jako statyczny tekst, który nie może się zmieniać.

• 'adjustable' - Używane gdy element może być "regulowany" (np. suwak).

• 'imagebutton' - Używane gdy element powinien być traktowany jako przycisk i jednocześnie jest obrazem.

• 'header' - Używane gdy element pełni rolę nagłówka sekcji treści (np. tytuł paska nawigacyjnego).

• 'summary' - Używane gdy element może dostarczyć szybkiego podsumowania bieżących warunków w aplikacji przy pierwszym uruchomieniu.

• 'alert' - Używane gdy element zawiera ważny tekst do przedstawienia użytkownikowi.

• 'checkbox' - Używane gdy element reprezentuje pole wyboru, które może być zaznaczone, odznaczone lub w stanie mieszanym.

• 'combobox' - Używane gdy element reprezentuje pole kombi, pozwalające wybierać spośród kilku opcji.

• 'menu' - Używane gdy komponent jest menu wyboru.

• 'menubar' - Używane gdy komponent jest kontenerem wielu menu.

• 'menuitem' - Używane do reprezentowania elementu w menu.

• 'progressbar' - Używane do reprezentowania komponentu pokazującego postęp zadania.

• 'radio' - Używane do reprezentowania przycisku opcji.

• 'radiogroup' - Używane do reprezentowania grupy przycisków opcji.

• 'scrollbar' - Używane do reprezentowania paska przewijania.

• 'spinbutton' - Używane do reprezentowania przycisku otwierającego listę wyboru.

• 'switch' - Używane do reprezentowania przełącznika, który można włączać i wyłączać.

• 'tab' - Używane do reprezentowania zakładki.

• 'tablist' - Używane do reprezentowania listy zakładek.

• 'timer' - Używane do reprezentowania timera.

• 'toolbar' - Używane do reprezentowania paska narzędzi (kontenera przycisków akcji lub komponentów).

• 'grid' - Używany z ScrollView, VirtualizedList, FlatList lub SectionList do reprezentowania siatki. Dodaje komunikaty wejścia/wyjścia z siatki do androidowego GridView.

Type
string

---

accessibilityState

Opisuje bieżący stan komponentu użytkownikowi technologii asystujących.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}

---

accessibilityValue

Reprezentuje bieżącą wartość komponentu. Może to być opis tekstowy wartości lub dla komponentów zakresowych (np. suwaków czy pasków postępu) zawiera informacje o zakresie (minimalna, bieżąca i maksymalna).

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
object: {min: number, max: number, now: number, text: string}

---

accessibilityViewIsModal

iOS

Wartość wskazująca, czy VoiceOver powinien ignorować elementy w widokach będących rodzeństwem odbiornika. Domyślnie false.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
bool

---

accessible

Gdy true, wskazuje że widok jest elementem ułatwień dostępu wykrywalnym przez technologie asystujące jak czytniki ekranu czy klawiatury sprzętowe. Domyślnie wszystkie elementy klikalne są dostępne.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

---

aria-busy

Wskazuje, że element jest modyfikowany, a technologie asystujące powinny zaczekać z powiadomieniem użytkownika do zakończenia zmian.

Type	Default
boolean	false

---

aria-checked

Wskazuje stan elementu z możliwością zaznaczenia. Przyjmuje wartość logiczną lub ciąg "mixed" dla pól wyboru w stanie mieszanym.

Type	Default
boolean, 'mixed'	false

---

aria-disabled

Wskazuje, że element jest widoczny, ale wyłączony - nie można go edytować ani obsługiwać.

Type	Default
boolean	false

---

aria-expanded

Wskazuje, czy rozwijany element jest aktualnie rozwinięty czy zwinięty.

Type	Default
boolean	false

---

aria-hidden

Wskazuje, czy elementy dostępności zawarte w tym elemencie dostępności są ukryte.

Na przykład, w oknie zawierającym widoki rodzeństwa A i B, ustawienie aria-hidden na true dla widoku B spowoduje, że VoiceOver zignoruje elementy w widoku B.

Type	Default
boolean	false

---

aria-label

Definiuje wartość tekstową etykietującą interaktywny element.

Type
string

---

aria-labelledby

Android

Identyfikuje element etykietujący bieżący element. Wartość aria-labelledby musi odpowiadać nativeID powiązanego elementu:

tsx

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

Type
string

---

aria-live

Android

Wskazuje, że element zostanie zaktualizowany i opisuje rodzaje aktualizacji, których agenty użytkownika, technologie asystujące i użytkownik mogą się spodziewać po regionie aktywnym.

• off Usługi dostępności nie powinny ogłaszać zmian w tym widoku.

• polite Usługi dostępności powinny ogłaszać zmiany w tym widoku.

• assertive Usługi dostępności powinny przerwać trwającą mowę, aby natychmiast ogłosić zmiany w tym widoku.

Type	Default
enum('assertive', 'off', 'polite')	'off'

---

aria-modal

iOS

Wartość logiczna wskazująca, czy VoiceOver powinien ignorować elementy w widokach będących rodzeństwem odbiornika. Ma pierwszeństwo przed właściwością accessibilityViewIsModal.

Type	Default
boolean	false

---

aria-selected

Wskazuje, czy wybieralny element jest aktualnie zaznaczony.

Type
boolean

aria-valuemax

Reprezentuje maksymalną wartość dla komponentów zakresowych, takich jak suwaki i paski postępu. Ma pierwszeństwo przed wartością max we właściwości accessibilityValue.

Type
number

---

aria-valuemin

Reprezentuje minimalną wartość dla komponentów zakresowych, takich jak suwaki i paski postępu. Ma pierwszeństwo przed wartością min we właściwości accessibilityValue.

Type
number

---

aria-valuenow

Reprezentuje bieżącą wartość dla komponentów zakresowych, takich jak suwaki i paski postępu. Ma pierwszeństwo przed wartością now we właściwości accessibilityValue.

Type
number

---

aria-valuetext

Reprezentuje opis tekstowy komponentu. Ma pierwszeństwo przed wartością text we właściwości accessibilityValue.

Type
string

---

collapsable

Widoki używane tylko do układania dzieci lub niewyświetlające niczego mogą być automatycznie usuwane z natywnej hierarchii w celu optymalizacji. Ustaw tę właściwość na false, aby wyłączyć tę optymalizację i zapewnić istnienie tego View w natywnej hierarchii widoków.

Type	Default
boolean	true

---

collapsableChildren

Ustawienie na false zapobiega usuwaniu bezpośrednich dzieci widoku z natywnej hierarchii widoków, podobnie jak ustawienie collapsable={false} dla każdego dziecka.

Type	Default
boolean	true

---

focusable

Android

Określa, czy ten View powinien być możliwy do skupienia za pomocą urządzenia wejściowego innego niż dotykowe, np. otrzymywać skupienie za pomocą klawiatury sprzętowej.

Type
boolean

---

hitSlop

Określa, jak daleko od widoku może rozpocząć się zdarzenie dotknięcia. Typowe wytyczne interfejsu zalecają obszary dotykowe o wielkości co najmniej 30-40 punktów/pikseli niezależnych od gęstości.

Na przykład, jeśli dotykowy widok ma wysokość 20, to jego dotykowa wysokość może zostać rozszerzona do 40 za pomocą hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}

Obszar dotyku nigdy nie wykracza poza granice widoku nadrzędnego, a indeks Z sąsiednich widoków zawsze ma pierwszeństwo, gdy dotknięcie trafi w dwa nakładające się widoki.

Type
object: {top: number, left: number, bottom: number, right: number}

---

id

Używane do lokalizowania tego widoku z klas natywnych. Ma pierwszeństwo przed właściwością nativeID.

To wyłącza optymalizację 'usuwania widoków tylko do układu' dla tego widoku!

Type
string

---

importantForAccessibility

Android

Kontroluje, jak ważny jest widok dla ułatwień dostępu, tj. czy wyzwala zdarzenia ułatwień dostępu i czy jest zgłaszany do usług ułatwień dostępu, które badają ekran. Działa tylko na Androida.

Dopuszczalne wartości:

• 'auto' - System decyduje, czy widok jest ważny dla ułatwień dostępu - domyślnie (zalecane).

• 'yes' - Widok jest ważny dla ułatwień dostępu.

• 'no' - Widok nie jest ważny dla ułatwień dostępu.

• 'no-hide-descendants' - Widok nie jest ważny dla ułatwień dostępu, podobnie jak żaden z jego widoków potomnych.

Więcej informacji znajdziesz w dokumentacji Androida importantForAccessibility.

Type
enum('auto', 'yes', 'no', 'no-hide-descendants')

---

nativeID

Używane do lokalizowania tego widoku z klas natywnych.

To wyłącza optymalizację 'usuwania widoków tylko do układu' dla tego widoku!

Type
string

---

needsOffscreenAlphaCompositing

Określa, czy ten View musi być renderowany poza ekranem i komponowany z przezroczystością, aby zachować w 100% poprawne kolory i zachowanie mieszania. Domyślnie (false) zamiast tego rysuje komponent i jego dzieci z zastosowaną przezroczystością do farby używanej do rysowania każdego elementu, zamiast renderować cały komponent poza ekranem i komponować go z powrotem z wartością przezroczystości. To domyślne zachowanie może być zauważalne i niepożądane w przypadku, gdy View, na którym ustawiasz przezroczystość, ma wiele nakładających się elementów (np. wiele nakładających się View lub tekst i tło).

Renderowanie poza ekranem, aby zachować poprawne zachowanie przezroczystości, jest bardzo kosztowne i trudne do debugowania dla programistów nie-natywnych, dlatego nie jest domyślnie włączone. Jeśli jednak musisz włączyć tę właściwość dla animacji, rozważ połączenie jej z renderToHardwareTextureAndroid, jeśli zawartość widoku jest statyczna (tzn. nie musi być przerysowywana w każdej klatce). Jeśli ta właściwość jest włączona, ten widok zostanie wyrenderowany poza ekranem raz, zapisany w teksturze sprzętowej, a następnie komponowany na ekranie z przezroczystością w każdej klatce bez konieczności przełączania celów renderowania na GPU.

Type
bool

---

nextFocusDown

Android

Określa następny widok, który otrzyma fokus przy nawigacji w dół. Zobacz dokumentację Androida.

Type
number

---

nextFocusForward

Android

Określa następny widok, który otrzyma fokus przy nawigacji do przodu. Zobacz dokumentację Androida.

Type
number

---

nextFocusLeft

Android

Określa następny widok, który otrzyma fokus przy nawigacji w lewo. Zobacz dokumentację Androida.

Type
number

---

nextFocusRight

Android

Określa następny widok, który otrzyma fokus przy nawigacji w prawo. Zobacz dokumentację Androida.

Type
number

---

nextFocusUp

Android

Określa następny widok, który otrzyma fokus przy nawigacji w górę. Zobacz dokumentację Androida.

Type
number

---

onAccessibilityAction

Wywoływana, gdy użytkownik wykonuje akcje ułatwień dostępu. Jedynym argumentem tej funkcji jest zdarzenie zawierające nazwę akcji do wykonania.

Więcej informacji znajdziesz w przewodniku o ułatwieniach dostępu.

Type
function

---

onAccessibilityEscape

iOS

Gdy accessible jest true, system wywoła tę funkcję, gdy użytkownik wykona gest ucieczki.

Type
function

---

onAccessibilityTap

iOS

Gdy accessible jest true, system spróbuje wywołać tę funkcję, gdy użytkownik wykona gest dotknięcia w ułatwieniach dostępu.

Type
function

---

onLayout

Wywoływane przy montowaniu i zmianach układu.

To zdarzenie jest wyzwalane natychmiast po obliczeniu układu, ale nowy układ może nie być jeszcze odzwierciedlony na ekranie w momencie odbioru zdarzenia, zwłaszcza jeśli trwa animacja układu.

Type
({nativeEvent: LayoutEvent}) => void

---

onMagicTap

iOS

Gdy accessible jest true, system wywoła tę funkcję, gdy użytkownik wykona gest magicznego dotknięcia.

Type
function

---

onMoveShouldSetResponder

Czy ten widok chce „przejąć” odpowiedzialność za dotyk? Wywoływane dla każdego ruchu dotyku na View, gdy nie jest on aktualnym responderem.

Type
({nativeEvent: PressEvent}) => boolean

---

onMoveShouldSetResponderCapture

Jeśli nadrzędny View chce uniemożliwić podrzędnemu View zostanie responderem podczas przesuwania, powinien mieć ten handler, który zwraca true.

Type
({nativeEvent: PressEvent}) => boolean

---

onResponderGrant

View teraz odpowiada za zdarzenia dotykowe. To jest moment, aby podświetlić i pokazać użytkownikowi, co się dzieje.

W systemie Android zwróć true z tego callbacku, aby uniemożliwić innym natywnym komponentom przejęcie roli respondera do czasu zakończenia działania tego respondera.

Type
({nativeEvent: PressEvent}) => void ｜ boolean

---

onResponderMove

Użytkownik porusza palcem.

Type
({nativeEvent: PressEvent}) => void

---

onResponderReject

Inny responder jest już aktywny i nie zwolni go dla tego View, który prosi o zostanie responderem.

Type
({nativeEvent: PressEvent}) => void

---

onResponderRelease

Wywoływane przy zakończeniu dotyku.

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminate

Responder został odebrany temu View. Mógł zostać przejęty przez inne widoki po wywołaniu onResponderTerminationRequest lub przez system bez pytania (np. przy otwieraniu Centrum sterowania/Powiadomień w iOS).

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminationRequest

Inny View chce zostać responderem i prosi ten View o zwolnienie responderera. Zwrócenie true pozwala na jego zwolnienie.

Type
({nativeEvent: PressEvent}) => void

---

onStartShouldSetResponder

Czy ten widok chce zostać responderem na początku dotyku?

Type
({nativeEvent: PressEvent}) => boolean

---

onStartShouldSetResponderCapture

Jeśli nadrzędny View chce uniemożliwić podrzędnemu View zostanie responderem na początku dotyku, powinien mieć ten handler, który zwraca true.

Type
({nativeEvent: PressEvent}) => boolean

---

pointerEvents

Kontroluje, czy View może być celem zdarzeń dotykowych.

• 'auto': View może być celem zdarzeń dotykowych.

• 'none': View nigdy nie jest celem zdarzeń dotykowych.

• 'box-none': View nigdy nie jest celem zdarzeń dotykowych, ale jego widoki potomne mogą być. Zachowuje się tak, jakby widok miał następujące klasy w CSS:

css

.box-none {
  pointer-events: none;
}
.box-none * {
  pointer-events: auto;
}

• 'box-only': Widok może być celem zdarzeń dotykowych, ale jego widoki potomne nie mogą. Zachowuje się tak, jakby widok miał następujące klasy w CSS:

css

.box-only {
  pointer-events: auto;
}
.box-only * {
  pointer-events: none;
}

Type
enum('box-none', 'none', 'box-only', 'auto')

---

removeClippedSubviews

Jest to zarezerwowana właściwość wydajnościowa udostępniana przez RCTView, przydatna przy przewijaniu zawartości, gdy istnieje wiele widoków potomnych, z których większość znajduje się poza ekranem. Aby ta właściwość była skuteczna, musi być zastosowana do widoku zawierającego wiele widoków potomnych, które rozciągają się poza jego granice. Widoki potomne muszą również mieć overflow: hidden, podobnie jak widok zawierający (lub jeden z jego widoków nadrzędnych).

Type
bool

---

renderToHardwareTextureAndroid

Android

Określa, czy ten View powinien renderować siebie (i wszystkie swoje dzieci) do pojedynczej tekstury sprzętowej na GPU.

W systemie Android jest to przydatne dla animacji i interakcji, które modyfikują tylko przezroczystość, obrót, przesunięcie i/lub skalę: w takich przypadkach widok nie musi być przerysowywany, a listy wyświetlania nie muszą być ponownie wykonywane. Tekstura może być ponownie użyta i skomponowana z różnymi parametrami. Wadą jest to, że może to zużywać ograniczoną pamięć wideo, więc ta właściwość powinna zostać ustawiona z powrotem na false po zakończeniu interakcji/animacji.

Type
bool

---

role

role komunikuje cel komponentu użytkownikowi technologii asystujących. Ma pierwszeństwo przed właściwością accessibilityRole.

Type
Role

---

shouldRasterizeIOS

iOS

Określa, czy ten View powinien być renderowany jako bitmapa przed komponowaniem.

W systemie iOS jest to przydatne dla animacji i interakcji, które nie modyfikują wymiarów tego komponentu ani jego dzieci; na przykład, podczas przesuwania pozycji statycznego widoku, rasteryzacja pozwala rendererowi na ponowne użycie zapisanej bitmapy statycznego widoku i szybkie skomponowanie jej w każdej klatce.

Rasteryzacja wiąże się z przejściem rysowania poza ekranem, a bitmapa zużywa pamięć. Testuj i mierz, używając tej właściwości.

Type
bool

---

style

Type
View Style

---

tabIndex

Android

Określa, czy ten View powinien być focusowalny za pomocą urządzenia wejściowego innego niż dotykowe, np. otrzymywać focus za pomocą sprzętowej klawiatury. Obsługuje następujące wartości:

• 0 - Widok jest focusowalny

• -1 - Widok nie jest focusowalny

Type
enum(0, -1)

---

testID

Używany do lokalizowania tego widoku w testach end-to-end.

To wyłącza optymalizację 'usuwania widoków tylko do układu' dla tego widoku!

Type
string