Android 如何使用本机svg库加载本地svg文件

我正在尝试使用react-native SVG库在react-native中加载一个本地SVG文件，我已经安装了它，但我不知道如何使用本地SVG文件。该文件位于“/assets/bg.svg”中，我正在使用expo。如果您知道，请编写准确的代码。

您可以使用（检查react-native组合）将svg文件转换为JSX

导入Svg{
G
路径
使用，
藐视，
线性梯度，
停止
面具，
}来自“react native svg”；
/*如果您正在使用Expo，请使用此选项
从“react native Svg”导入*作为Svg；
const{Circle，Rect}=Svg；
*/
从“React”导入React；
从“react native”导入{View，StyleSheet}；
导出默认类SvgExample扩展React.Component{
render（）{
返回(
);
}
}

在其他文件中

import Website from '../../components/svg/Website';
...
render() {
  return (
    <View>
      <Website
              width={windowWidth / 8}
              height={windowWidth / 8}
              color={this.props.brand.headerColor}
            />
    </View>
  )
}

从“../../components/svg/Website”导入网站；
...
render（）{
返回(
)
}

要使用本地图像加载

react native svg

，您还应该在其顶部安装

react native svg transformer

，您可以在项目中使用：

npm安装本地svg转换器

之后，您应该按照（对于React Native v0.57或更新版本/Expo SDK v31.0.0或更新版本）：

1。将项目的

metro.config.js

文件中的内容与此配置合并（如果该文件尚不存在，则创建该文件）

metro.config.js:

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

import React from 'react';
import {View} from 'react-native';
import Bg from "./assets/bg.svg";

export default function App() {
    return (
        <View>
            <Bg width={"100%"} height={"100%"} />
        </View>
    );
}

2.如果您正在使用Expo，还需要将其添加到

app.json

：

app.json:

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

import React from 'react';
import {View} from 'react-native';
import Bg from "./assets/bg.svg";

export default function App() {
    return (
        <View>
            <Bg width={"100%"} height={"100%"} />
        </View>
    );
}

3.最后，一个最小的应用程序如下所示：

App.js:

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

import React from 'react';
import {View} from 'react-native';
import Bg from "./assets/bg.svg";

export default function App() {
    return (
        <View>
            <Bg width={"100%"} height={"100%"} />
        </View>
    );
}

从“React”导入React；
从“react native”导入{View}；
从“/assets/Bg.svg”导入Bg；
导出默认函数App（）{
返回(
);
}

这不是我问题的答案bro@HabibMhamadi，我更新了答案。您可以轻松地将svg文件转换为jsx，并且可以使用react native svg来显示它。@DevLover您好，您可以看看这个问题吗？