Les polices personnalisées ne sont pas rendues dans RN-SVG <Text/>

Question

Dans mon code, j'essaie :

importer { useFonts } depuis 'expo-font'

utiliserFonts({
  'Numéros Robo': require( '../assets/fonts/my-custom.ttf' ),
} )</pré>
<p>Maintenant, lorsque je restitue l'élément <code>Text</code> de RN ou de RN-Paper, la famille de polices s'affiche correctement : </p>
<pre class="brush:php;toolbar:false;">importer {Texte} depuis 'react-native-paper'
const styles = StyleSheet.create({
  compte à rebours:{
    fontFamily : 'Numéros Robo',
    Taille de police : 34,
  },
})

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

Mais le rendu de la police par défaut dans le Text de RN-SVG :

<Text Stroke={10 > 'orange' : '#f8f0c1'} fontFamily="Numéros Robo">{countdown}< ;/Texte>

Cette fonctionnalité est-elle absente de la bibliothèque ou est-ce qu'il me manque quelque chose ?

Answer 1

Jusqu'à présent, "react-native-svg": "~13.4.0" les polices personnalisées ne sont pas prises en charge, ou je ne trouve pas de moyen documenté de les utiliser.

J'ai donc trouvé une solution très simple basée sur  :

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

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

Le CRITIQUE ici est l'attribut ForeignObject@key. Il doit être présent pour forcer le ForeignObject à restituer ses enfants.

Dans mon cas, j'incrémente la variable de compte à rebours dans setInterval() mais le texte ne se met jamais à jour jusqu'à ce que j'ajoute le setInterval() 中增加倒计时变量，但在我添加具有不断变化的值的 ForeignObject@key avec la valeur changeante ! p>

J'espère que cela aidera quelqu'un...