Блог

Как правильно прикрепить SVG-волну к нижней/средней части экрана? Сейчас я использую marginTop:50 SVG, но на разных размерах экрана результат не очень хороший.

 import {Button, StyleSheet, Text, TouchableOpacity, View} from "react-native"; import React from "react"; import Svg, {ClipPath, Defs, G, Path} from "react-native-svg";  export default function LoginScreen() {   // @ts-ignore  return (  lt;View style={{  flex: 1,  }}gt;  lt;View style={{ flex: 2, }} gt;  lt;Svg viewBox="0 0 1440 320" width="100%" height="80" gt;  lt;Path  fill="#8C52FF"  d="M0 96l80 32c80 32 240 96 400 80S800 96 960 96s320 96 400 144l80 48V0H0z"  /gt;  lt;/Svggt;   lt;Svg viewBox="0 0 1440 320" style={{marginTop:50}}gt;  lt;Path  fill="#8C52FF"  d="M0 128l80 21.3c80 21.7 240 63.7 400 69.4C640 224 800 192 960 160l400-80 80-16v256H0z"  /gt;  lt;/Svggt;  lt;/Viewgt;  lt;View style={{ flex:2, backgroundColor: "#8C52FF" , flexDirection:'column', justifyContent:"flex-end" }} gt;  lt;TouchableOpacity  style={styles.SubmitButtonStyle}  activeOpacity = { .5 }  onPress={ null }  gt;  lt;Text style={styles.TextStyle}gt; SUBMIT lt;/Textgt;  lt;/TouchableOpacitygt;   lt;TouchableOpacity  style={styles.SubmitButtonStyleBottom}  activeOpacity = { .5 }  onPress={ null }  gt;     lt;/TouchableOpacitygt;   lt;/Viewgt;       lt;/Viewgt;  ); }  const styles = StyleSheet.create({  container: {  flex: 1,  },  SubmitButtonStyle: {   marginTop:10,  paddingTop:10,  paddingBottom:10,  marginLeft:30,  marginRight:30,  backgroundColor:'#FFE7F6',  borderRadius:20,  borderWidth: 1,  borderColor: '#FFE7F6',  marginBottom:10  },   SubmitButtonStyleBottom: {  marginTop:10,  paddingTop:25,  paddingBottom:15,  marginLeft:30,  marginRight:30,  backgroundColor:'#FFE7F6',  borderRadius:20,  borderWidth: 1,  borderColor: '#FFE7F6',  marginBottom:50  },  TextStyle:{  color:'#8C52FF',  textAlign:'center',  }  })  

Это результаты, которых я хочу достичь: