[英]React Native typescript Svg images not show in Release apk build
In my app, SVG images are not displayed in release apk.在我的应用程序中,SVG 图像未显示在发行版 apk 中。 I use typescript in react native Please give me a solution if it works then I accept your answer, Anyone, here with a solution for this?
我在 react native 中使用 typescript 如果可行,请给我一个解决方案,然后我接受您的回答,任何人,这里有解决方案吗? Thanks in Advance.
提前致谢。
I also refer to this react-native build apk我也参考了这个react-native build apk
but this is not working for me.但这对我不起作用。 Please help
请帮忙
Since OP has an issue with Android and this is a known bug with the library OP using.由于 OP 与 Android 存在问题,这是 OP 使用的库的已知错误。 Here is a workaround which works on both platform with the library
这是一个解决方法,它适用于图书馆的两个平台
create a new file, name it Svg.js创建一个新文件,命名为 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} /> },
})();
Create another js file that holds your SVG, name it imageManager.js.创建另一个保存 SVG 的 js 文件,将其命名为 imageManager.js。 Import SVG and export it like this
导入SVG并像这样导出
import Home from '../assets/home.svg';//Change it with your SVG path
module.exports = {
Home
}
Now in any of your js where you want to display SVG, use above component like this现在在你想要显示 SVG 的任何 js 中,像这样使用上面的组件
import SvgUri from './Svg';
import { Home } from './imageManager';
<SvgUri width="100%" height="35" source={ Home } />
You might also need to install react-native-svg-transformer
.您可能还需要安装
react-native-svg-transformer
。 Then please update your metro.config with following然后请使用以下内容更新您的 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"]
}
};
})();
This should solve the issue in the production Android.这应该可以解决生产 Android 中的问题。 Good Luck
祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.