自定义字体不会在 RN-SVG <Text/> 中呈现-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

P粉743288436 2023-09-06 09:01:24

[JavaScript讨论组]

828

在我的代码中我尝试： <pre class="brush:php;toolbar:false;">import { useFonts } from 'expo-font' useFonts( { 'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ), } )</pre> 现在，当我渲染 RN 自己的或 RN-Paper 的 <code>Text</code> 元素时，字体系列会正确显示： <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> 但在 RN-SVG 的 <code>Text</code> 中呈现默认字体： <pre class="brush:php;toolbar:false;"><Text stroke={10 > countdown ? 'orange' : '#f8f0c1'} fontFamily="Robo Numbers">{countdown}</Text></pre> 库中是否缺少该功能，或者我是否缺少某些内容？

P粉743288436

全部回复(1)

P粉4028061752023-09-07 00:20:57 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 之前，文本从未更新！ p>

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