0

我正在尝试使用 Webview 显示代码生成的 SVG。以下组件的行为符合我在 Android 上的需要，但 svg 不适合 iOS/ 上的 webview

import * as React from "react";
import { View } from "react-native";
import WebView from "react-native-webview";


function TestComp() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <View style={{ height: 100, width: 100 }}>
                <WebView source={{ html }}/>
            </View>
        </View>
    );
}

export default TestComp;


const html = `<html>
<head>
  <style>
    html, body { background-color: blue; }
    svg {
      position: fixed;
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
    <svg viewBox="0 0 75 135">
        <circle cx="38.2" cy="25.7" r="25.7"/>
        <path d="M56.5,134h-38c-10.1,0-18.3-8.2-18.3-18.3v-38c0-10.1,8.2-18.3,18.3-18.3h38 c10.1,0,18.3,8.2,18.3,18.3v38C74.8,125.8,66.6,134,56.5,134z"/>
    </svg>
</body>
</html>`;

Android（正确结果）：

在此处输入图像描述

iOS，剪辑：

在此处输入图像描述

我认为 iOSposition: fixed不像 android 那样处理......但我不知道为什么以及如何修复它。有什么解决办法吗？

4

1 回答 1

0

<meta name="viewport" content="width=device-width,initial-scale=1">我通过添加到我的 html 来部分修复它。

于 2020-03-19T09:32:59.503 回答