位置：已在React native Webview中修复，在iOS和Android上的行为不一致

Question

我正在尝试使用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，已裁剪：

我以为iOS无法像android一样处理position: fixed ...但是我不知道为什么以及如何解决它。有解决方案吗？

Answer 1

我通过在HTML中添加<meta name="viewport" content="width=device-width,initial-scale=1">来部分修复了它。

位置：已在React native Webview中修复，在iOS和Android上的行为不一致

问题描述投票：0回答：1

1个回答

最新问题

位置：已在React native Webview中修复，在iOS和Android上的行为不一致

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1