如何根据用户选择动态更改 JavaScript 模式的衣服颜色？

Question

我正在用 React naitve 构建一个时尚造型师应用程序，我想添加一个功能，当用户单击特定颜色时，JavaScript 模式的衣服颜色会动态变化。这将允许用户实时可视化不同颜色的外观。

我不知道从哪里开始实施这个。有人可以指导我如何使用 JavaScript 和本机反应来实现此功能吗？

Answer 1

您可以为布料创建一个 SVG，并将颜色值传递给 SVG。作为一个例子，请考虑以下。

import React from 'react';
import { Svg, Path } from 'react-native-svg';
import { View, StyleSheet } from 'react-native';

const ShirtSVG = ({ color = 'green' }) => (
    <View style={styles.container}>
        <Svg width="200" height="200" viewBox="0 0 200 200">
        {/* Shirt body */}
            <Path d="M60 20 L80 20 L100 50 L120 20 L140 20 L160 50 L150 140 L50 140 L40 50 Z"
            fill={color}
            stroke="#000"
            strokeWidth="2"
       />
       {/* Collar */}
       <Path
           d="M80 20 L100 50 L120 20"
           fill="#fff"
           stroke="#000"
           strokeWidth="2"
       />
       {/* Left sleeve */}
       <Path
           d="M60 20 L40 50 L50 60 L65 45"
           fill={color}
           stroke="#000"
           strokeWidth="2"
       />
       {/* Right sleeve */}
       <Path
           d="M140 20 L160 50 L150 60 L135 45"
           fill={color}
           stroke="#000"
           strokeWidth="2"
       />
    </Svg>
  </View>
);

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
   },
});

export default ShirtSVG;