React-Native：顯示加載屏幕直到加載webview

我目前有一個SplashScreen組件，我將首先渲染，直到我的狀態被設置。我想以某種方式找到一種方法，如何仍然顯示這個組件，而我的webview加載。我將onLoadEnd添加到了我的webview中，看起來好像當我的消息在完成加載後返回時，問題是如果我先加載splashscreen並等待狀態在onEndEnd上更改，但實際上不會更改，因爲webview尚未渲染。有沒有一個好的方法來做到這一點？React-Native：顯示加載屏幕直到加載webview

來源

2016-09-28 NinetyHH

我的解決方案其實很簡單，WebView組件可以有param renderLoading，這對我來說並不奏效，我發現這是因爲還需要定義startInLoadingState。

所以我的WebView看起來在某種程度上是這樣的：

<WebView 
    ref={MY_REF} 
    source={source} 
    renderLoading={this.renderLoading} 
    startInLoadingState 
/>

來源

2016-11-17 08:56:05 NinetyHH

這幫了我很多。奇蹟般有效。對於renderLoading，你甚至可以使用一個箭頭函數，如： 'renderLoading = {（）=> {return（}' 但是這對我也有一點小Bug如果你通過arrow-Funktion它被放置在上面，centerd 在默認本地函數： '函數renderLoading（）{ 回報（）; } '和像您所描述loadign它，它很好地centerd在中間。屏幕我不知道爲什麼，但也許這有助於某人節省一些時間:) – suther

謝謝，這是要走的路，或作爲薩瑟評論'renderLoading = {（）=> {return（）}'但裝載程序的位置與你聲明或調用你的函數無關！如果你不設計你的ActivityIndicator組件，它將會出現在頂部以橫向爲中心。爲了使ti居中verticaly也添加樣式如下： '' – razbard

我有一個類似的問題，我設法與這個暫時解決它：

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中仍然非常新手。

編輯：增加了隱藏微調/加載部件

來源

2016-09-28 23:07:04 uRTLy

這將是我的做法：

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> 
    ) 
}

這種方式，web視圖呈現，但它被放置在SplashScreen後面。因此，在顯示SplashScreen時，webview開始加載。

來源

2016-09-28 23:32:30

貌似在這種情況下，我的狀態不發生變化，閃屏其加載只是在屏幕的頂部。 – NinetyHH

你把WebView的源碼？ –

是的，我只是將這段代碼添加到我的 – NinetyHH

React-Native：顯示加載屏幕直到加載webview

回答

相關問題