Question

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

这对于许多其他链接都适用，除了带有PDF的链接，例如： http://www.pdf995.com/samples/pdf.pdf

以此，它首先显示加载程序，然后呈现空白页。在iOS中，尝试向下滚动时确实会看到页码。它只是不显示PDF内容。

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

我需要使它与显示在iOS和Android中的加载程序一起使用。

Expo Snack演示：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

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

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

1 个答案: