React-Native：Webviewがロードされるまでローディング画面を表示

Question

私の状態が設定されるまで、私は最初にレンダリングしているコンポーネントSplashScreenを持っています。私は何とか私のwebviewが読み込まれている間にこのコンポーネントを表示する方法を見つけたいと思っています。私はonLoadEndを私のwebviewに追加して、読み込みが完了したらメッセージを返すように見えます。問題はスプラッシュスクリーンを最初に読み込んで状態を変更するのを待つときですonLoadEndはwebviewがまだないので実際には変更されませんレンダリングされる。これを行うには良い方法がありますか？

Answer 1

私の解決策は実際には非常に簡単でした.WebViewコンポーネントには、私にとっては機能しないparam renderLoadingがあります。私は、startInLoadingStateも定義する必要があると考えていました。

だから私のWebViewのは次のように何とかなります

<WebView 
    ref={MY_REF} 
    source={source} 
    renderLoading={this.renderLoading} 
    startInLoadingState 
/> 

Answer 2

私は同様の問題を抱えていたし、私はこれを一時的にそれを解決するために管理：

loadEnd() { 
this.setState({ webViewLoaded: true }): 
} 
render() { 
const { webViewLoaded } = this.state; 
return (<View> 
     {!webViewLoaded && <LoadingComponent /> } -- or spinner, whatever 

     <WebView 
      style={(webViewLoaded) ? styles.webView : styles.loading} 
      onLoadEnd={() => this.loadEnd.bind(this)} /> 
     </View); 

} 

const styles = StyleSheet.create({ 
    webView: { -- your styles ---}, 
    loading: { 
    width: 0, 
    heigt: 0 
    } 
}); 

ないまさにこれがあなたを助けていますが、同様のアプローチを試みることができるかどうか確認してください。私はこれをおそらくもっと便利に変えるだろう。 ImがまだReact Nativeでかなり初心者であるため、これらの変更をアニメートする可能性があるかどうかはわかりません。

編集：これは私のアプローチだろうスピナー/負荷要素に

Answer 3

を隠して、コメントを追加しました：

constructor(props){ 
    super(props); 
    this.state = { webviewLoaded: false }; 
} 

_onLoadEnd() { 
    this.setState({ webviewLoaded: true }); 
} 

render() { 
    return(
     <View> 
      {(this.state.webviewLoaded) ? null : <SplashScreen />} 
      <WebView onLoadEnd={this._onLoadEnd.bind(this)} /> 
     </View> 
    ) 
} 

この方法では、WebViewのがレンダリングされますが、それはSplashScreenの背後に配置されています。したがって、WebビューはSplashScreenが表示されている間に読み込みを開始します。