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