2

在这两个库的帮助下，我使用了很多 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 路径作为道具传递并在组件内显示？

4

4 回答 4

2

这是一个如何传递从主组件导入的 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 可重复使用。

于 2020-09-29T08:37:10.963 回答
1

将您的 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 等等。

然后你可以导入它们并使用它们。

于 2020-09-29T06:45:55.990 回答
1

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

  1. 将 SVG 转换为字体文件并将它们导入您的项目中。我还没有尝试过，因为每次您必须再添加一个图标时都必须执行此过程。

  2. use react-native-svg-transformer，我自己用过这个，而且很容易实现（虽然没有在 Expo 中尝试过）。文档清楚地说明了如何在项目中实施。

你可以创建2个文件，

  1. 导出所有 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
};
  1. 一个通用组件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} 
/>
于 2020-09-29T08:54:30.557 回答
0

你这样做怎么样？

<img src={require(props.svg)} alt="Logo" height={60} />
于 2020-09-29T05:55:39.670 回答