Я пытаюсь поставить SVG path
в качестве фона приложения, но проблема в том, что когда я пытаюсь увеличить его height
, он не отображается правильно, он смещается вниз.
код:
import React, { Component } from "react";
import { StyleSheet, View, Text, Platform } from "react-native";
import Svg, { Path } from "react-native-svg";
import Colors from "../constants/colors";
import Strings from "../constants/strings";
class Login extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={styles.container}>
<View style={styles.rect}>
<Text style={styles.appTitle}>{Strings.app_title}</Text>
<Svg viewBox="0 0 720 1440" style={styles.path}>
<Path
strokeWidth={1}
fill="#fff"
stroke="#fff"
d="M14.8,48c1,175.5 2,351 2.9,526.6c1,6.6 3.5,16.3 10.7,25c8.6,10.3 19.7,14 23.6,15.3c22.6,7.7 239.2,82.2 537.1,184.2c0,0 57,12.4 51.9,-47.4l-4,-709.1c0,0 -7,-35.8 -50.2,-41.7L62.9,1.4C62.9,1.4 20.7,4.5 14.8,48z"
/>
<Path
strokeWidth={1}
fill="#fff"
stroke="#fff"
d="M14.1,720.7v277.2c0,0 7.8,43.6 50.1,54.5h531.8c0,0 43.5,-1.7 44.3,-49.4l0.3,-114.7c0,0 -0.9,-29.2 -26.2,-39.4L87.3,668.7C87.3,668.7 20.1,648.1 14.1,720.7z"
/>
</Svg>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
rect: {
width: 720,
height: 1440,
marginTop: 20,
backgroundColor: Colors.initialAppBackgroundColor,
},
appTitle: {
color: "#fff",
justifyContent: "center",
alignItems: "center",
fontSize: 26,
lineHeight: 50,
marginLeft: 50,
},
path: {
width: 360,
height: 940,
marginLeft: 20,
marginRight: 20,
alignSelf: "auto",
alignContent: "center",
position: "absolute",
},
});
export default Login;
с этим кодом выше, это выглядит так:
скажем, я меняю SVG
height
на 1050
, тогда проблема в следующем:
Есть ли что-нибудь, что Я скучаю или есть лучший способ работать с SVG в REACT NATIVE?