如何在呈現視圖後開始加載WebView？

Question

我是新來的react-native，並且試圖製作一個通過3個WebViews（使用react-native-swiper，swiper包含3個WebViews）的組件，每個組件都有動畫。該代碼是這樣的 -

<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工作正常，但顯示在後續的網頁視圖的時候，他們的動畫都已經完成了，因爲他們已經完成加載，而仍然被顯示的第一個網頁視圖。有沒有什麼辦法可以延緩URL加載，直到Swiper準備好在屏幕上顯示它？

Answer 1

例如：

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

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

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

組shouldShowWebView到false初始值。每當你想顯示它時，設置值爲true。例如在componentDidMount中。並在渲染檢查它的值是否爲true或不。 （有條件渲染） 希望這會有所幫助。