私の状態が設定されるまで、私は最初にレンダリングしているコンポーネントSplashScreenを持っています。私は何とか私のwebviewが読み込まれている間にこのコンポーネントを表示する方法を見つけたいと思っています。私はonLoadEndを私のwebviewに追加して、読み込みが完了したらメッセージを返すように見えます。問題はスプラッシュスクリーンを最初に読み込んで状態を変更するのを待つときですonLoadEndはwebviewがまだないので実際には変更されませんレンダリングされる。これを行うには良い方法がありますか?React-Native:Webviewがロードされるまでローディング画面を表示
4
A
答えて
17
私の解決策は実際には非常に簡単でした.WebViewコンポーネントには、私にとっては機能しないparam renderLoadingがあります。私は、startInLoadingStateも定義する必要があると考えていました。
だから私のWebViewのは次のように何とかなります
<WebView
ref={MY_REF}
source={source}
renderLoading={this.renderLoading}
startInLoadingState
/>
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でかなり初心者であるため、これらの変更をアニメートする可能性があるかどうかはわかりません。
編集:これは私のアプローチだろうスピナー/負荷要素に
9
を隠して、コメントを追加しました:
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
が表示されている間に読み込みを開始します。
関連する問題
- 1. ブラックベリーのローディング画面の表示方法
- 2. ロードに時間がかかり、ローディングが表示されます。
- 3. タブバーがAndroidにロードされるまでスプラッシュ画面を表示する方法
- 4. iOSローディング画面 - Default.png
- 5. asp.netのローディング画面
- 6. BlackBerryのローディング画面
- 7. 中断されたメッセージがブラウザ画面に表示され、ブラウザ画面を表示できません。
- 8. UIViewController画面が表示されない
- 9. スプラッシュ画面が表示されない
- 10. pygame画面が表示されない
- 11. 全画面表示でスナックバーが表示されない
- 12. ボタンをクリックするとランダムに表示される画像が全画面で表示されます
- 13. Ionic - 最初の画像がロードされるまでスプラッシュ画面を表示する
- 14. Flash Actionscript 3.0ローディング画面
- 15. iOS&AndroidのAS3ローディング画面
- 16. 画面をクリックするまで画像が表示されません。iOS
- 17. プレビュー画像に白い画面が表示されますか?
- 18. Androidが画面に表示されている画面に項目を表示しています
- 19. フッタが小さい画面で表示される
- 20. iOS ImageViewが画面いっぱいに表示されず、ボタンが画面下部に表示されない
- 21. JFrameで全画像が全画面表示されない
- 22. キーボードがランドスケープモードで全画面表示されます
- 23. ボタンがブートストラップで全画面表示されています
- 24. ImageViewをListViewにロードしてから、画面に表示されます。
- 25. 2番目の起動時にローディング画面が中央に表示されない
- 26. 一部の画面で画面が正しく表示されないLibgdx
- 27. UIViewControllerのサブクラスで黒い画面が表示される
- 28. AS3 FLVPlaybackフルスクリーンモードで黒い画面が表示される
- 29. 新しいViewControllersで黒い画面が表示される
- 30. QOpenGLWidgetテクスチャマッピングで黒い画面が表示される
これは私を助けました。魅力のように動作します。 renderLoadingの場合は、 'renderLoading = {()=> {return( )' のような矢印関数を使用することもできますが、これは私にとっては少しバグがあります。 デフォルトローカル関数: 'function renderLoading(){ return( ); } 'あなたが説明したようにロードすると、中央の中央に配置されます 私は理由が分かりませんが、これは誰かが時間を節約するのに役立ちます:) –
suther
ありがとう、これが行く方法です、またはsutherコメント 'renderLoading = {()=> {return( )} 'しかし、ローダーの位置は、関数の宣言や呼び出しとは関係ありません! ActivityIndicatorコンポーネントのスタイルを設定しない場合は、水平に中央に表示されます。' ' –
razbard