[英]React Native SVG Import Return Number
您好,前 2 天我在为这个 SVG 问题而苦苦挣扎。 第一个问题是我无法导入 svg 文件它说找不到模块然后我修复它关于声明问题。 然后我通过在 func 中编写 svg 数据来找到解决方案,如下所示:
const notifactionIcon = (
width = 60,
height = 60
) => `<svg width="${width}" height="${height}" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="60" height="60" fill="url(#pattern0)" />
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_18_78" transform="scale(0.01)" />
</pattern>
<image id="image0_18_78" width="100" height="100"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEq0lEQVR4nO2d34uVRRyHP6O2GVu7buUGBWVqEIEQbaRhUYRRFyFSRFJXddGF1F9QQQVB1E0I3QRFERTdCAVWJkVdGBgJm7RkJJsFmqSl/XC7kN2ni3NOyLbuzHvOvDPzvvt9Lndm3vnMPPu+8573nDNHMgzDMAzDMAzDSIvLHWAQgHWS7pd0Q/dPU5J2Oeem86VaggBDwE7gLP/nLPAKcEHunEsCYBnw/gIi5rMLWJY7b+sBdgTI6PF47rytB5iuIORw7rytBlhbQUaPNblzV6Fp19gr+2hzVfQUNdI0ISv6aNOou62mCWk9jRECXCdpax9Nt3bbGoMCjAJPAgf7WMznMwk8AYzkHlfjAEaA54BTEUTM53fgWeCS3ONsBMB24FgNIuZzFHgo93iLBRgD3ksgYj7vAqO5x18UwHrgUAYZPX4Ars89D0UAbKRzXc/Nb8DNuecj6/shwC2SPpFUyiXjtKQtzrkDuQJkE0LnGdN+SeMVm56UtFvS55K+lXRE0h/dslFJayRtkHSnpPskXVrx+MclbXLO/VSxXXMBVgLfVLykfAU8AAxV6GcIeBD4umJfk8DKOuegKIBXK0zOMWB7hD4fBn6p0O/OGGMtHuB2YC5wUvYAqyP2PQ7sDex7Dtgcq+8iAZYT/hjkDaCfp7u+DCuANwMzTNLmt4GBRwIn4p06JwJwwFuBWdr5ar47CVMBE7CfCgv3AHkuJGyxP1h3liwAdwQM/gxwbcJM64GZgFy3pcqU8vr4aECdF5xzP9aepItz7rCkFwOqPlZ3lqTQWcxPeP4LTwIXZ8g2HJhteYo8qc6QjZIu99R5zTn3d4ow5+KcOyPpdU+1yyQlec6VSsitAXXerj3FYH2HjGFgUgm5yVN+xDn3XZIkC+Ccm5L0s6faRIosqYSs85TvS5JicXwZfGOIQiohV3vKs50d5+DL4BtDFFIJ8X3S43iSFIvjy5Dk0yqphFzkKU9+d7UAf3nKh1OESCXE189ckhSLM+spTzJX7X2S2VBMSGGYkMIwIYVhQgrDhBSGCSkME1IYJqQwTEhhmJDCMCGFYUIKw4QUhgkpDBNSGCakMExIYZiQwjAhhWFCCsOEFIYJKYzahdCi/alSjKVWId0B7Kmzj8R8BozV2UGd33TtydhUVx8ZmJC0t04ptQhpqYwetUqp44v5I5I+VriM05JmgCRfiFmEmW6WVQF1JyTtBu51zv0ZM0TU3YBafmYsxAFJdzvnTsU6YDQhS1BGj6hSoghZwjJ6RJMysBCT8R9RpMS4y7pHJkPqLPRbBj2IPTopDBNSGCakMGIs6mOS1kbI4mObpKf7bPu8pA8iZjkf0zFfkxQNsC9gX6vz8UXu/KE04oclgSs0+OYC4865EzHy1ElT1pAYl8QUl9WBaYoQ315bIVTdQTsLTRHya4RjlLCfipemrCHD6uz53u/23/9IWt3dPa5oGnGGdCfyowEO8WETZDQKYAMw28ct7yxwY+78rQR4pg8hT+XO3Vro7I79cgUZLwGNWCcbDbAN+H4REYeAfn6EMjuN/e+hs7HxZkl3SbpGEursLPqppC+dc74NyQzDMAzDMAzDMAxJ/wI8lEn/91b75AAAAABJRU5ErkJggg==" />
</defs>
</svg>`
export { notifactionIcon }
但我想手动导入。
我在互联网上搜索。 我找不到这个问题的任何解决方案
有谁知道为什么会这样?
其他事情
通天塔
module.exports = function (api) {
api.cache(true)
return {
presets: ["babel-preset-expo"],
}
}
tsconfig
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
}
}
webpack
import createExpoWebpackConfigAsync from "@expo/webpack-config/webpack"
import { Arguments, Environment } from "@expo/webpack-config/webpack/types"
module.exports = async function (env: Environment, argv: Arguments) {
const config = await createExpoWebpackConfigAsync(env, argv)
return config
}
package
{
"name": "cookingapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"lint": "eslint '**/* .{js,ts,tsx,jsx}'"
},
"dependencies": {
"@expo/webpack-config": "^0.17.2",
"babel-plugin-inline-import": "^3.0.0",
"expo": "^46.0.10",
"expo-cli": "^6.0.5",
"expo-status-bar": "~1.4.0",
"firebase": "9.6.11",
"fs": "^0.0.1-security",
"idb": "^7.0.2",
"node-fs": "^0.1.7",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "^0.70.1",
"react-native-fs": "^2.20.0",
"react-native-paper": "^4.12.4",
"react-native-svg": "^9.13.2",
"react-native-svg-uri": "^1.2.3",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@react-native-community/eslint-config": "^3.1.0",
"@types/react": "~18.0.0",
"@types/react-dom": "17.0.14",
"@types/react-native": "~0.69.1",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"eslint": "^8.23.1",
"eslint-config-airbnb": "19.0.4",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "4.3.0",
"eslint-plugin-react-native": "^4.0.0",
"file-loader": "^6.2.0",
"prettier": "^2.7.1",
"ts-node": "^10.9.1",
"typescript": "^4.8.3"
},
"private": true
}
感谢您从现在开始的回答...
看起来您正在使用SvgXml
组件来呈现 SVG 文件。 查看他们的使用文档,您需要更新您的 babel 配置文件。
module:metro-react-native-babel-preset
预设和babel-plugin-inline-import
插件更新 babel 文件。module.exports = function (api) {
api.cache(true)
return {
presets: [
"babel-preset-expo",
"module:metro-react-native-babel-preset"
],
plugins: [
[
"babel-plugin-inline-import",
{
"extensions": [".svg"]
}
]
}
}
import * as React from 'react';
import { SvgXml } from 'react-native-svg';
import testSvg from './test.svg';
export default () => <SvgXml width="200" height="200" xml={testSvg} />;
您可以使用XML 字符串而不是导入它来渲染您的 SVG:
1-导入: import { SvgXml } from 'react-native-svg';
2- go inside your SVG file , you'll notice a bunch of XML code with an <svg>
tag copy everything inside that <svg>
element from the SVG file's XML code and store it inside a variable. 像这样
const icon = <svg ....>...</svg>
3-然后,将 icon 变量传递给 < SvgXml <SvgXml>
组件内的 xml 属性,如下所示:
<SvgXml xml={icon} width="100%" height="100%" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.