使用 React Native 更改 SVG 组件答案

【问题标题】：Change SVG component on press with React Native使用 React Native 更改 SVG 组件
【发布时间】：2020-11-03 18:13:00
【问题描述】：

背景

非常简单的问题：我想在 RN 中创建一个“喜欢”按钮。为此，我必须分离 SVG 文件的组件。一个只是心的轮廓，另一个是填充的。我试图在其中构建此按钮的屏幕是一个功能组件，因此我应该使用钩子。我知道状态，但不知道如何正确使用它。

我需要什么

一个 Touchable Opacity 组件，它包含一个 onPress 方法，该方法在按下时更改图像组件。

提前非常感谢！

【问题讨论】：

标签： react-native hook use-state

【解决方案1】：

import React ,{useState} from 'react';
import {TouchableOpacity } from "react-native";

export default function Like() {
    const [isLiked,setIsLiked]=useState(false) ;

    const handleLikePress=()=>{
        setIsLiked(!isLiked) 
    }

    return (
        <TouchableOpacity onPress={handleLikePress}>
            {isLiked? <FilledHeartSVG/>: <OutlineHeartSVG/> } 
        </TouchableOpacity>
    )
}

 by default, we are showing an outline of a heart SVG
 when press event trigger we are changing isLiked state value
 if isLiked is true then show  filled heart SVG 
 if isLiked is false then show  outline of a heart SVG 
 FilledHeartSVG and OutlineHeartSVG is just example use your SVG there

【讨论】：

【解决方案2】：

您可以执行以下操作，这里我为文本进行了切换，但您可以将其更改为您的图像组件，如果您想在 LikeButton 之外使用回调属性，也可以使用回调属性

const LikeButton = ({callback}) => {
  const [liked, setLiked] = React.useState(false);

  return (
    <TouchableOpacity onPress={()=>{
      setLiked(!liked);
      if(callback)
      {
        callback();
      }
    }}>
      <Text>{liked?"Liked":"Like"}</Text>
    </TouchableOpacity>
  );
};

你可以试试这个使用图标的小吃 https://snack.expo.io/@guruparan/likebutton

【讨论】：