自訂字體不會在 RN-SVG <Text/> 中呈現

Question

在我的程式碼中我嘗試：

import { useFonts } 從 'expo-font'

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

現在，當我渲染 RN 自己的或 RN-Paper 的 Text 元素時，字型系列會正確顯示：

import { Text } 從 'react-native-paper'
const styles = StyleSheet.create({
  countdown:{
    fontFamily:'Robo Numbers',
    fontSize:34,
  },
})

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

但在 RN-SVG 的 Text 中呈現預設字型：

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

庫中是否缺少該功能，或者我是否缺少某些內容？

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

希望這對某人有幫助......