Представление

Основной компонент для создания пользовательского интерфейса, View является контейнером, поддерживающим макетирование с помощью flexbox, стилей, обработки касаний и управления доступностью. View напрямую отображается в эквиваленте нативного представления на любой платформе, на которой работает React Native, будь то UIView, <div>, android.view, и т. д.

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

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

• Функциональный компонент
• Компонент класса

View разработаны для использования с StyleSheet для ясности и производительности, хотя поддерживаются и встроенные стили.

Synthetic Touch Events

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

Справочник

Свойства

Accessibility Actions

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

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

AccessibilityElementsHidden (iOS)

iOS

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

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

AccessibilityHint

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

AccessibilityLanguage (iOS)

iOS

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

Для получения дополнительной информации см. документацию iOS accessibilityLanguage.

AccessibilityIgnoresInvertColors (iOS)

iOS

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

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

AccessibilityLabel

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

AccessibilityLiveRegion (Android)

Android

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

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

См. документацию Android View для справки.

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' - Используется для представления панели инструментов (контейнера кнопок или компонентов действий).

AccessibilityState

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

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

AccessibilityValue

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

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

AccessibilityViewIsModal (iOS)

iOS

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

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

Accessible

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

Collapsable (Android)

Android

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

Focusable (Android)

Android

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

HitSlop

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

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

Область касания никогда не выходит за пределы границ родительского представления, а индекс Z элементов-братьев всегда имеет приоритет, если касание попадает на два перекрывающихся представления.

ImportantForAccessibility (Android)

Android

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

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

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

См. Android importantForAccessibility документы для справки.

nativeID

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

Это отключает оптимизацию «удаление представления только для макета» для этого представления!

needsOffscreenAlphaCompositing

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

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

nextFocusDown

Android

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

nextFocusForward

Android

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

nextFocusLeft

Android

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

nextFocusRight

Android

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

nextFocusUp

Android

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

onAccessibilityAction

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

См. руководство по доступности для получения дополнительной информации.

onAccessibilityEscape

iOS

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

onAccessibilityTap

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

onLayout

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

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

onMagicTap

iOS

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

onMoveShouldSetResponder

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

onMoveShouldSetResponderCapture

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

onResponderGrant

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

onResponderMove

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

onResponderReject

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

onResponderRelease

Срабатывает в конце касания.

onResponderTerminate

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

onResponderTerminationRequest

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

onStartShouldSetResponder

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

onStartShouldSetResponderCapture

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

pointerEvents

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

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

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

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

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

Поскольку pointerEvents не влияет на макет/отображение, и мы уже отклоняемся от спецификации, добавляя дополнительные режимы, мы выбираем не включать pointerEvents в style. На некоторых платформах нам пришлось бы реализовать это как className в любом случае. Использование style или нет — это деталь реализации платформы.

removeClippedSubviews

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

renderToHardwareTextureAndroid

Android

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

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

shouldRasterizeIOS

iOS

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

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

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

style

testID

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

Это отключает оптимизацию удаления только-для-раскладки виджетов для этого виджета!