2017-02-14 25 views
0

私は反応ネイティブの方が新しく、3つのWebViews(react-native-swiperを使用し、swiperには3つのWebViewが含まれています)をスワイプするコンポーネントを作成しようとしています。
ビューのレンダリング後にWebViewの読み込みを開始するにはどうすればいいですか?

<Swiper autoplay={true} loop={false} >     
    <View style={this.styles.slide1}> 
     <WebView source = {require(‘./Page1.html')} /> 
    </View> 
    <View style={this.styles.slide2}> 
     <WebView source = {require(‘./Page2.html')}/> 
    </View> 
    <View style={this.styles.slide3}> 
     <WebView source = {require(‘./Page3.html’)}/> 
    </View> 
</Swiper> 

最初のWebViewが正常に動作しますが、最初のWebViewがまだ表示されている間、彼らはロードが終了したので、その後のWebViewsが表示された時点で、そのアニメーションはすでに完了している - のコードは次のようなものです。スワイパーが画面に表示する準備が整うまで、URLの読み込みを遅らせる方法はありますか?例えば

答えて

0

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

componentDidMount(){ 
this.setState({shouldShowWebView: true}) 
} 

render(){ 
return(
<View>{this.state.shouldShowWebView ? <WebView /> : <View />}</View> 
); 
} 

falseshouldShowWebViewの初期値を設定します。表示したいときはいつでも、値をtrueに設定します。例えば、componentDidMountにあります。値がtrueかどうかをレンダリングチェックします。 (条件付きレンダリング) これが役立つことを願っています。

関連する問題