使用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);
+                }            
             });

  };