Как запретить события onPress при скролле по горизонтале ScrollView?

В React Native можно реализовать возможность запрета события onPress при скролле по горизонтале ScrollView, используя некоторые хитрости и API, предоставляемые самим ScrollView.

Первым шагом необходимо импортировать ScrollView из пакета 'react-native' в вашем файле компонента:

import { ScrollView } from 'react-native';

Затем, для создания своего собственного ScrollView компонента, вам потребуется расширить его функционал и добавить специальные обработчики событий для проверки скролла и обработки событий onPress.

import React, { Component } from 'react';
import { ScrollView, TouchableOpacity } from 'react-native';

class CustomScrollView extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      isScrolling: false,
    };
  }
  
  handleScroll = (event) => {
    const { contentOffset } = event.nativeEvent;
    const { x, y } = contentOffset;
    
    // Проверяем, скроллируем ли по горизонтали
    if (x !== 0) {
      this.setState({ isScrolling: true });
    } else {
      this.setState({ isScrolling: false });
    }
  }
  
  handlePress = () => {
    // Проверяем, не скроллируется ли на данный момент
    if (!this.state.isScrolling) {
      // Обработка onPress события
      console.log('Pressed!');
    }
  }
  
  render() {
    return (
      <ScrollView
        {...this.props}
        horizontal
        scrollEventThrottle={16}
        onScroll={this.handleScroll}
      >
        <TouchableOpacity onPress={this.handlePress}>
          {this.props.children}
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

export default CustomScrollView;

Теперь вы можете использовать ваш компонент CustomScrollView вместо обычного ScrollView и он будет блокировать события onPress при скролле по горизонтали. Вам просто нужно импортировать CustomScrollView в ваш файл экрана и использовать его в JSX:

import React from 'react';
import { View, Text } from 'react-native';
import CustomScrollView from './CustomScrollView';

const MyScreen = () => {
  return (
    <View>
      <Text>Some content</Text>
      
      <CustomScrollView>
        <Text>Touchable content</Text>
      </CustomScrollView>
    </View>
  );
}

export default MyScreen;

Теперь, когда пользователь пытается выполнить нажатие на содержимое CustomScrollView во время скроллинга по горизонтали, событие onPress не будет обрабатываться, пока пользователь не остановит скролл и не произведет нажатие в месте без горизонтального скролла.