React Native & Expo - iOS 장치에서 SVG가 렌더링되지 않습니다.

Question

'create-react-native-app'을 사용하여 프로젝트를 시작했으며 .svg 파일을 렌더링하는 방법을 알 수 없습니다. 나는 모두와 같은 svg에 대한 라이브러리를 시도했습니다. react-native-svg-uri, react-native-svg-image, msvgc (react-native-svg로 구성 요소를 반응시키는 .svg) 등이 있습니다. 때로는 휴대 전화에서 앱 미리보기 (엑스포 포함)를 실행하면 즉시 충돌이 발생하고 때로는 실제 .svg 이미지가 아닌 애니메이션로드가 표시됩니다. 오류는 없습니다. 단순히 svg를 렌더링하지 않습니다.

예를 들어,이 코드는

import SVGImage from 'react-native-svg-image'; 

<View style={styles.slide1}> 

     <SVGImage 
     style={{ width: 80, height: 80 }} 
     source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}} 
     /> 

     <Text style={styles.text}>Hello</Text> 
</View> 

가 사전에 감사 로딩 애니메이션을 보여줍니다!

Answer 1

이것은 iOS에서 테스트되지 않는 react-native-svg 이미지 라이브러리의 문제인 것으로 보입니다. iOS의 WebView에서 html 소품을 사용하면 startInLoadingState={true}을 설정할 수 없습니다. 그렇지 않으면 로딩 표시기가 절대로 사라지지 않습니다. 이것은 반응 네이티브에서 오랫동안 존재해온 행동입니다. 자세한 내용은 issue 542을 참조하십시오. 확실히 이상적은 아니지만, 누군가가 이것을 읽고 고쳐 주길 바랍니다!

showWebviewLoader 보조 장치를 false으로 설정하여이 문제를 해결할 수 있습니다.

<SVGImage 
     showWebviewLoader={false} 
     style={{ width: 80, height: 80 }} 
     source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}} 
    />