从 Expo React Native Project 中的 URL 查看 pdf

Question

我一直在尝试使用 react native 打开一个 pdf 文件，但是我尝试的每个库都会产生一个错误。我试过下面的代码：

import React, { Component } from 'react';
import Pdf from 'react-native-pdf';

class OpenBGReport extends Component {
  render() {
    const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};

    return (
      <View style={styles.container}>
        <Pdf
                    source={source}
                    onLoadComplete={(numberOfPages,filePath)=>{
                        console.log(`number of pages: ${numberOfPages}`);
                    }}
                    onPageChanged={(page,numberOfPages)=>{
                        console.log(`current page: ${page}`);
                    }}
                    onError={(error)=>{
                        console.log(error);
                    }}
                    style={styles.pdf}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    pdf: {
        flex:1,
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height,
    }
});

export default OpenBGReport;

但是，安装 react-native-pdf 后，我的项目停止工作并返回： null is not an object (evaluating 'rnfetchblob.documentdir')

在 React Native 中从 URL 打开和显示 pdf 的最佳方法是什么？

谢谢

Answer 1

Expo 不支持安装本机模块，react-native-pdf是本机模块。可能的解决方案：

1. 如果你真的想使用原生模块，你应该使用react-native-cli或弹出 expo 项目。您可以在存储库常见问题部分 ( https://github.com/wonday/react-native-pdf#faq ) 中找到更详细的答案。

2. 您始终可以使用 react-native 的LinkingAPI在手机浏览器中打开 PDF 文件。

3. 有一个包可以在博览会项目中显示 PDF 文件（https://github.com/xcarpentier/rn-pdf-reader-js）。从来没有用过这个包，而且看起来也很粗略，因为它只支持Android平台，而在iOS上，你需要使用WebView来显示pdf。此外，它在 npm 上的下载量并不多，而且项目本身也很陈旧。

Answer 2

我发现使用 Expo 处理 PDF 文件的最佳方法是使用缓冲区将它们转换为 Base64 文件，将它们存储在文件系统中并共享它们：

  import { Buffer } from "buffer";
  import * as FileSystem from "expo-file-system";
  import * as Sharing from "expo-sharing";

  res = await // fetch PDF

  const buff = Buffer.from(res, "base64");
  const base64 = buff.toString("base64");

  const fileUri =
    FileSystem.documentDirectory + `${encodeURI("name-of-the-pdf")}.pdf`;


  await FileSystem.writeAsStringAsync(fileUri, base64, {
    encoding: FileSystem.EncodingType.Base64,
  });


  Sharing.shareAsync(res);

注意：您需要安装buffer,expo-file-system和expo-sharing