英文:
Problem displaying SVG images in React Native
问题
我在我的React Native应用中显示SVG图像时遇到了问题。当我尝试在React Native应用中显示它时，它会变形，不如预期那样看起来。
以下是图像应该显示的方式：
而在我的React Native应用中看起来是这样的：
我已经包含了我正在使用的SVG图像文件：[文件附件]
为了显示图像，我尝试了以下两种方法：
import AltoDark from '@/assets/image/profil/alto_dark.svg';
...
<View>
//第一种方法
<AltoDark/>
// 第二种方法
<SvgXml xml={AltoDark} />
</View>
我的package.json如下：
"react-native-svg": "10.1.0",
"react-native-svg-transformer": "^1.0.0",
我的Metro配置如下：
const { getDefaultConfig } = require('metro-config');
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'],
},
};
})();
SVG文件可以在此处找到：https://pastebin.com/kPW2Qr32。有人能建议是什么原因导致了这个问题，以及我如何修复它，使图像在我的React Native应用中正确显示？
英文:
I'm having trouble displaying an SVG image in my React Native app. When I try to display it in my React Native app, it gets distorted and doesn't look as expected.
Here is how the image should appears:
And here is how it looks in my React Native app:
I've included the SVG image file that I'm using here:
To display the image I tried the following both method:
import AltoDark from '@/assets/image/profil/alto_dark.svg';
...
<View>
//first method
<AltoDark/>
// second method
<SvgXml xml={AltoDark} />
</View>
my package.json is the following one
"react-native-svg": "10.1.0",
"react-native-svg-transformer": "^1.0.0",
and my metro config is
const {getDefaultConfig} = require('metro-config');
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'],
},
};
})();
The svg file can be found here: https://pastebin.com/kPW2Qr32. Anyone suggest what might be causing this issue and how I can fix it so that the image looks correct in my React Native app?
答案1
得分: 0
在我的SVG文件中，我更改了"objectBoundingBox"尺寸。从1x1变为2x2。然后，我调整了"transform="matrix()""中倒数第二个参数以调整图像的水平位置。从0.160427变为0.760427。
英文:
In my svg file i change the objectBoundingBox dimension. I went from 1x1 to 2x2. Then I played with the before last argument of the transform="matrix()" to adjust the horizontal position of the image. I went from 0.160427to 0.760427
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_595_4081" transform="matrix(0.00191705 0 0 0.000715206 0.160427 0.0851681)"/>
</pattern>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="2" height="2">
<use xlink:href="#image0_595_4081" transform="matrix(0.00191705 0 0 0.000715206 0.760427 0.0851681)"/>
</pattern>
答案2
得分: 0
- 从这里将SVG转换为JSX元素。
- 创建一个.tsx文件并粘贴JSX元素。
- 给它一个合适的名称，并将JSX元素导出为一个函数组件。
- 在你的组件中像这样使用它。
import AltoDark from '../../components';
...
<AltoDark/>
英文:
I follow the below steps while using an SVG image in React Native app.
- Convert SVG to JSX element from here.
- Create a .tsx file and paste the JSX element.
- Give a desirable name & export the JSX element as a functional component.
- Use it like this in your component.
import AltoDark from '../../components';
...
...
<AltoDark/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论