Невозможно отобразить изображения SVG в React Native - PullRequest
0 голосов
/ 24 декабря 2018

Я пытаюсь отобразить 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?

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...