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 中的問題。 祝你好運