カスタム フォントは RN-SVG <Text/> ではレンダリングされません
P粉743288436
2023-09-06 09:01:24
<p>私のコードでは次のようにしてみます: </p>
<pre class="brush:php;toolbar:false;">import { useFonts } from 'expo-font'
useFonts({
'ロボ番号':require( '../assets/fonts/my-custom.ttf' ),
} )
<p>RN 独自の、または RN-Paper の <code>Text</code> 要素をレンダリングすると、フォント ファミリが正しく表示されます。 </p>
<pre class="brush:php;toolbar:false;">import { Text } from 'react-native-paper'
const スタイル = StyleSheet.create({
秒読み：{
fontFamily:'ロボナンバー',
フォントサイズ:34、
}、
})
<Text style={[styles.countdown, { color:10 > countdown ? 'orange' : '#f8f0c1' } ]}>{countdown}</Text></pre>
<p>しかし、RN-SVG の <code>Text</code> でデフォルトのフォントをレンダリングします: </p>
<pre class="brush:php;toolbar:false;"><Text ストローク={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}< ;/テキスト><
<p>この機能はライブラリにないのでしょうか、それとも何かが足りないのでしょうか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これまでのところ、
"react-native-svg": "~13.4.0"カスタム フォントはサポートされていないか、文書化された使用方法が見つかりません。そこで、
に基づいた非常に簡単な解決策を見つけました。 リーリーここでの CRITICAL は
ForeignObject@key属性です。これは、ForeignObject にその子の再レンダリングを強制するために存在する必要があります。私の場合、
setInterval()でカウントダウン変数をインクリメントしますが、値を変更してForeignObject@keyを追加するまでテキストは更新されません。 p>これが誰かのお役に立てば幸いです...