ReactNative WebView не отображается в Интернете, но отлично работает на Android

Используемые версии:

"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 все загружается нормально.

Нет ошибок. Может это известная проблема? Но нигде не могу найти сообщения об этом.


react-native expo react-native-webview
person TheE    schedule 08.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В настоящее время WebView не поддерживается expo-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>
    )
  }
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

person SDushan    schedule 09.03.2020
comment
Хорошо, так что это имеет смысл. Но, к сожалению, использование iframe с тем же URL-адресом приводит к ошибке Refused to display 'someurl' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".. Забавно, что WebView отлично работает с URL-адресом, он использует какую-то другую технику? - person TheE; 09.03.2020
comment
Ну, это, конечно, имеет смысл, ха, забыл, что я не использовал хром без отключенной безопасности. - person TheE; 09.03.2020