用户单击时如何更改.svg图标或图像颜色.在世博会上反应天真 [英] how to change .svg icon or image color when user click on it. in expo react naive

问题描述

我是新来的本地博览会.我有两个SVG图片.一种是灰色，另一种是橙色.所以我希望当用户单击它时它变成橙色.那么该怎么做.请帮忙.这是我的代码

I am new to react native expo. I have two svg images. one is grey color and other is orange. so I want that when user click on it it turn to orange. so how to do that. please help. here is my code

 <Svg
          // xmlns="http://www.w3.org/2000/svg"
          width={17.897}
          height={21}
          viewBox="0 0 17.897 21"
        >
          <Path
            data-name="Path 1824"
            d="M8.949 4.435a6.094 6.094 0 00-2.625 11.6l.191-3.688s-.359-.118-.438-.156a1.766 1.766 0 01-.591-.436l-.04-.059-.121-.173a6.109 6.109 0 01-.477-1.172 1.477 1.477 0 01-.048-.181 4.185 4.185 0 01-.041-.589A2.547 2.547 0 016.9 6.968a2.547 2.547 0 012.134 2.613 2.739 2.739 0 01-1.314 2.6l-.441.161.213 4.1a5.978 5.978 0 003.4-.137l.189-3.655a1.959 1.959 0 01-1.188-.824c-.33-.494.254-4.864.254-4.864h.38v4.1h.373v-4.1h.412v4.1h.375v-4.1h.428v4.1h.376v-4.1h.291s.583 4.371.253 4.864a1.965 1.965 0 01-1.176.822l-.017.006.164 3.144A6.095 6.095 0 008.949 4.435zM8.442 1.6a8.949 8.949 0 00-1.655 17.617v-.69a8.282 8.282 0 011.655-16.26v1.614l2.783-1.941L8.442 0v1.6zm0 17.46L11.225 21v-1.813A8.948 8.948 0 0012.8 2.458V3.2a8.28 8.28 0 01-1.575 15.3v-1.381l-2.783 1.94z"
            fill="#f90"
            fillRule="evenodd"
          />
        </Svg>,

推荐答案

请参见下面的示例代码:

Please see the example code below:

export default class SVGComponent extends Component {
constructor(props) {
    super(props);

    this.state = {
        // default color
        color: "#000",
    };
}

render() {
    const { color } = this.state;
    return (
        <Svg
            // xmlns="http://www.w3.org/2000/svg"
            width={17.897}
            height={21}
            viewBox="0 0 17.897 21"
            onPress={() => {
                // change SVG color to orange on user click
                this.setState({
                    color: "#f90",
                });
            }}
        >
            <Path
                data-name="Path 1824"
                d="M8.949 4.435a6.094 6.094 0 00-2.625 11.6l.191-3.688s-.359-.118-.438-.156a1.766 1.766 0 01-.591-.436l-.04-.059-.121-.173a6.109 6.109 0 01-.477-1.172 1.477 1.477 0 01-.048-.181 4.185 4.185 0 01-.041-.589A2.547 2.547 0 016.9 6.968a2.547 2.547 0 012.134 2.613 2.739 2.739 0 01-1.314 2.6l-.441.161.213 4.1a5.978 5.978 0 003.4-.137l.189-3.655a1.959 1.959 0 01-1.188-.824c-.33-.494.254-4.864.254-4.864h.38v4.1h.373v-4.1h.412v4.1h.375v-4.1h.428v4.1h.376v-4.1h.291s.583 4.371.253 4.864a1.965 1.965 0 01-1.176.822l-.017.006.164 3.144A6.095 6.095 0 008.949 4.435zM8.442 1.6a8.949 8.949 0 00-1.655 17.617v-.69a8.282 8.282 0 011.655-16.26v1.614l2.783-1.941L8.442 0v1.6zm0 17.46L11.225 21v-1.813A8.948 8.948 0 0012.8 2.458V3.2a8.28 8.28 0 01-1.575 15.3v-1.381l-2.783 1.94z"
                fill={color}
                fillRule="evenodd"
            />
        </Svg>
    );
}

}

这篇关于用户单击时如何更改.svg图标或图像颜色.在世博会上反应天真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！