React Native场景下同一份SVG文件的文字与图标无法同步渲染

问题原因 #

你遇到的渲染不同步问题，本质是同一份SVG内不同类型节点的解析渲染耗时不同：SVG中的<text>文本节点只需要调用系统字体渲染，耗时极低；而图标对应的复杂矢量<path>节点需要逐路径计算绘制，耗时更高，二者渲染进度不一致就出现了先后显示的问题。

可行解决方案 #

方案1：SVG文字转路径（最推荐，无额外代码开销） #

将SVG文件内的所有文本节点转换为矢量路径，操作步骤：

• 用Figma/Adobe Illustrator打开原SVG文件
• 选中所有文字元素，执行「轮廓化文字/创建轮廓」操作
• 重新导出SVG文件替换现有资源

转换后所有元素均为矢量路径，渲染耗时基本一致，可完全解决不同步问题，不需要修改业务代码。

方案2：控制Logo整体显隐，渲染完成后再展示 #

给Logo组件添加加载完成回调，渲染完成前隐藏整个Logo，避免半截显示的问题：

1. 首先修改你的SVG导出的Logo组件，给最外层<Svg>标签添加onLoad回调支持
2. 修改启动页代码如下：

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

export default class Splash extends Component {
  state = {
    isLogoLoaded: false
  }

  componentDidMount() {
    setTimeout(() => {
      this.props.navigation.replace('MainApp');
    }, 3000);
  }

  render() {
    return (
      <View style={styles.pages}>
        <View style={{ opacity: this.state.isLogoLoaded ? 1 : 0 }}>
          <Logo onLoad={() => this.setState({ isLogoLoaded: true })} />
        </View>
      </View>
    );
  }
}

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

方案3：替换为位图资源（启动页场景适配性最高） #

启动页对资源加载稳定性要求高，可直接将SVG导出为对应分辨率的PNG/WebP格式使用，位图的渲染调度比SVG更稳定，不会出现元素渲染不同步的问题，也降低了SVG解析的性能开销。

内容的提问来源于stack exchange，提问作者Ahmad Fatihin