从 Expo React Native 项目中的 URL 查看 pdf [英] View pdf from URL in Expo React Native Project

问题描述

我一直在尝试使用 react native 打开一个 pdf 文件，但我尝试的每个库都会产生错误.我尝试了以下代码:

I have been trying to open a pdf file using react native, but every library that I try generates an error. I tried the code below:

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 (evalating 'rnfetchblob.documentdir')

However, after installing react-native-pdf, my project stop working and returns: null is not an object (evaluating 'rnfetchblob.documentdir')

在 react native 中从 URL 打开和显示 pdf 的最佳方式是什么?

What is the best way to open and display a pdf from a URL in react native?

谢谢

推荐答案

Expo 不支持安装原生模块，react-native-pdf 是原生模块.可能的解决方案:

Expo doesn't support installing native modules and react-native-pdf is a native module. Possible solutions:

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

1. If you really want to use native modules, you should use react-native-cli or eject expo project. You can find a more detailed answer in the repository FAQ section (https://github.com/wonday/react-native-pdf#faq).

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

You can always open PDF files in the phone browser by using react-native's Linking API.

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

There is a package to display PDF files in expo projects (https://github.com/xcarpentier/rn-pdf-reader-js). Never used the package, and it also seems very sketchy as it supports only the Android platform, and on iOS, you would need to use WebView to display pdf. Also, it doesn't have a lot of downloads on npm and the project itself is prettry stale.

这篇关于从 Expo React Native 项目中的 URL 查看 pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！