У меня есть следующий проект 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. В приведенном выше коде я безуспешно пытался.
Я попытался придать контейнеру некоторую ширину и высоту, но безуспешно.
У тебя есть идеи, как я могу этого добиться?
Спасибо!
вы можете показать свой исправленный код?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если размеры 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").
Привет, не могли бы вы показать лучший пример, я борюсь с этим
Откуда G?
На самом деле это очень легко решить без 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 - исходные размеры).
Изменение размера работает с шириной и высотой, которые вы уже применили, не могли бы вы объяснить больше?