Загрузка веб-представления во вложенный компонент с использованием библиотеки rn-placeholder в React Native - PullRequest
0 голосов
/ 18 декабря 2018

Мое приложение использует веб-просмотры для нашего домашнего экрана, корзины, страниц товаров и т. Д., И я хочу добавить вид заполнителя (скелет, думаю, фид Facebook при загрузке в приложении), пока веб-просмотр полностью не загрузит URL.Для этого я решил использовать стороннюю библиотеку rn-placeolder .Библиотека кажется хорошей, и она работает, оборачивая компонент, а затем, когда значение true передается в его реквизит, оно отображает дочерние элементы вместе с ним.Я недавно обнаружил, что это создает проблему, так как кажется, что веб-представление не начинает загружаться, если оно вложено в компонент, есть ли способ обойти это?Если вы использовали библиотеку раньше, делали ли вы это раньше?Я опубликую свой код ниже.

import HomePlaceholder from '../../placeholders/skeleton-views/home-placeholder'

class WebContainer extends PureComponent {
  constructor(props) {
  super(props)

  this.state = {
      isLoading: false
  }
  this.stopLoading = this.stopLoading.bind(this);
}

render () {
  return (
      <HomePlaceholder onReady={ this.state.isLoading }>
        <View style={{ flex: 1 }}>
          <Webview 
            scalesToFitPage={ true }
            bounces={ false }
            style={{ flex: 1 }}
            ref={ this.setWebViewRef }
            originWhiteList={ Platform.OS === 'android' ? whiteListedUrls : ['*'] }
            source={{ uri: this.props.displayUrl }}
            javaScriptEnabled={ true }
            onShouldStartLoadWithRequest={ this.onShouldStartLoadWithRequest }
            onNavigationStateChange={ this.onNavigationStateChange }
            onLoadStart= { this.onLoadStart }
            onLoad={ this.onLoad }
            onLoadEnd={ this.stopLoading }
            renderError={ this.renderError }
            dataDetectorTypes="none"
            userAgent={ getUserAgent }
        />
      </View>
    </HomePlaceholder>
  );
}

  stopLoading () {
    this.setState({ isLoading: true });
  }

}

По сути, как работает мой код, когда веб-контейнер имеет состояние, независимо от того, загружается он или нет, запускается ли false, затем, когда веб-просмотр завершает загрузку, он вызывает функциюstopLoading на его onLoadEnd опоре, это должно позволить веб-просмотру показывать, но заполнитель никогда не уходит, и при дальнейшей проверке веб-просмотр никогда не начинает загружаться, есть идеи, как мне заставить это работать?Я думал о загрузке веб-просмотра отдельно, а затем передать его в детстве на вид заполнителя, но на данный момент это скорее идея.Любая помощь будет оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...