我如何隐藏WebView，直到网站完成登录?(本机)反应

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

本文关键字：网站 反应 本机 登录 何隐藏 隐藏 WebView      更新时间：2023-09-26

我试图使一个组件显示一个网站与WebView，然后自动填写用户信息登录。我照顾自动填充部分注入一些javascript与injectedJavascipt道具的WebView。
但事情是我想隐藏WebView(登录页面)，显示加载屏幕，只有在用户登录到网站时才显示它。由于我无法以任何方式与网站交互，我的解决方法是将WebView的flex prop设置为0，当登录完成时，使用setNativeProps()将其设置为1。
有没有办法让我知道什么时候网站已经完成登录，这样我就可以显示WebView ?如果没有，有没有其他的方法来隐藏我的WebView和显示它时，该网站完成登录?
tl;dr:基本上我希望我的WebView在后台加载一些东西，而一些加载屏幕显示，并在这些事情完成时向我发出信号

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有加载相关的道具，如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})}/>
        }
    }
}
相关文章：