ReactNative WebView 无法在网页上呈现，但在 Android 上运行良好

Question

使用的版本：

"expo": "^36.0.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.4",
"react-native-web": "0.11.7",
"react-native-webview": "^8.1.2"

使用的 React Native 代码：

<WebView
    source={{uri: 'https://www.somedomain.com/'}}
    style={{marginTop: 22, flex: 1}}
    injectedJavaScript={this.state.contentScript}
    domStorageEnabled={true}
    startInLoadingState={true}
    onMessage={this.receiveMessage}
    ref={this.props.webview}
/>

网页版上只有红色边框，而 Android 版则可以正常加载。

不存在错误。这可能是一个已知问题吗？但我在任何地方都找不到报道。

Answer 1

目前WebViewexpo-web 不支持。检查平台兼容性以获取更多信息。

但如果你想加载你的WebView内部expo-web，请将其放置在里面iframe，如下所示，

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

export default class App extends React.Component {
  render() {
    return Platform.OS === "web" ? (
      <iframe src="https://www.somedomain.com/" height={'100%'} width={'100%'} />
    ) : (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ uri: "https://www.somedomain.com/" }}
          style={{marginTop: 22, flex: 1}}
        />
      </View>
    )
  }
}

希望这对您有帮助。如有疑问，请放心。