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图像显示为如下所示的道具。

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

如何通过svg路径作为道具并在组件内部显示？

Answer 1

那你怎么样？

<img src={require(props.svg)} alt="Logo" height={60} />

Answer 2

将SVG转换为JSX。然后可以将其用作图标组件。

您可以使用此SVG 2 JSX或SVGR Playground

例如，下面是向左箭头svg。

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16.327" viewBox="0 0 20 16.327"><path d="M-9.974-7.735a.988.988,0,0,0,.334.722L-2.489.127a.982.982,0,0,0,.7.3A.918.918,0,0,0-.841-.5a.943.943,0,0,0-.269-.679L-3.523-3.631l-3.63-3.306,2.606.162H9.078a.913.913,0,0,0,.948-.959.913.913,0,0,0-.948-.959H-4.546l-2.6.162,3.619-3.306,2.412-2.456a.961.961,0,0,0,.269-.679.918.918,0,0,0-.948-.926.964.964,0,0,0-.722.323L-9.64-8.456A.988.988,0,0,0-9.974-7.735Z" transform="translate(9.974 15.898)"/></svg>

然后您可以使用上面的链接并将其隐藏到JSX。

import * as React from 'react';
import Svg, { Path } from 'react-native-svg';

export interface IconLeftArrowProps {
  width?: number;
  height?: number;
  color?: string;
}

/**
 * IconLeftArrow
 * Base svg file
 * assets/images/svgsSrc/icon_arrow_left.svg
 * @param
 * width   {Number} [ svg width size,  default size 20 ]
 * height  {Number} [ svg height size, default size 16.327 ]
 * color   {String} [ svg fill color,  default color BLACK(#000000) ]
 */
const IconLeftArrow: React.FC<IconLeftArrowProps> = ({
  width = 20 ,
  height = 16.327 ,
  color = #000000,
}) => (
  <Svg width={width} height={height} viewBox="0 0 20 16.327">
    <Path
      fill={color}
      d="M-9.974-7.735a.988.988,0,0,0,.334.722L-2.489.127a.982.982,0,0,0,.7.3A.918.918,0,0,0-.841-.5a.943.943,0,0,0-.269-.679L-3.523-3.631l-3.63-3.306,2.606.162H9.078a.913.913,0,0,0,.948-.959.913.913,0,0,0-.948-.959H-4.546l-2.6.162,3.619-3.306,2.412-2.456a.961.961,0,0,0,.269-.679.918.918,0,0,0-.948-.926.964.964,0,0,0-.722.323L-9.64-8.456A.988.988,0,0,0-9.974-7.735Z"
      transform="translate(9.974 15.898)"
    />
  </Svg>
);

export default IconLeftArrow;

我不能肯定转换器是否工作正常，因为我也遇到了问题。但是如果不起作用，请尝试将svg更改为Svg，将路径更改为Path等。

然后，您可以将其导入并使用。

Answer 3

这里是如何传递从主要组件导入的SVG的示例。这个想法是ButtonPressable将有一个道具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可以重复使用。

Answer 4

在项目中可以使用多种方式使用SVG，

将SVG转换为字体文件并将其导入项目中。我没有尝试过，因为每次必须添加一个图标时，您都必须执行此过程。
使用react-native-svg-transformer，我自己使用了它，并且易于实现（尽管未在Expo中尝试过）。有关如何在项目中实施的文档很清楚。

您可以创建2个文件，

导出所有svg

import LeftArrowIcon from "@src/assets/svg/leftArrow.svg";

export const IconFiles = {
  LeftArrowIcon
};

export const IconNames = {
   LEFT_ARROW_ICON: "LeftArrowIcon", // value should as same as icon fileimport
};

Icons的单个通用组件（基于svgs）

// icon.tsx
import { IconFiles } from "@src/themes/icons";

// props: {iconName: string} example: LEFT_ARROW_ICON
export default (props) => {
  const I = IconFiles[`${props.iconName}`];
  return (
    <I width={defaultWidth || fromProps} height={defaultHeight || fromProps} />
  );
};

最后进入您的ButtonComponent，

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

在您的父组件中，您可以像这样使用它

<ButtonPressable 
  text="Login" 
  backgroundColor="red" 
  iconName={IconNames.LEFT_ARROW_ICON} 
/>

如何将svg作为道具传递给可压组件

4 个答案: