使用react-native-pdf 加载Pdf的问题与解决方法

问题描述

在使用React-Native开发过程中,遇到使用react-native-pdf@6.7.4与react-native-oh-tpl/react-native-pdf@6.7.4-0.2.8-beta加载Pdf文件的问题,无法正常显示。

解决方法

加载本地Pdf文件

  • Harmony 平台
    例如pdf文件存放在entry/src/main/resources/rawfile/assets目录下,那么加载的路径可以写成:
<Pdf source={{uri: 'asset:///pdf.pdf'}} />
  • Android 平台
    例如pdf文件存放在app/src/main/assets目录下,那么加载的路径可以写成:
<Pdf source={{uri: 'bundle-assets://pdf.pdf'}} />

加载网络Pdf文件

  • Harmony 平台

<Pdf source={{uri: 'https://example.com/pdf.pdf'}} />

  • Android 平台

<Pdf source={{uri: 'https://example.com/pdf.pdf'}}
trustAllCerts={false} />

另外需要添加补丁内容:添加补丁


diff --git a/node_modules/react-native-pdf/index.js b/node_modules/react-native-pdf/index.js
index b81a141..2b65ee0 100644
--- a/node_modules/react-native-pdf/index.js
+++ b/node_modules/react-native-pdf/index.js
@@ -276,9 +276,6 @@ export default class Pdf extends Component {
if (this._mounted) {
this.setState({progress: received / total});
}

-            })
-            .catch(async (error) => {
-                this._onError(error);
             });

         this.lastRNBFTask

@@ -323,7 +320,9 @@ export default class Pdf extends Component {
.catch(async (error) => {
this._unlinkFile(tempCacheFile);
this._unlinkFile(cacheFile);

-                this._onError(error);

+                if (error.name !== 'ReactNativeBlobUtilCanceledFetch') {
+                    this._onError(error);
+                }            
             });

  };

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容