如何在 react-native 的 Image 组件中显示本地 SVG 图像

Question

我正在开发一个 react-native 应用程序。我的项目中本地有一堆 SVG 文件。我想使用我的自定义组件来呈现文本和 SVG 图像。

这是我的自定义组件，它应该为静态 SVG 文件呈现 Text 和 Image：

import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';

export default MyComponent = ({svgFile, text}) => {
   return (<View style={styles.line}>
        <Image source={svgFile} />
        <Text>{text}</Text>
      </View>)
}

在我的屏幕上，我尝试显示几个MyComponent，每个都呈现一个特定的 SVG 图像：

<View>
          
   <MyComponent
      svgFile={require('../assets/images/tiger.svg')}
      text="tiger"
   />

   <MyComponent
      svgFile={require('../assets/images/elephant.svg')}
      text="elephant"
   />

   ...
</View>

但只显示文本，不显示图像。如何显示带有Image 组件的 SVG 文件？我需要让它同时在 Android 和 iOS 上运行。

Answer 1

React Native 中的 Image 组件不支持 SVG 渲染。我建议使用react-native-svg 在您的自定义组件中呈现您的 SVG。将您的 svg 文件导入到组件中，并使用 <SvgXml /> 渲染它：

export default MyComponent = ({svgFile, text}) => {
   return (<View style={styles.line}>
        <SvgXml xml={svgFile} />
        <Text>{text}</Text>
      </View>)
}