リアクションネイティブのプリロードuriが表示されないウェブビュー

Question

私は以下のように反応してwebviewを持っています。私はthis.state.url設定すると

 <WebView 
     source={{ uri: this.state.url }} 
     style={ this.state.style } 
     javaScriptEnabled = { true } 
     startInLoadingState = {true} 
     onLoad = {this.showPage()} 
     onLoadEnd = {this.showPage()} 
     /> 

私はすぐにURLをロードするためのWebViewが好きで、その後のonLoadロードまたはonLoadEnd後WebViewの内容を示してのshowPage関数を呼び出します。私はこれを動作させるように見えることはできません - ウェブビューはDOM内で見えるときにのみURLを読み込みます。これを行う方法はありますか？

Answer 1

最も簡単な解決策は、WebViewのrenderLoadingプロパティを使用することです。ローダーロジックをカスタマイズする必要がある場合は、次のようなものを使用できます。

class WebScreen extends Component { 
    ... 
    render() { 
    const { isLoading } = this.state; 
    return (
     <View style={styles.container}> 
     <ReactWebView 
      style={styles.webview} 
      source={{ uri: url }} 
      onLoadStart={::this.onLoadStart} 
      onLoadEnd={::this.onLoadEnd} 
     /> 
     {isLoading && (
      <WebViewLoader style={styles.loader} /> 
     )} 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 

    loader: { 
    position: 'absolute', 
    top: 0, 
    right: 0, 
    bottom: 0, 
    left: 0, 
    zIndex: 4, 
    backgroundColor: 'white' 
    } 
});