Как поместить svg в качестве фона приложения в React Native - PullRequest
0 голосов
/ 04 мая 2020

Я пытаюсь поставить 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;

с этим кодом выше, это выглядит так:

without height adjustment

скажем, я меняю SVG height на 1050, тогда проблема в следующем:

after changing height

Есть ли что-нибудь, что Я скучаю или есть лучший способ работать с SVG в REACT NATIVE?

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