在 React Native 中导入 svg 的最佳实践

Question

我是 React Native 的新手。 我按照下面的代码执行 svg 导入。 但是当它太多时它看起来并不好。 有没有更简单的方法来做到这一点？

 import React from 'react'; import LeftArrow from '../../assets/svgs/left-arrow.svg' import RightArrow from '../../assets/svgs/right-arrow.svg' import HeaderLogo from '../../assets/svgs/header-logo.svg' import NotificationOn from '../../assets/svgs/notification-on.svg' export default function SignUp() { return ( <> <LeftArrow width="100%" height="100%" /> <RightArrow width="100%" height="100%" /> <HeaderLogo width="100%" height="100%" /> <NotificationOn width="100%" height="100%" /> </> ) }

例如，当我在下面导出和导入图像时，如何使用 svg

 // src/assets/images/index.js export const woman = require('./woman.png'); export const signUp = require('./signup-bg.png'); // src/screen/SignUp.js import { woman, signUp } from '../../assets/images/index.js'

Answer 1

查看react-native-svg ，但您需要 SVG 文件内容，而不是像图像一样将其引入。

快速示例：

import Svg, {Path} from 'react-native-svg`

const LeftArrow = (props) => {
 return (
   <Svg width={48} height={48} viewbox="0 0 48 48" {..props}>
     <Path d="something" fill="#00000" />
   </Svg>
 )
}

export default LeftArrow

但是你可以模板化文件并从每个 SVG 中引入你需要的东西。