自定义字体不会在 RN-SVG <Text/> 中呈现

Question

在我的代码中我尝试：

import { useFonts } from 'expo-font'

useFonts( {
  'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ),
} )

现在，当我渲染 RN 自己的或 RN-Paper 的 Text 元素时，字体系列会正确显示：

import { Text } from 'react-native-paper'
const styles = StyleSheet.create({
  countdown:{
    fontFamily:'Robo Numbers', 
    fontSize:34,
  },
})

 <Text style={[ styles.countdown, { color:10 > countdown ? 'orange' : '#f8f0c1' } ]}>{countdown}</Text>

但在 RN-SVG 的 Text 中呈现默认字体：

<Text stroke={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}</Text>

库中是否缺少该功能，或者我是否缺少某些内容？

Answer 1

到目前为止，"react-native-svg": "~13.4.0" 不支持自定义字体，或者我找不到使用它们的文档方式。

因此，我找到了一个基于 的非常简单的解决方法：

render() {
  const { countdown } = this.state

  return <>
    <ForeignObject x={85} y={94} height={14} key={countdown}>
      <Text style={{ fontFamily:'Robo Numbers' }}>{countdown}</Text>
    </ForeignObject>
  <>
}

这里的CRITICAL是ForeignObject@key属性。它必须存在才能强制ForeignObject 重新渲染它的子对象。

在我的例子中，我在 setInterval() 中增加倒计时变量，但在我添加具有不断变化的值的 ForeignObject@key 之前，文本从未更新！

希望这会对某人有所帮助......