Question

我正在使用react-native-svg，并且我完全意识到他们使用本地svg文件的方式，如图here所示。我想知道的是，是否有一种方法可以将require用于svg文件路径。例如

<Svg width={50} height={50} fill={"#CCC"} source={require("./path/to/file.svg")} />

这样，我将能够将require存储在变量中并像这样使用它：

const myImage = require("./path/to/file.svg")

<Svg width={50} height={50} fill={"#CCC"} source={myImage} />

有任何想法吗？

编辑更多信息

我正在开发一个白色标签应用程序，因此我有一个config.js文件，其中包含一些颜色值，API端点和源图像。例如

//config.js
const coBrandConfig = {
  firstapp: {
    Target: {
      BRAND_TARGET: "firstApp"
    },

    Login: {
      LOGIN_BACKGROUND_IMAGE: require("./path/to/file.png"),
      LOGIN_LOGO_IMAGE: require("./path/to/file.png"),

      LOGIN_TITLE_TEXT: "FIRST APP",

      LOGIN_STATUSBAR_CONTENT: "light-content",
      LOGIN_BACKGROUND_COLOR: "#333" ,
      LOGIN_SIMPLE_TEXT_COLOR: "#FFF",
      LOGIN_TEXTINPUT_BACKGROUD_COLOR: "#FFF",
      LOGIN_LOGIN_BUTTON_COLOR: "#009933",
    },
  },
}

module.exports = coBrandConfig["firstapp"]

然后我有一个styles.js，它获取并应用所有这些值，这些值可以根据App变体而改变。例如

import React from 'react'
import { StatusBar, Image } from "react-native"
import styled from 'styled-components/native'
import CoBrandConfig from "./config/config.js"

export function MainStyle () {
  return(
    <>
      <StatusBar barStyle={`${CoBrandConfig.Login.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={CoBrandConfig.Login.LOGIN_BACKGROUND_COLOR} />
      <Image source={CoBrandConfig.Login.LOGIN_LOGO_IMAGE} />
      <Svg width={50} height={50} fill={"#CCC"} source={CoBrandConfig.Login.MY_SVG} /> //HERES WHAT I WANT TO DO
      <TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
    </>
  )
}

这就是为什么我想将require("./path/to/file.svg")传递给变量。

Answer 1

尝试这个

import SvgUri from 'react-native-svg-uri';
import svgExample from './file.svg';

返回：

  <SvgUri
    width="250"
    height="250"
    svgXmlData={svgExample}
  />

在React Native中使用SVG文件的require

1 个答案: