Обработка нажатий

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

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

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

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

Это отобразит синюю метку в iOS и синюю округлую прямоугольную форму со светлым текстом в Android. Нажатие на кнопку вызовет функцию «onPress», которая в данном случае отображает всплывающее окно с предупреждением. Если хотите, вы можете указать свойство «color», чтобы изменить цвет кнопки.

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

Элементы управления касанием

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

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

• В целом, вы можете использовать TouchableHighlight везде, где вы использовали бы кнопку или ссылку в веб-приложении. Фон представления будет затемняться, когда пользователь нажимает на кнопку.

• Вы можете рассмотреть использование TouchableNativeFeedback в Android для отображения волн реакции поверхности чернил, реагирующих на касание пользователя.

• TouchableOpacity можно использовать для предоставления обратной связи, уменьшая непрозрачность кнопки, позволяя просматривать фон, пока пользователь нажимает.

• Если вам нужно обработать жест касания, но не хотите отображать никакой обратной связи, используйте TouchableWithoutFeedback.

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

Давайте посмотрим, как все это работает на практике:

Прокрутка и свайп

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

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

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