Невозможно изменить размер изображения SVG в приложении React Native

У меня есть следующий проект React Native:

https://snack.expo.io/BkBU8fAlV

где у меня есть следующий код:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// 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';

import HomerSvg from './assets/HomerSvg';

export default class App extends React.Component {
  render() {
    return (
      <View style = {styles.container}>
        <Text style = {styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <View style = {{ width: 80, height: 80 }}>
          <HomerSvg />
        </View>
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Я показываю образ SVG через компонент: HomerSvg, который использует пакет react-native-svg.

Мне нужно как-то изменить размер образа SVG. В приведенном выше коде я безуспешно пытался.

Я попытался придать контейнеру некоторую ширину и высоту, но безуспешно.

У тебя есть идеи, как я могу этого добиться?

Спасибо!

Изменение размера работает с шириной и высотой, которые вы уже применили, не могли бы вы объяснить больше?

Just code 24.12.2018 09:28

вы можете показать свой исправленный код?

MasterLuV 14.01.2020 10:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
7 076
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Если размеры SVG не основаны на размерах контейнеров, они не изменятся. Изображения с заданными размерами игнорируют размеры своих родителей, и вы устанавливаете размеры в HomerSvg.js.

Надеюсь это поможет!

Ответ принят как подходящий

Вы можете обернуть все элементы <Path /> внутри <G /> и масштабировать компонент <G />, вычислив масштабный коэффициент с помощью Dimensions, то есть ширины и высоты устройства.

<G transform = "scale(scaleFactor) translate(offsetX,offsetY)>
<Path/>
<Path/>
.
.
.
<G/>

где scaleFactor, offsetX и offsetY можно рассчитать через const { height, width } = Dimensions.get("window").

Привет, не могли бы вы показать лучший пример, я борюсь с этим

Yasir 29.09.2019 16:51

Откуда G?

John Ottenlips 27.02.2020 02:34

На самом деле это очень легко решить без React Native, но без самого SVG.

Просто установите тег preserveAspectRatio на none.

Пример:

<Svg
  width = {this.props.width}
  height = {this.heights.h1}
  xmlns = "http://www.w3.org/2000/svg" 
  viewBox = "0 0 750 352"
  preserveAspectRatio = "none">
...
</Svg>

Я знаю, что это старый вопрос, но, возможно, мы забываем здесь основы, помните, что некоторые импортированные SVG могут иметь ширина и высота.

import HomeSvg from './assets/HomeSvg';

<HomeSvg height = {20} width = {20}/>

Для меня проблема заключалась в том, что при оптимизации SVG был удален viewBox.
. Попробуйте добавить опору viewBox = "0 0 width height" к Svg (width и height - исходные размеры).

Другие вопросы по теме