javascript - React Native：Svg 不占用屏幕高度的一半

Question

我正在尝试设计一个包含 3 个 svg 的屏幕。天蓝色也应该覆盖下半屏。但在我的情况下，底部还剩下一些部分，即它没有完全填满整个底部。

我也尝试过 flex，但我得到了相同的结果。最初我将整个屏幕分成两个相等的 flex 部分，在 flex 的底部我使用 svgs 但我仍然得到相同的结果。

代码 ：

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import Svg, { Path, G } from "react-native-svg";
import colors from "../../assets/config.js/colors";
import AppButton from "../AppButton";
import Logo from "../Logo";

const originalWidth = 429.61;
const originalHeight = 425.00;
const aspectRatio = originalWidth / originalHeight;
const windowWidth = Dimensions.get("window").width;
const originalWidth1 = 429.029;
const originalHeight1 = 79.439;
const aspectRatio1 = originalWidth / originalHeight;
const windowWidth1 = Dimensions.get("window").width;

export default function TestScreen({ customStyles }) {
  return (
    <View style={{ flex: 1, backgroundColor: "##f8f4f4" }}>
      <View style={{ flex: 2, justifyContent: "center", alignItems: "center" }}>
        <View style={styles.logoContainer}>
          <Logo
            imageUri={require("../../assets/logo.png")}
            subTitle="Affordable, Simple, and  Always Blind"
          />
        </View>
      </View>
      <View
        style={{ width: windowWidth, aspectRatio, justifyContent: "center" }}
      >
        <Svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100%"
          viewBox={`0 0 ${originalWidth} ${originalHeight}`}
          style={{ position: "absolute", zIndex: -1 }}
        >
          <G data-name="Group 1">
            <Path
              data-name="Path 123"
              d="M.11 97.521s58.364 40.5 152.144 34 105.12-25.406 170.269-23.333 105.587 23.333 105.587 23.333v316H.61z"
              fill="#4eabff"
            />
            <G stroke="#707070">
              <Path
                data-name="Path 124"
                d="M.11 87.194s105.21 23.7 147.827 10.519 37.289-47.852-4-47.852-63.088 50.566-4.657 64.666 118-42.153 190.445-34.05 98.385 48.05 98.385 48.05"
                fill="none"
                strokeDasharray="6 3"
              />
              <Path
                data-name="Path 185"
                d="M202.754 26.036a1.169 1.169 0 01-.945-.013 16.153 16.153 0 01-9.458-8.535c-1.027-2.062-1.647-4.284-2.473-6.425a11.962 11.962 0 00-2.34-4.037 4.474 4.474 0 00-2.373-1.499 3.783 3.783 0 00-3.073.7 6.634 6.634 0 00-1.815 2.287 18.094 18.094 0 00-1.744 5.8 61.7 61.7 0 00-.721 11.081 31.339 31.339 0 004.283 15.213 62.8 62.8 0 006.719 9.329c2.013 2.37 4.156 4.62 6.324 6.842 2.063 2.115 4.242 4.117 6.367 6.172.453.438.893.889 1.338 1.335a.783.783 0 00.31.236 4.29 4.29 0 012.067 1.7 5.422 5.422 0 001.565 1.509q-1.206-2.042-2.364-4.112a27.558 27.558 0 01-3.217-10.282c-.316-2.679-.576-5.359-.645-8.056a65.116 65.116 0 01.282-7.6 62.78 62.78 0 012.847-13.764 83.791 83.791 0 014.811-11.578c1.107-2.211 2.14-4.462 3.461-6.56a13.027 13.027 0 013.918-4.216 6.259 6.259 0 015.089-.832 4.389 4.389 0 013.221 3.876 15.711 15.711 0 01-.306 5.107 39.358 39.358 0 00-.918 7.706 10.556 10.556 0 002.109 6.7 12.494 12.494 0 003.508 2.821 15.806 15.806 0 014 3.108 7.762 7.762 0 011.306 8.638 22.89 22.89 0 01-2.8 4.7l-.355.485a21.683 21.683 0 012.154-.891 11.531 11.531 0 0112.169 2.951 22.575 22.575 0 015.439 9.316 43.741 43.741 0 011.954 9.253 37.769 37.769 0 01.325 5.731 9.161 9.161 0 01-1.3 4.73 6.289 6.289 0 01-5.741 2.941 18.659 18.659 0 01-5.4-1.072c-3.935-1.246-7.947-2.188-11.971-3.087-4.651-1.039-9.328-1.965-13.963-3.074q-2.349-.553-4.649-1.269a1.663 1.663 0 00-.725-.079 1.669 1.669 0 01-1.137-.338 5.33 5.33 0 00-1.53-.921 13.065 13.065 0 001.973 1.648 12.29 12.29 0 004.518 1.725 24.415 24.415 0 018.311 3.637 14.417 14.417 0 013.849 3.3 4.92 4.92 0 01.639 1.047 1.905 1.905 0 01-1.779 2.772 6.514 6.514 0 01-2.989-.765 22.664 22.664 0 01-4.194-2.8 76.356 76.356 0 00-7.132-4.737 46.3 46.3 0 01-5.865-3.941 14.1 14.1 0 01-3.06-3.484.665.665 0 00-.222-.264 16.287 16.287 0 01-2.739-2.261 1.11 1.11 0 00-.818-.319 45.338 45.338 0 01-6.913-.532 13.939 13.939 0 01-5.319-2.028c-.6-.37-1.23-.677-1.855-1a2.057 2.057 0 00-.8-.223 1.136 1.136 0 00-1.242.932 1.089 1.089 0 00.9 1.289c.238.053.484.075.764.116a3.04 3.04 0 01-2.236-.483.987.987 0 01-.382-1.052 1.3 1.3 0 01.983-.97 4.218 4.218 0 012.776.367 22.672 22.672 0 012.595 1.38 14.415 14.415 0 005.774 1.779c1.443.157 2.891.22 4.337.32.288.02.578 0 .911 0a2.892 2.892 0 00-.59-.607 32.524 32.524 0 00-4.072-3.412 31.835 31.835 0 00-2.972-1.6 7.065 7.065 0 01-2.264-1.633 3.251 3.251 0 01-.331-.464 1.328 1.328 0 011.546-2.078 2.256 2.256 0 011.7 2.056c.009.05.015.125-.013.154-.164.168-.861-.026-.928-.26a4.308 4.308 0 00-.664-1.472c-.312-.409-.6-.379-.83.075a1.526 1.526 0 00.1 1.623 6.006 6.006 0 002.364 1.914 34.175 34.175 0 014.475 2.684 39.321 39.321 0 013.175 2.776.99.99 0 00.688.3 14.787 14.787 0 013.11.324l-2.876-2.769c-3.325-3.2-6.631-6.423-9.7-9.877a59.408 59.408 0 01-8.684-12.268 30.735 30.735 0 01-2.958-8.368 34.414 34.414 0 01-.5-6.344c0-2.4-.018-4.809.19-7.208a24.359 24.359 0 011.667-7.552 7.683 7.683 0 012.674-3.671 4.682 4.682 0 013.586-.548 6.736 6.736 0 013 1.355 8.266 8.266 0 012.26 3.2c.79 1.7 1.245 3.527 1.863 5.292a17.776 17.776 0 006.623 8.962 13.813 13.813 0 003.524 1.76c.137.053.255.1.445.176zm4.995 41.843a10.53 10.53 0 011.276-2.635 29.424 29.424 0 015.4-5.925 57.292 57.292 0 005.976-6.131 48.062 48.062 0 016.334-6.58 15.453 15.453 0 002.9-2.653 25.283 25.283 0 003.4-5.564 8.225 8.225 0 00.6-4.211c-.4-2.667-2.079-4.483-4.082-6.074a23.538 23.538 0 00-2.554-1.619 10.078 10.078 0 01-4.643-6.052 15.122 15.122 0 01-.24-6.319c.3-2.189.817-4.343 1.049-6.543a10.53 10.53 0 00-.118-3.887 3.4 3.4 0 00-3.764-2.778 5.58 5.58 0 00-2.681 1.013 14.533 14.533 0 00-4.031 4.53c-1.074 1.734-1.915 3.589-2.822 5.409a87.213 87.213 0 00-5.673 14.156 63.1 63.1 0 00-2.664 16.771 64.414 64.414 0 00.451 8.511 53.356 53.356 0 00.819 5.333 29.358 29.358 0 003.2 7.993c.59 1.058 1.2 2.1 1.864 3.255zm2.2 1.253a19.41 19.41 0 002.267.652c5.767 1.4 11.565 2.671 17.355 3.97 3.28.736 6.554 1.5 9.776 2.47a31.692 31.692 0 004.9 1.329 6.014 6.014 0 006.889-4.148 16.586 16.586 0 00.678-6.587c-.057-1.239-.254-2.473-.422-3.7a39.158 39.158 0 00-3.371-11.8 17.982 17.982 0 00-4.786-6.434 9.3 9.3 0 00-7.292-2.118 14.3 14.3 0 00-6.435 2.761.91.91 0 00-.182.188 50.963 50.963 0 00-4.118 5.853 60.85 60.85 0 01-8.485 11.718 40.272 40.272 0 01-6.783 5.849zm-6.95-3.765c-.108.724-.446 1.139-1.149 1.178-.365.021-.134.2-.068.309a11.78 11.78 0 001.387 1.756 25.975 25.975 0 005.6 4.281c2.121 1.3 4.325 2.468 6.354 3.912 1.467 1.044 2.877 2.168 4.329 3.234a10.182 10.182 0 003.32 1.751 1.619 1.619 0 002.133-1.857 3.564 3.564 0 00-1.116-2 26.082 26.082 0 00-6.5-4.6 24.162 24.162 0 00-5.358-1.769 13.934 13.934 0 01-7.32-4.418c-.512-.587-1.047-1.148-1.62-1.777zm23.1-17a45.256 45.256 0 00-4.16 4.411 56.2 56.2 0 01-5.928 6.18 43.212 43.212 0 00-4.352 4.159 13.011 13.011 0 00-2.88 4.877c-.071.243-.224.53.014.729.267.223.48-.078.7-.181a3.225 3.225 0 00.444-.283 31.086 31.086 0 003.7-3.041 53.844 53.844 0 009.821-12.5c.85-1.464 1.682-2.939 2.641-4.347zm-25.937 17.069c-.1-.911.476-1.065 1.146-1.248a9.309 9.309 0 00-3-.47zm1.855-.285c-.064-.2-.041-.591-.392-.615a.605.605 0 00-.6.588.764.764 0 00-.006.087c-.009.312.3 1.033.451 1.05.176.026.544-.669.547-1.106z"
              />
            </G>
          </G>
        </Svg>
        <View
          style={{
            alignItems: "center",
            justifyContent: "center",
            marginTop: 14,
          }}
        >
          <View style={styles.buttonContainer}>
            <AppButton
              title="Login to existing account"
              backgroundColor={colors.light}
              onPress={() => alert("Button pressed")}
            />
          </View>
          <View style={styles.text}>
            <Text style={{ color: colors.white, fontSize: 15 }}>
              Don't have an account yet
            </Text>
          </View>
          <View style={styles.buttonContainer}>
            <AppButton
              title="Create new account"
              backgroundColor={colors.light}
              onPress={() => alert("Button pressed")}
            />
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  logoContainer: {
    width: "80%",
  },

  buttonContainer: {
    width: "80%",
    marginVertical: 20,
    zIndex: 10,
  },
});

标签： javascriptreact-nativesvg