使用 React Native 在印刷机上更改 SVG 组件

Question

背景

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

我需要什么

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

提前致谢！

Answer 1

你可以像下面那样做，这里我已经为文本做了一个切换，但你可以将它更改为你的图像组件，如果你想在 LikeButton 之外使用它，也可以使用回调 prop

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

Answer 2

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

使用 React Native 在印刷机上更改 SVG 组件

Change SVG component on press with React Native

hook

react-native

use-state