React Native typescript Svg 图像未显示在 Release apk 版本中

Question

在我的应用程序中，SVG 图像未显示在发行版 apk 中。 我在 react native 中使用 typescript 如果可行，请给我一个解决方案，然后我接受您的回答，任何人，这里有解决方案吗？ 提前致谢。

我也参考了这个react-native build apk

但这对我不起作用。 请帮忙

Answer 1

由于 OP 与 Android 存在问题，这是 OP 使用的库的已知错误。 这是一个解决方法，它适用于图书馆的两个平台

创建一个新文件，命名为 Svg.js

import React from 'react';
import { Platform } from 'react-native'
import SvgUri from 'react-native-svg-uri';
//import { SvgUri } from 'react-native-svg';
export default ({ width, height, source, fill }) => Platform.select({
    ios: () => <SvgUri width={width} height={height} source={source} fill={fill} />,
    android: () => { const SVG = source; return <SVG width={width} height={height} fill={fill} /> },
})();

创建另一个保存 SVG 的 js 文件，将其命名为 imageManager.js。 导入SVG并像这样导出

import Home from '../assets/home.svg';//Change it with your SVG path
module.exports = {
  Home
}

现在在你想要显示 SVG 的任何 js 中，像这样使用上面的组件

import SvgUri from './Svg';
import { Home } from './imageManager';
<SvgUri width="100%" height="35" source={ Home  } />

您可能还需要安装react-native-svg-transformer 。 然后请使用以下内容更新您的 Metro.config

const { getDefaultConfig } = require("metro-config");

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

这应该可以解决生产 Android 中的问题。 祝你好运