Wie kann ich das WebView verbergen, bis die Webseite fertig ist? [reactive native]

Question

Ich versuche, eine Komponente, die eine Website mit WebView anzeigen und dann automatisch die Benutzerinformationen zur Anmeldung ausfüllen. Ich kümmerte mich um die Auto-Füllung Teil, indem Sie ein wenig Javascript in die WebView mit der injectedJavascipt Prop.
Aber die Sache ist, ich möchte die WebView (die Anmeldeseite) verstecken, zeigen einen Ladebildschirm und nur anzeigen, wenn der Benutzer auf der Website eingeloggt ist. Da ich mit der Website nicht in irgendeiner Weise in Wechselwirkung treten kann, ist meine Abhilfe der flex Stütze der WebView-0 und wenn die Anmeldung abgeschlossen ist, setzen Sie sich auf 1 unter Verwendung von setNativeProps() einzustellen.
Gibt es überhaupt für mich zu wissen, wenn die Website Logins abgeschlossen hat, damit ich dann die WebView zeigen kann? Wenn nicht, gibt es eine andere Möglichkeit, meine WebView zu verstecken und sie anzuzeigen, wenn die Website die Logins abgeschlossen hat?
tl; dr: Grundsätzlich möchte ich meine WebView laden einige Sachen im Hintergrund, während einige Ladebildschirme angezeigt werden und signalisieren mir, wenn diese Dinge erledigt sind.

Answer 1

Hacky aber vielleicht könnten Sie nach der URL suchen, wenn der Benutzer vollständig eingeloggt ist und dann die Flex-Eigenschaft ändern?

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 />) 
    } 
    } 
/> 

Answer 2

Ich habe es selbst nicht versucht, aber ich denke, so etwas wie das folgende tun sollten, was Sie wollen. Die WebView hat Laden ähnliche Requisiten wie onLoad, onLoadStart, onLoadEnd, onError usw. In diesen können Sie Ihre Komponente Zustand aktualisieren. Immer wenn Sie this.setState aufrufen, wird die Komponente render() erneut ausgelöst und basierend auf dem aktuellen Status rendert sie die Ansicht, an die Sie sie senden.

class MyComponent extends Component { 
    constructor(props){ 
     super(props) 
     this.state={ 
      isLoading:false 
     } 
    } 

    render() { 
     if (this.state.isLoading) { 
      return <Spinner visible={true}/> 
     } else 
      return <WebView onLoadStart={() => this.setState({isLoading:true})} onLoadEnd={() => this.setState({isLoading:false})}/> 
     } 
    } 
}