Я пытаюсь отобразить SVG
изображения в моем приложении React Native
.
Поскольку невозможно отобразить SVG
изображения со стандартным компонентом Image
из пакета: react-native
, Я попробовал с самой популярной альтернативой: компонент Image
из пакета: react-native-remote-svg
.
Я безуспешно попробовал следующий код через приложение Expo
на своем телефоне, запустив встроенныйприложение в моей учетной записи Expo
(после создания приложения с локального компьютера в моей учетной записи 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
).
Здесь у вас есть образец Snack
, который вы можете воспроизвестис помощью:
https://snack.expo.io/r1kWxxCeN
С другой стороны, если я запускаю приложение через приложение Expo
на моем устройстве, но на этот раз загружаю его из URL: exp://<IP>:19000
, тогда SVG
отображается правильно.Я верю, потому что в этом случае изображение внутренне визуализируется с помощью HTML (но я не уверен в этом).
Есть идеи о том, как правильно отрисовать SVG
изображений в моем приложении React Native
?
Спасибо!