Обработка касаний¶

Пользователи взаимодействуют с мобильными приложениями в основном с помощью прикосновений. Они могут использовать комбинацию жестов, таких как нажатие на кнопку, прокрутка списка или масштабирование карты. React Native предоставляет компоненты для обработки всех видов распространенных жестов, а также комплексную систему gesture responder system для более продвинутого распознавания жестов, но единственный компонент, который вас, скорее всего, заинтересует, — это базовая кнопка Button.

Отображение базовой кнопки¶

Button предоставляет базовый компонент кнопки, который хорошо отображается на всех платформах. Минимальный пример отображения кнопки выглядит следующим образом:

1
2
3
4
5
6

<Button
    onPress={() => {
        console.log('You tapped the button!');
    }}
    title="Press Me"
/>

В результате на iOS будет отображаться синий ярлык, а на Android — синий закругленный прямоугольник со светлым текстом. При нажатии на кнопку будет вызвана функция "onPress", которая в данном случае отобразит всплывающее окно с предупреждением. При желании вы можете указать свойство "color", чтобы изменить цвет кнопки.

Приступайте к работе с компонентом Button на примере, приведенном ниже. Вы можете выбрать, на какой платформе будет осуществляться предварительный просмотр вашего приложения, нажав на переключатель в правом нижнем углу, а затем нажав на "Tap to Play" для предварительного просмотра приложения.

Прикосновения¶

Если базовая кнопка не подходит для вашего приложения, вы можете создать свою собственную кнопку, используя любой из компонентов "Touchable", предоставляемых React Native. Компоненты "Touchable" обеспечивают возможность захвата жестов касания и могут отображать обратную связь при распознавании жеста. Однако эти компоненты не имеют стандартной стилизации, поэтому вам придется немного поработать, чтобы придать им красивый вид в вашем приложении.

Какой компонент "Touchable" вы используете, зависит от того, какой вид обратной связи вы хотите обеспечить:

• В общем, вы можете использовать TouchableHighlight везде, где вы бы использовали кнопку или ссылку в Интернете. Фон представления будет затемнен, когда пользователь нажмет на кнопку.
• Вы можете рассмотреть возможность использования TouchableNativeFeedback на Android для отображения пульсаций реакции поверхности чернил, реагирующих на прикосновение пользователя.
• TouchableOpacity можно использовать для обеспечения обратной связи путем уменьшения непрозрачности кнопки, что позволяет видеть фон во время нажатия пользователем.
• Если вам нужно обработать жест касания, но вы не хотите, чтобы отображалась обратная связь, используйте TouchableWithoutFeedback.

В некоторых случаях вы можете захотеть обнаружить, когда пользователь нажимает на элемент представления и удерживает его в течение определенного времени. Такие длительные нажатия можно обработать, передав функцию в пропс onLongPress любого из компонентов "Touchable".

Давайте посмотрим на все это в действии:

Прокрутка и пролистывание¶

Жесты, обычно используемые на устройствах с сенсорными экранами, включают жесты пролистывания и пролистывания. Они позволяют пользователю прокручивать список элементов или листать страницы с содержимым. Ознакомьтесь с основным компонентом ScrollView.

Известные проблемы¶

• react-native#29308: Область касания никогда не выходит за границы родительского представления, и на Android отрицательные поля не поддерживаются.

Комментарии