Benutzerdefinierte Schriftarten werden in RN-SVG <Text/> nicht gerendert

Question

In meinem Code versuche ich:

import { useFonts } from 'expo-font'

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

Wenn ich jetzt das eigene Text-Element von RN oder RN-Paper rendere, wird die Schriftfamilie korrekt angezeigt:

import { Text } from 'react-native-paper'
const Styles = StyleSheet.create({
  Countdown:{
    Schriftartenfamilie:'Robo Numbers',
    Schriftgröße:34,
  },
})

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

Aber das Rendern der Standardschriftart im Text von RN-SVG:

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

Fehlt diese Funktionalität in der Bibliothek oder übersehe ich etwas?

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 之前，文本从未更新！

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