reactjs - 如何将 svg 作为 Prop 传递给可按下的组件

Question

我在这两个库的帮助下使用了很多 svg 图像

"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

然后我就可以像下面这样导入和使用 svg 图像了。

import Logo from '../assets/svg/img.svg';
...
...
<Logo height={60} />
...

下面是我的自定义按钮

***imaginary part // import Logo from '../assets/svg/img.svg';

const ButtonPressable = (props) => {
  return (
    <View>
      <Pressable
        style={[
          props.backgroundColor
            ? {backgroundColor: props.backgroundColor}
            : {backgroundColor: '#0077b6'},
        ]}>
        <Text>
          {props.text ? props.text : ''}
        </Text>

***imaginary part // <Logo height={60} />

      </Pressable>
    </View>
  );
};

我正在使用上面的组件，如下所示

<ButtonPressable text="Login" backgroundColor="red" />

如果你看一下上面代码中的虚部。通过这种方式，我可以在组件内显示 svg 图像。但是，我需要像下面这样将 svg 图像显示为 Prop 。

<ButtonPressable text="Login" backgroundColor="red" svg="../assets/svg/img.svg" />

如何将 svg 路径作为 prop 传递并在组件内显示？

Answer 1

下面是一个例子，说明如何传递从主组件导入的 SVG。这个想法是 ButtonPressable 将有一个 prop，svg，它可以是任何东西，但也可以是 SVG。请如下修改ButtonPressable

const ButtonPressable = (props) => {
  return (
    <View>
      <Pressable
        style={[
          props.backgroundColor
            ? {backgroundColor: props.backgroundColor}
            : {backgroundColor: '#0077b6'},
        ]}>
        <Text>
          {props.text ? props.text : ''}
        </Text>

{props.svg? <props.svg height={60} /> : null}

      </Pressable>
    </View>
  );
};

然后像这样将它们导入任何地方并通过 SVG

import Logo from '../assets/svg/img.svg';
<ButtonPressable text="Login" backgroundColor="red" svg={Logo} />

这将使 ButtonPressable 保持可重复使用。