如何在网站完成登录之前隐藏 WebView?[反应原生] [英] How can I hide the WebView until the website's finished logining? [react native]

问题描述

我正在尝试使用 WebView 制作一个显示网站的组件，然后自动填充用户信息以进行登录.我通过使用 injectedJavascipt 道具将一些 javascript 注入到 WebView 中来处理自动填充部分.
但问题是我想隐藏 WebView(登录页面)，显示加载屏幕并且仅在用户登录网站时显示它.由于我无法以任何方式与网站交互，我的解决方法是将 WebView 的 flex 属性设置为 0，并在登录完成后将其设置为 1使用 setNativeProps().
我是否可以知道网站何时完成登录，以便我可以显示WebView?如果没有，有没有其他方法可以隐藏我的 WebView 并在该网站完成登录后显示它?
tl;dr:基本上我希望我的 WebView 在后台加载一些东西，同时显示一些加载屏幕并在这些事情完成时向我发出信号.

I'm trying to make a component that display a website with WebView and then auto-fill the user information to login. I took care the auto-fill part by injecting some javascript into the WebView with the injectedJavascipt prop.
But the thing is I want to hide the WebView (the sign-in page), show a loading screen and only display it when the user is logged into the website. Since I can't interact with the website in any way, my workaround is to set the flex prop of the WebView to 0 and when the login complete, set it to 1 using setNativeProps().
Is there anyway for me to know when the website has finished logining so I can then show the WebView? If not, is there any other way to hide my WebView and display it when that website's done logining?
tl;dr: basically i want my WebView to load some stuffs in the background while some loading screens are displayed and signal me when those things are done.

推荐答案

Hacky 但也许您可以在用户完全登录后检查 URL，然后更改 flex 属性?

Hacky but maybe you could check for the URL when the user is fully logged in and then change the flex property?

navChanged(navState) {
    if(navState.url.match(loggedInURL){
      //set flex to 1
    };
  }
<WebView
  source={{uri: this.state.url}}
  onNavigationStateChange={this.navChanged}
  startInLoadingState={true}
  renderLoading={
    ()=> {
      return (<ActivityIndicator /> )
    }
  }
/>

这篇关于如何在网站完成登录之前隐藏 WebView?[反应原生]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！