在网站完成登录之前如何隐藏 WebView？ [反应本机]

Question

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

Answer 1

我自己还没有尝试过，但我认为像下面这样的东西应该可以满足您的需求。 WebView 具有加载相关的属性，如 onLoad、onLoadStart、onLoadEnd、onError 等。在这些属性中，您可以更新组件的状态。每当您调用 this.setState 时，组件的 render() 将再次触发，并根据当前状态呈现您指定的视图。

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

Answer 2

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

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？ [反应本机]

How can I hide the WebView until the website's finished logining? [react native]

javascript

webview

react-native

react-native-android