反应本性不使用startInloadingState = {true}在WebView中渲染远程PDF

Question

我最近在我的代码中添加了 <ActivityIndicator>，以便在<WebView>中的外部链接加载时显示加载程序。

此链接可用于许多不同的链接，除了使用PDF的链接：http://www.pdf995.com/samples/pdf.pdf

这样，它最初显示加载程序，但随后呈现空白页。在iOS中，当我尝试向下滚动时，我确实会看到页码。它只是不显示PDF内容。

如果我从<WebView>中删除startInLoadingState={true}，则可以正常工作，但没有显示加载程序。

我需要与在-IOS和Android中显示的加载程序一起工作。

博览会小吃演示：https：//snack.expo.io/rk8o0tsse

代码：

import React from 'react';
import {
  ActivityIndicator,
  Dimensions,
  WebView
} from 'react-native';
export default class InAppBrowser extends React.Component {
  renderLoadingView() {
    const dimensions = Dimensions.get('window');
    const marginTop = dimensions.height/2 - 75;
    return (
      <ActivityIndicator
        animating = {true}
        color = '#0076BE'
        size = 'large'
        hidesWhenStopped={true}
        style={{marginTop}}
      />
    );
  }
  render() {
    const uri = 'http://www.pdf995.com/samples/pdf.pdf';
    return (
      <WebView
        renderLoading={this.renderLoadingView}
        source={{uri}}
        startInLoadingState={true}
      />
    );
  }
}

我在这里缺少什么？

Answer 1

目前，我要进行以下解决方法：

我将远程PDF URL嵌入到Google Drive Viewer URL中。这在iOS和Android中正常工作，并且也使ActivityIndicator呈现。

fix的演示小吃：https：//snack.expo.io/h1xndz9rn

import React from 'react';
import {
  ActivityIndicator,
  Dimensions,
  WebView
} from 'react-native';
export default class InAppBrowser extends React.Component {
  renderLoadingView() {
    const dimensions = Dimensions.get('window');
    const marginTop = dimensions.height/2 - 75;
    return (
      <ActivityIndicator
        animating = {true}
        color = '#0076BE'
        size = 'large'
        hidesWhenStopped={true}
        style={{marginTop}}
      />
    );
  }
  render() {
    let uri = 'http://www.pdf995.com/samples/pdf.pdf';
    if (/.pdf$/.test(uri)) {
      uri = `https://drive.google.com/viewerng/viewer?embedded=true&url=${uri}`;
    }
    return (
      <WebView
        renderLoading={this.renderLoadingView}
        source={{uri}}
        startInLoadingState={true}
      />
    );
  }
}

来源：https：//github.com/rumax/react-native-pdfview/issues/40#issuecomment-410298445

P.S。如果出现更好的答案，我将更改所接受的答案。