react-native 中的 WebView 出现错误“加载页面时遇到错误”

Question

有人遇到这个问题吗？我正在使用 WebView 通过 Facebook 登录我的网页。如果用户登录成功，它会将用户重定向到另一个屏幕。

我正在使用“react-native-router-flux”。但是，我遇到了一个问题“加载页面时遇到错误”。它确实将我重定向到“PresentationScreen”组件，但我仍然收到警告并且抽屉是我的“PresentationScreen”不再存在。

据我了解，因为服务器正在尝试将我重定向回本地主机。但在

onNavigationStateChange

中，我已经将其重定向到另一个组件。

这是错误：

{canGoForward: false, code: -6, canGoBack: false, description: "net::ERR_CONNECTION_REFUSED", loading: false, target: 57, url: "http://localhost:8100/?operation=%2Flogin%2Ffacebook&success=true&message=Account+already+exists"}

这是我的登录页面组件：

import { Actions as NavigationActions } from 'react-native-router-flux';

class LoginScreen extends React.Component {

  constructor (props: LoginScreenProps) {
    super(props);
  }

  handleNavigationStateChange = (event) => {
    if (event.url.includes('operation=%2Flogin%2Ffacebook&success=true')) {
      NavigationActions.presentationScreen();
    }
  };

  render () {
    return (
      <WebView source={{uri: 'https://api.taskuparkki.fi/api/login/facebook'}}
               onNavigationStateChange = {this.handleNavigationStateChange}
      />
    )
  }
}

如果有人找到解决方案，我将不胜感激。

Answer 1

通过 IP 服务器地址更改“localhost”，我认为在您的情况下这将是您的 IP。您应该在 Facebook 开发者控制台上进行更改。

如果有效请告诉我。

Answer 2

<WebView source={{uri:'https://api.taskuparkki.fi/api/login/facebook'}}
         onNavigationStateChange = {this.handleNavigationStateChange}
         allowFileAccess={true}
         scalesPageToFit={true}
         originWhitelist={['*']}
         />

---

 allowFileAccess={true}
 scalesPageToFit={true}
 originWhitelist={['*']}

---

https://github.com/facebook/react-native/issues/21104#issuecomment-421962289

Answer 3

我遇到了同样的错误，这是我解决此问题的方法：

1. 重新启动我的 Android 设备

2. 从网址中删除了 https:// 当我删除 https:// 时，techhelpbd.com/gitdown 抛出此错误，然后它工作正常。

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

export default function Browser() {
  return (
    <WebView
      source={{ uri: 'techhelpbd.com/gitdown' }}
    />
  );
}