View¶

Самый фундаментальный компонент для создания пользовательского интерфейса, View — это контейнер, который поддерживает компоновку с помощью элементов управления flexbox, style, some touch handling и accessibility. View отображает непосредственно эквивалент нативного представления на любой платформе, на которой работает React Native, будь то UIView, div, android.view и т. д.

Представление View предназначено для вложения в другие представления и может иметь от 0 до многих дочерних элементов любого типа.

Этот пример создает View, который оборачивает два поля с цветом и текстовый компонент в строку с подложкой.

Синтетические сенсорные события¶

Для пропсов ответчика View (например, onResponderMove), передаваемые им синтетические события касания имеют форму PressEvent.

Свойства¶

accessibilityActions¶

Действия доступности позволяют ассистивной технологии программно вызывать действия компонента. Свойство accessibilityActions должно содержать список объектов действий. Каждый объект действия должен содержать имя поля и метку.

Дополнительную информацию см. в Руководстве по доступности.

accessibilityElementsHidden ¶

Значение, указывающее, являются ли элементы доступности, содержащиеся в этом элементе доступности, скрытыми. По умолчанию false.

Дополнительную информацию см. в Руководстве по доступности.

accessibilityHint¶

Подсказка доступности помогает пользователям понять, что произойдет, когда они выполнят действие над элементом доступности, если результат не ясен из метки доступности.

accessibilityLanguage ¶

Значение, указывающее, какой язык должен использоваться программой чтения с экрана при взаимодействии пользователя с элементом. Оно должно соответствовать спецификации BCP 47.

Дополнительную информацию см. в iOS accessibilityLanguage doc.

accessibilityIgnoresInvertColors ¶

Значение, указывающее, должно или не должно это представление быть инвертированным, если включена инверсия цвета. Значение true указывает, что представление не должно быть инвертировано, даже если инверсия цвета включена.

Дополнительную информацию см. в Руководстве по доступности.

accessibilityLabel¶

Переопределяет текст, который считывается программой чтения с экрана, когда пользователь взаимодействует с элементом. По умолчанию метка строится путем обхода всех дочерних элементов и накопления всех узлов Text, разделенных пробелом.

accessibilityLiveRegion ¶

Указывает службам доступности, следует ли уведомлять пользователя об изменении данного представления. Работает только для Android API >= 19. Возможные значения:

• none — Службы доступности не должны объявлять об изменениях в этом представлении.
• polite — Службы доступности должны объявлять об изменениях в этом представлении.
• assertive — Службы обеспечения доступности должны прерывать текущую речь, чтобы немедленно объявить об изменениях в этом представлении.

Для справки смотрите Android View docs.

accessibilityRole¶

accessibilityRole передает назначение компонента пользователю вспомогательной технологии.

accessibilityRole может быть одним из следующих:

• none — Используется, когда элемент не имеет роли.
• button — Используется, когда элемент должен рассматриваться как кнопка.
• link — Используется, когда элемент должен рассматриваться как ссылка.
• search — Используется, когда элемент текстового поля должен также рассматриваться как поле поиска.
• image — Используется, когда элемент должен рассматриваться как изображение. Может сочетаться, например, с кнопкой или ссылкой.
• keyboardkey — Используется, когда элемент действует как клавиша клавиатуры.
• text — Используется, когда элемент должен рассматриваться как статичный текст, который не может изменяться.
• adjustable — Используется, когда элемент может быть "отрегулирован" (например, ползунок).
• imagebutton — Используется, когда элемент должен рассматриваться как кнопка, а также является изображением.
• header — Используется, когда элемент действует как заголовок для раздела содержимого (например, заголовок навигационной панели).
• summary — Используется, когда элемент может быть использован для предоставления краткой информации о текущих условиях в приложении при первом запуске.
• alert — Используется, когда элемент содержит важный текст, который должен быть представлен пользователю.
• checkbox — Используется, когда элемент представляет флажок, который может быть отмечен, снят или иметь смешанное состояние.
• combobox — Используется, когда элемент представляет собой комбинированное окно, которое позволяет пользователю выбирать из нескольких вариантов.
• menu — Используется, когда компонент представляет собой меню выбора.
• menubar — Используется, когда компонент представляет собой контейнер нескольких меню.
• menuitem — Используется для представления пункта в меню.
• progressbar — Используется для представления компонента, который показывает прогресс выполнения задачи.
• radio — Используется для представления радиокнопки.
• radiogroup — Используется для представления группы радиокнопок.
• scrollbar — Используется для представления полосы прокрутки.
• spinbutton — Используется для представления кнопки, открывающей список вариантов.
• switch — Используется для представления переключателя, который можно включать и выключать.
• tab — Используется для представления вкладки.
• tablist — Используется для представления списка вкладок.
• timer — Используется для представления таймера.
• toolbar — Используется для представления панели инструментов (контейнер кнопок действий или компонентов).
• grid — Используется с ScrollView, VirtualizedList, FlatList или SectionList для представления сетки. Добавляет объявления о входе/выходе из сетки в android GridView.

accessibilityState¶

Описывает текущее состояние компонента для пользователя вспомогательной технологии.

Дополнительную информацию см. в Руководстве по доступности.

accessibilityValue¶

Представляет текущее значение компонента. Это может быть текстовое описание значения компонента, а для компонентов, основанных на диапазоне, таких как ползунки и индикаторы выполнения, оно содержит информацию о диапазоне (минимальное, текущее и максимальное).

Дополнительную информацию см. в Руководстве по доступности.

accessibilityViewIsModal ¶

Значение, указывающее, должен ли VoiceOver игнорировать элементы в представлениях, которые являются родными братьями и сестрами приемника. По умолчанию false.

Дополнительную информацию см. в Руководстве по доступности.

accessible¶

Когда true, указывает, что представление является элементом доступности. По умолчанию все осязаемые элементы являются доступными.

aria-busy¶

Указывает на то, что элемент изменяется и что вспомогательные технологии могут захотеть подождать, пока изменения не будут завершены, прежде чем информировать пользователя об обновлении.

aria-checked¶

Указывает состояние элемента с флажком. Это поле может принимать либо булево значение, либо строку "mixed" для представления смешанных флажков.

aria-disabled¶

Указывает, что элемент воспринимается, но отключен, поэтому его нельзя редактировать или использовать иным образом.

aria-expanded¶

Указывает, является ли расширяемый элемент в данный момент развернутым или свернутым.

aria-hidden¶

Указывает, являются ли элементы доступности, содержащиеся в этом элементе доступности, скрытыми.

Например, в окне, содержащем родственные представления A и B, установка aria-hidden в true для представления B заставляет VoiceOver игнорировать элементы в представлении B.

aria-label¶

Определяет строковое значение, которое маркирует интерактивный элемент.

aria-labelledby ¶

Определяет элемент, который маркирует элемент, к которому он применяется. Значение aria-labelledby должно соответствовать nativeID связанного элемента:

1
2
3
4
5
6
7

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

aria-live ¶

Указывает, что элемент будет обновляться, и описывает типы обновлений, которые агенты пользователя, вспомогательные технологии и пользователь могут ожидать от живого региона.

• off Службы доступности не должны объявлять об изменениях в этом представлении.
• polite Службы обеспечения доступности должны объявлять об изменениях в этом представлении.
• assertive Службы доступа должны прерывать текущую речь, чтобы немедленно объявить об изменениях в этом представлении.

aria-modal ¶

Булево значение, указывающее, должен ли VoiceOver игнорировать элементы в представлениях, которые являются родными братьями и сестрами приемника. Имеет приоритет перед параметром accessibilityViewIsModal.

aria-selected¶

Указывает, выбран ли выбираемый элемент в данный момент или нет.

aria-valuemax¶

Представляет максимальное значение для компонентов, основанных на диапазоне, таких как ползунки и прогресс-бары. Имеет приоритет над значением max в пропсе accessibilityValue.

aria-valuemin¶

Представляет минимальное значение для компонентов, основанных на диапазоне, таких как ползунки и прогресс-бары. Имеет приоритет над значением min в пропсе accessibilityValue.

aria-valuenow¶

Представляет текущее значение для компонентов, основанных на диапазоне, таких как ползунки и прогресс-бары. Имеет приоритет над значением now в пропсе accessibilityValue.

aria-valuetuetext¶

Представляет собой текстовое описание компонента. Имеет приоритет над значением text в пропсе accessibilityValue.

collapsable ¶

Представления, которые используются только для компоновки своих дочерних элементов или иным образом ничего не рисуют, могут быть автоматически удалены из родной иерархии в качестве оптимизации. Установите это свойство в false, чтобы отключить эту оптимизацию и обеспечить существование этого View в иерархии нативных представлений.

focusable ¶

Должен ли этот View быть фокусируемым с помощью несенсорного устройства ввода, например, получать фокус с аппаратной клавиатуры.

hitSlop¶

Определяет, на каком расстоянии от экрана может начинаться событие касания. Типичные рекомендации по интерфейсу рекомендуют использовать сенсорные цели размером не менее 30-40 точек/пикселей, не зависящих от плотности.

Например, если высота touchable view равна 20, то высоту touchable можно увеличить до 40 с помощью hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}.

id¶

Используется для определения местоположения данного представления из нативных классов. Имеет приоритет над пропсом nativeID.

importantForAccessibility ¶

Управляет тем, насколько представление важно для доступности, а именно: вызывает ли оно события доступности и сообщается ли о нем службам доступности, которые запрашивают экран. Работает только для Android.

Возможные значения:

• auto — Система определяет, важно ли представление для доступности — по умолчанию (рекомендуется).
• yes — Представление важно для доступности.
• no — Представление не важно для доступности.
• no-hide-descendants — Представление не является важным для доступности, как и все его потомки.

Для справки смотрите Android importantForAccessibility docs.

nativeID¶

Используется для определения местоположения этого представления из собственных классов.

needsOffscreenAlphaCompositing¶

Нужно ли выводить этот View за пределы экрана и компоновать его с альфа-значением, чтобы сохранить 100% правильные цвета и поведение смешивания. По умолчанию (false) компонент и его дочерние элементы отрисовываются с альфой, применяемой к краске, используемой для отрисовки каждого элемента, вместо того, чтобы выводить весь компонент за пределы экрана и компоновать его обратно с альфой. Это значение по умолчанию может быть заметным и нежелательным в случае, когда View, для которого вы устанавливаете непрозрачность, имеет несколько перекрывающихся элементов (например, несколько перекрывающихся View, или текст и фон).

Рендеринг за пределами экрана для сохранения корректного поведения альфа-канала является чрезвычайно дорогим и трудно отлаживаемым для неродных разработчиков, поэтому он не включен по умолчанию. Если вам необходимо включить это свойство для анимации, подумайте о том, чтобы объединить его с renderToHardwareTextureAndroid, если содержимое представления статично (т.е. его не нужно перерисовывать каждый кадр). Если это свойство включено, представление будет отрисовано за пределами экрана один раз, сохранено в аппаратной текстуре, а затем композитировано на экран с альфой каждый кадр без необходимости переключения целей рендеринга на GPU.

nextFocusDown ¶

Назначает следующее представление, которое будет получать фокус, когда пользователь перемещается вниз. См. документацию по Android.

nextFocusForward ¶

Назначает следующее представление, которое будет получать фокус, когда пользователь перемещается вперед. См. документацию по Android.

nextFocusLeft ¶

Назначает следующее представление, которое будет получать фокус при навигации пользователя влево. См. документацию по Android.

nextFocusRight ¶

Назначает следующее представление для получения фокуса, когда пользователь перемещается вправо. См. документацию по Android.

nextFocusUp ¶

Назначает следующее представление, которое будет получать фокус при навигации пользователя вверх. См. документацию по Android.

onAccessibilityAction¶

Вызывается, когда пользователь выполняет действия по обеспечению доступности. Единственным аргументом этой функции является событие, содержащее имя выполняемого действия.

Дополнительную информацию см. в Руководстве по доступности.

onAccessibilityEscape ¶

Если accessible имеет значение true, система будет вызывать эту функцию, когда пользователь выполнит жест выхода.

onAccessibilityTap¶

Если accessible имеет значение true, система попытается вызвать эту функцию, когда пользователь выполнит жест касания доступности.

onLayout¶

Вызывается при монтировании и при смене раскладки.

Это событие срабатывает сразу после расчета макета, но новый макет может быть еще не отражен на экране в момент получения события, особенно если идет анимация макета.

onMagicTap ¶

Если accessible имеет значение true, система будет вызывать эту функцию, когда пользователь выполнит жест magic tap.

onMoveShouldSetResponder¶

Хочет ли это представление "претендовать" на отзывчивость на прикосновение? Это вызывается для каждого движения прикосновения к View, когда он не является ответчиком.

onMoveShouldSetResponderCapture¶

Если родительский View хочет запретить дочернему View стать ответчиком при перемещении, он должен иметь этот обработчик, который возвращает true.

onResponderGrant¶

Представление теперь реагирует на события прикосновения. Сейчас самое время выделить и показать пользователю, что происходит.

onResponderMove¶

Пользователь перемещает свой палец.

onResponderReject¶

Другой ответчик уже активен и не выпустит его для того View, который просит быть ответчиком.

onResponderRelease¶

Уволен в конце касания.

onResponderTerminate¶

Ответчик был забран из View. Может быть взят другими представлениями после вызова onResponderTerminationRequest, или может быть взят ОС без запроса (например, происходит с центром управления/центром уведомлений на iOS).

onResponderTerminationRequest¶

Какой-то другой View хочет стать отвечающим и просит этот View освободить своего отвечающего. Возврат true позволяет освободить его.

onStartShouldSetResponder¶

Хочет ли это представление стать ответчиком в начале касания?

onStartShouldSetResponderCapture¶

Если родительский View хочет предотвратить превращение дочернего View в ответчика при запуске касания, он должен иметь этот обработчик, который возвращает true.

Управляет тем, может ли View быть целью событий касания.

• auto: Вид может быть целью событий касания.
• none: Вид никогда не является целью событий касания.
• box-none: Представление никогда не является целью событий касания, но его вложенные представления могут быть. Это ведет себя так же, как если бы вид имел следующие классы в CSS:

1
2
3
4
5
6

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

1
2
3
4
5
6

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

removeClippedSubviews¶

Это зарезервированное свойство производительности, открытое RCTView, полезно для прокрутки содержимого при наличии большого количества вложенных представлений, большинство из которых находится за пределами экрана. Чтобы это свойство было эффективным, оно должно быть применено к представлению, которое содержит много вложенных представлений, выходящих за его границы. Подвиды также должны иметь overflow: hidden, как и содержащее их представление (или одно из его супервидов).

renderToHardwareTextureAndroid ¶

Должен ли этот View рендерить себя (и все свои дочерние элементы) в единую аппаратную текстуру на GPU.

На Android это полезно для анимаций и взаимодействий, которые изменяют только непрозрачность, поворот, перевод и/или масштаб: в этих случаях не нужно перерисовывать представление и повторно выполнять списки отображения. Текстуру можно использовать повторно и повторно компоновать с разными параметрами. Недостатком является то, что это может использовать ограниченную видеопамять, поэтому этот параметр следует вернуть в false в конце взаимодействия/анимации.

role¶

роль передает назначение компонента пользователю вспомогательной технологии. Имеет приоритет над пропсом accessibilityRole.

shouldRasterizeIOS ¶

Должен ли этот View быть отображен как растровое изображение перед композитингом.

На iOS это полезно для анимаций и взаимодействий, которые не изменяют размеры этого компонента и его дочерних элементов; например, при трансляции положения статического представления растеризация позволяет рендереру повторно использовать кэшированную битовую карту статического представления и быстро компоновать ее во время каждого кадра.

style¶

tabIndex ¶

Должен ли этот View быть фокусируемым с помощью несенсорного устройства ввода, например, получать фокус с аппаратной клавиатуры.

Поддерживает следующие значения:

• 0 — Вид находится в фокусе
• -1 — Вид не фокусируется

testID¶

Используется для размещения этого представления в сквозных тестах.

Комментарии