SVG 文件不会在 React Native 上同时渲染

Posted 2023-03-28

【中文标题】SVG 文件不会在 React Native 上同时渲染

【英文标题】：SVG File Not Render Simulatenously on React Native

【发布时间】：2021-12-19 05:03:38

【问题描述】：

我已尝试使用 react-native-svg 为我的项目中的 SplashScreen 页面加载我的 svg 图像。但 Logo Image 在文字之后出现的速度较慢。文字本身和标志是同一个svg文件

The Text

Then the Image

这是我的代码

import React, Component from 'react';
import StyleSheet, View from 'react-native';
import Logo from '../../assets';

export default class Splash extends Component 
  componentDidMount() 
    setTimeout(() => 
      this.props.navigation.replace('MainApp');
    , 3000);
  

  render() 
    return (
      <View style=styles.pages>
        <Logo />
      </View>
    );
  


const styles = StyleSheet.create(
  pages: 
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  ,
);

这是我的Svg File

【参考方案1】：

提供的 SVG 标记不完整。添加所需的结束标签

</defs> and </svg>

最后允许我查看它，但这样做很明显它实际上并不包含图像，只是对一个图像的引用。它确实使用文档顶部的 rect 元素为图像腾出空间，但它只是一个占位符。

<rect   fill="url(#pattern0)"/>

您的徽标中唯一作为向量实际编码到 svg 中的部分是文本（作为路径元素）。 svg 使用“use”标签来引用 ID 为“image0”的图像，但在您共享的标记中的任何位置都没有具有该 ID 的节点，因此很难进一步排除故障。

<use xlink:href="#image0" transform="scale(0.000333333)"/>

您确定粘贴了 svg 的全部内容吗？它似乎正在获取远程内容，如果是这种情况，您可能只是受制于托管图像的任何服务器

【讨论】：

我正在使用 figma 将我的图标导出为 SVG。我刚刚将我的 svg 文件更新为 svg 的全部内容。