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

【问题标题】：SVG File Not Render Simulatenously on React NativeSVG 文件不会在 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

【问题讨论】：

标签： reactjs react-native image svg splash-screen

【解决方案1】：

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

</defs> and </svg>

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

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

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

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

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

【讨论】：

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