React-Native: показывать экран загрузки до загрузки webview

на данный момент у меня есть компонент SplashScreen, который я рендеринг сначала, пока мое состояние не установлено. Я хотел бы как-то найти способ, как все еще показывать этот компонент во время загрузки моего webview. Я добавил onLoadEnd в свой webview и похоже, что я получаю свое сообщение обратно, когда его законченная загрузка, проблема в том, что если я загружу сначала splashscreen и дождусь изменения состояния onLoadEnd на самом деле никогда не будет изменен, потому что webview еще не отображается. Есть ли хороший метод как это сделать?

9
android react-native reactjs webview

3 ответов

мое решение было на самом деле довольно простым, компонент WebView может иметь param renderLoading, который для меня не работал, я понял, что это потому, что также необходимо определить startInLoadingState.

поэтому мой WebView выглядит как-то так:

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

Это был бы мой подход:

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. Таким образом, webview начинает загрузку во время SplashScreen отображается.

9

У меня была похожая проблема и мне удалось временно решить с помощью этого:

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.

edit: добавлено скрытие элемента spinner / loading

3