Как убрать эффект выделения при нажатии на значки React Native

Чтобы убрать выделение при нажатии значка в React Native, вы можете попробовать следующие методы:

  1. Метод 1: использование TouchableOpacity
    • Оберните компонент значка компонентом TouchableOpacity.
    • Установите для свойства activeOpacityTouchableOpacity значение 1, что удалит эффект непрозрачности при нажатии значка.

Пример:

import React from 'react';
import { TouchableOpacity, Icon } from 'react-native';
const MyComponent = () => {
  return (
    <TouchableOpacity activeOpacity={1} onPress={() => handlePress()}>
      <Icon name="my-icon" />
    </TouchableOpacity>
  );
};
  1. Метод 2: использование TouchableWithoutFeedback
    • Оберните компонент значка компонентом TouchableWithoutFeedback.
    • Обработайте событие onPress вручную и обновите состояние, чтобы удалить эффект выделения.

Пример:

import React, { useState } from 'react';
import { TouchableWithoutFeedback, Icon } from 'react-native';
const MyComponent = () => {
  const [isPressed, setIsPressed] = useState(false);
  const handlePress = () => {
    // Handle press logic here
  };
  return (
    <TouchableWithoutFeedback
      onPress={() => handlePress()}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
    >
      <Icon name="my-icon" style={{ opacity: isPressed ? 0.5 : 1 }} />
    </TouchableWithoutFeedback>
  );
};
  1. Метод 3. Использование библиотеки React-native-touchable-scale.
    • Установите библиотеку, запустив npm install act-native-touchable-scale.
    • Используйте компонент TouchableScaleиз библиотеки, который обеспечивает анимацию нажатия без эффекта выделения.

Пример:

import React from 'react';
import { TouchableScale, Icon } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
const MyComponent = () => {
  return (
    <TouchableScale onPress={() => handlePress()}>
      <Icon name="my-icon" />
    </TouchableScale>
  );
};