无法在React Native上渲染SVG图像

Question

我正在尝试在SVG应用上渲染React Native图像。

由于无法使用来自SVG包的标准Image组件渲染react-native图像，因此我尝试了最流行的替代方案：Image组件从包装中：react-native-remote-svg。

我通过手机上的Expo应用尝试了以下代码，但没有成功，在我的Expo云帐户上运行了已构建的应用（在从本地计算机到我的{{1 }}帐户，并输入以下命令：Expo）。我在两种$ expo ba和Android设备上都尝试过。

iOS

通过这种方式，即使您在import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import { Constants } from 'expo'; import Image from 'react-native-remote-svg'; // You can import from local files import AssetExample from './components/AssetExample'; // or any pure javascript modules available in npm import { Card } from 'react-native-paper'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.paragraph}> Please, change extension from{"\n"} PNG to SVG{"\n"} The image will stop rendering.{"\n"} Why? Workaround? </Text> <View style={styles.containerHomer}> <Image source={require('./assets/homer.png')} style={{ width: 120, height: 128 }} /> </View> <Card> <AssetExample /> </Card> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, containerHomer: { flexDirection: 'row', justifyContent: 'center', marginBottom: 20, }, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', }, }); 在线游乐场上尝试上面的代码，您也会看到Snack图像没有被渲染，而SVG图像被渲染了正确（您可以尝试将扩展名从PNG更改为SVG）。

在这里，您可以使用PNG样本：

https://snack.expo.io/r1kWxxCeN

另一方面，如果我通过设备上的Snack应用程序运行该应用程序，但是这次从url：Expo加载，则exp://<IP>:19000会正确呈现。我相信是因为在那种情况下，图像是使用HTML内部呈现的（但我不确定）。

关于如何在SVG应用中正确渲染SVG图像的任何想法？

谢谢！

Answer 1

这是我在评论中提到的错误消息