#react-native #react-hooks
Вопрос:
Я знаю, что на этот вопрос отвечали много раз, но я просмотрел все ответы, и ни один из них не похож на мой случай. У меня есть компонент JSX, который в основном является заголовком, и в нем я поместил другой компонент JSX, который является кнопкой обратного нажатия. В этой кнопке обратного нажатия у меня есть SVG, который завернут в нажимаемую кнопку. Теперь я хочу, чтобы цвет SVG менялся при нажатии. Для этого у меня есть следующий код:
function Back({style, onPress}) {
const [pressed, setPressed] = useState(false);
const [color, setColor] = useState('white');
// const Change = useCallback(async (colour) => {
// setColor(colour);
// }, [color]);
useEffect(async () => {
if (pressed) {
await setColor('#c5e2e8');
} else {
await setColor('white');
}
}, [color, pressed]);
return (
<Pressable
style={({pressed}) => {
pressed ? setPressed(true) : setPressed(false);
[style];
}}
onPress={onPress}>
<Svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height={36}
width={36}
viewBox="0 0 512 512"
fill={color}>
<Path d="somerandompath" />
</Svg>
</Pressable>
);
}
Проблема в том, что, когда я нажимаю кнопку «Назад», я получаю предупреждение » Не удается обновить компонент ( Back
) при отображении другого компонента
Как вы можете видеть, я попытался поместить его в эффект использования. Однако это не помогло решить мою проблему.
Ответ №1:
Хорошо, я пытался решить эту проблему в течение многих часов, и через 5 минут после публикации здесь мне удалось ее решить! Вот вам и ответ:
Используйте события onPressIn и OnPressOut нажимаемого компонента. Я удалил все стили. Вот новый код:
function Back({style, onPress}) {
const [color, setColor] = useState('white');
const onPressIn = async () => {
await setColor('#c5e2e8');
}
const onPressOut = async () => {
await setColor('white');
}
return (
<Pressable
onPressIn={onPressIn}
onPressOut={onPressOut}
onPress={onPress}>
<Svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height={36}
width={36}
viewBox="0 0 512 512"
fill={color}>
<Path d="somepathcode" />
</Svg>
</Pressable>
);
}