React Native＆Expo - SVG不會在iOS設備上渲染

Question

我已經開始使用'create-react-native-app'創建一個項目，我無法弄清楚如何渲染.svg文件。我嘗試了全部庫像react-native-svg-uri，react-native-svg-image，msvgc（轉換.svg與react-native-svg反應組件），這些都無濟於事。 有時當我在手機上運行應用程序預覽（使用expo）時，它立即崩潰，有時它只顯示加載動畫 - 而不是顯示實際的.svg圖像。 沒有錯誤 - 它根本不會渲染svgs。

例如，此代碼顯示加載動畫

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-image庫的問題。當您在iOS上的WebView上使用html支柱時，您無法設置startInLoadingState={true}，否則加載指示符永不消失。這是一個在react-native中已經存在很長時間的行爲，請參閱issue 542以獲取更多信息 - 儘管這當然不是理想的，但希望有人閱讀並修復它！

您可以通過在零部件上設置showWebviewLoader支柱到false來解決此問題。

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