自定义字体不会在 RN-SVG <Text/> 中呈现
<p>在我的代码中我尝试：</p>
<pre class="brush:php;toolbar:false;">import { useFonts } from 'expo-font'
useFonts( {
'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ),
} )</pre>
<p>现在，当我渲染 RN 自己的或 RN-Paper 的 <code>Text</code> 元素时，字体系列会正确显示：</p>
<pre class="brush:php;toolbar:false;">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></pre>
<p>但在 RN-SVG 的 <code>Text</code> 中呈现默认字体：</p>
<pre class="brush:php;toolbar:false;"><Text stroke={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}</Text></pre>
<p>库中是否缺少该功能，或者我是否缺少某些内容？</p>
1
949
收藏
到目前为止，
"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之前，文本从未更新！ p>希望这会对某人有所帮助......