現時点では、状態が設定されるまで最初にレンダリングするコンポーネントSplashScreenがあります。私のウェブビューがロードされている間にこのコンポーネントを表示する方法をどうにか見つけたいです。 onLoadEndをWebビューに追加し、ロードが完了したらメッセージが返されるように見えます。問題は、最初にスプラッシュスクリーンをロードし、状態が変更されるのを待つと、WebViewがまだないためにonLoadEndが実際に変更されないことですレンダリングされます。これを行う方法はありますか?
私のソリューションは実際には非常に簡単でした。WebViewコンポーネントには、パラメータrenderLoadingがありますが、これは私にとっては機能していませんでした。startInLoadingStateも定義する必要があるためでした。
したがって、私のWebViewは次のようになります。
<WebView
ref={MY_REF}
source={source}
renderLoading={this.renderLoading}
startInLoadingState
/>
これは私のアプローチでしょう:
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の読み込みが開始されます。
私は同様の問題を抱えていて、これで一時的にそれを解決することができました:
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。
編集:スピナー/ロード要素の非表示を追加