web-dev-qa-db-ja.com

React-Native：WebViewがロードされるまでロード画面を表示

現時点では、状態が設定されるまで最初にレンダリングするコンポーネントSplashScreenがあります。私のウェブビューがロードされている間にこのコンポーネントを表示する方法をどうにか見つけたいです。 onLoadEndをWebビューに追加し、ロードが完了したらメッセージが返されるように見えます。問題は、最初にスプラッシュスクリーンをロードし、状態が変更されるのを待つと、WebViewがまだないためにonLoadEndが実際に変更されないことですレンダリングされます。これを行う方法はありますか？

androidreactjswebviewreact-native
12
NinetyHH

私のソリューションは実際には非常に簡単でした。WebViewコンポーネントには、パラメータrenderLoadingがありますが、これは私にとっては機能していませんでした。startInLoadingStateも定義する必要があるためでした。

したがって、私のWebViewは次のようになります。

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

これは私のアプローチでしょう：

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の後ろに配置されます。そのため、SplashScreenが表示されている間にwebviewの読み込みが開始されます。

11
Jan Franz Palngipang

私は同様の問題を抱えていて、これで一時的にそれを解決することができました：

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

これが正確に役立つかどうかはわかりませんが、同様のアプローチを試すことができます。これをおそらくもっと便利なものに変更するでしょう。私はまだReact Native。

編集：スピナー/ロード要素の非表示を追加

2
uRTLy