사용자 정의 글꼴은 RN-SVG <Text/>에서 렌더링되지 않습니다.

Question

내 코드에서는 다음을 시도합니다.

'expo-font'에서 { useFonts } 가져오기

사용글꼴({
  '로보 번호':require( '../assets/fonts/my-custom.ttf' ),
} )

이제 RN 자체 또는 RN-Paper의 Text 요소를 렌더링하면 글꼴 모음이 올바르게 표시됩니다.

'react-native-paper'에서 { Text } 가져오기
const 스타일 = StyleSheet.create({
  카운트다운:{
    글꼴 패밀리:'로보 숫자',
    글꼴 크기:34,
  },
})

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

그러나 RN-SVG의 Text에서 기본 글꼴을 렌더링하는 경우:

<텍스트 스트로크={10 > 카운트다운 ? 'orange' : '#f8f0c1'}fontFamily="Robo Numbers">{countdown}< ;/텍스트>
이 기능이 라이브러리에 없는 걸까요, 아니면 제가 뭔가를 놓친 걸까요? 
            

Answer 1

지금까지 "react-native-svg": "~13.4.0" 사용자 정의 글꼴은 지원되지 않거나 이를 사용하는 문서화된 방법을 찾을 수 없습니다.

그래서 저는 에 기반한 매우 간단한 솔루션을 찾았습니다.

으아악

여기서 CRITICAL은 ForeignObject@key 속성입니다. ForeignObject가 자식을 다시 렌더링하도록 강제하려면 존재해야 합니다.

제 경우에는 setInterval()에서 카운트다운 변수를 증가시켰지만 변경 값과 함께 setInterval() 中增加倒计时变量，但在我添加具有不断变化的值的 ForeignObject@key를 추가할 때까지 텍스트가 업데이트되지 않습니다! p>

이 정보가 누군가에게 도움이 되기를 바랍니다...