Question

我尝试制作一个显示WebView网站的组件，然后自动填充用户信息以进行登录。我通过使用WebView道具将一些javascript注入injectedJavascipt来照顾自动填充部分。
但问题是我想要隐藏WebView（登录页面），显示加载屏幕，并且仅在用户登录网站时显示它。由于我无法以任何方式与网站进行互动，因此我的解决方法是将flex的{{1}}支柱设置为0，当登录完成时，使用{{1将其设置为1 }}。
无论如何我都知道网站何时完成登录，那么我可以显示WebView？如果没有，有没有其他方法可以隐藏我的setNativeProps()并在该网站完成登录后显示它？
tl; dr：基本上我希望我的WebView在后台加载一些东西，同时显示一些加载屏幕，并在完成这些操作时发出信号。

Answer 1

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

Answer 2

我自己没有尝试过，但我认为以下内容应该做你想做的事情。 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})}/>
        }
    }
}

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

2 个答案: