react-native 不使用 startInLoadingState={true} 在 WebView 中呈现远程 PDF

Question

我最近添加<ActivityIndicator>了我的代码，以便在外部链接加载到<WebView>.

这适用于许多不同的链接，除了那些带有 PDF 的链接，例如：http : //www.pdf995.com/samples/pdf.pdf

有了这个，它最初显示加载器，然后呈现空白页面。在 iOS 中，当我尝试向下滚动时，我确实看到了页码。它只是不显示 PDF 内容。

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

我需要让它与显示在 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 查看器 URL 中。这在 iOS 和 Android 中运行良好，也可以渲染ActivityIndicator。

带修复的演示小吃：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

PS 如果出现更好的答案，我会更改已接受的答案。