RN-SVG <Text/>组件无法渲染自定义字体问题咨询

这不是RN-SVG缺少功能，而是RN-SVG的字体引用逻辑和React Native原生Text组件存在差异，你的操作需要做以下调整：

1. 确保字体完全加载后再渲染RN-SVG组件 #

useFonts会返回字体加载状态，RN-SVG无法在字体未加载完成时识别自定义字体，所以需要在字体加载完成后再渲染SVG内容：

import { useFonts } from 'expo-font';
import { ActivityIndicator } from 'react-native';
import Svg, { Text } from 'react-native-svg';

export default function Countdown() {
  const [fontsLoaded] = useFonts({
    'Robo Numbers': require('../assets/fonts/my-custom.ttf'),
  });

  // 字体未加载时显示加载占位
  if (!fontsLoaded) {
    return <ActivityIndicator />;
  }

  const countdown = 5; // 示例值
  return (
    <Svg>
      <Text 
        stroke={10 > countdown ? 'orange' : '#f8f0c1'} 
        fontFamily="RoboNumbers-Regular" // 注意这里要用字体内部名称
      >
        {countdown}
      </Text>
    </Svg>
  );
}

2. 使用字体的内部PostScript名称，而非自定义别名 #

React Native原生Text可以直接使用你在useFonts中定义的别名，但RN-SVG需要引用字体的内部PostScript名称，这个名称和你自定义的别名可能不一致：

• Mac：用Font Book打开字体，右键点击→「显示字体信息」，查看「PostScript名称」
• Windows：使用第三方字体查看工具（如FontViewOK）或通过命令行工具查看

找到正确的内部名称后，替换RN-SVG Text组件的fontFamily属性值即可。

3. 补充Expo项目的字体资源配置（可选但推荐） #

在app.json中添加字体资源路径，确保Expo能正确识别并打包字体文件：

{
  "expo": {
    "assets": ["./assets/fonts/"]
  }
}

只要完成以上步骤，RN-SVG的Text组件就能正常渲染自定义字体了。

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