在React Native中查看PDF

Question

任何人都可以提供用于在React Native中显示PDF的示例代码吗？ iOS和Android。

这是我已经试过：

render: function() { 
    return <WebView 
     source={require('./my.pdf')} 
     /> 
    } 

^这导致死亡的“无法解析模块”错误红屏。

render: function() { 
    return <WebView 
     source={{uri: 'my.pdf'}} 
     /> 
    } 

^这给WebView中的“Error Loading Page Error”消息。 “在此服务器上找不到请求的URL”

我知道iOS能够在UIWebView中显示PDF。我认为Android可以做同样的事情。在指定来源的方式中必须有一些我缺少的东西。

Answer 1

好，为子孙后代，这里就是我解决了这个问题：

更新2017年9月13日：

有一个新的NPM模块，使整个过程变得更加容易。我会建议使用它向前发展，而不是我的下面原来的答案的：一旦安装

react-native-pdf

，渲染PDF是那么容易，因为这样的：

export default class YourClass extends Component { 
    constructor(props) { 
    super(props); 
    this.pdf = null; 
    } 

    render() { 
    let yourPDFURI = {uri:'bundle-assets://pdf/YourPDF.pdf', cache: true}; 

    return <View style={{flex: 1}}> 
     <Pdf ref={(pdf)=>{this.pdf = pdf;}} 
     source={yourPDFURI} 
     style={{flex: 1}} 
     onError={(error)=>{console.log(error);}} /> 
    </View> 
    } 
} 

只要把你的实际PDF在android/app/src/main/assets/pdf您项目的文件夹。

原来的答案：

的iOS

render: function() { 
    return <WebView source={{uri: 'My.pdf'}}/> 
} 

的技巧是，你需要包括My.pdf到Xcode中的项目，并确保它添加到您的构建目标。

仅将其复制到您的React Native项目文件夹中是不够的。它必须是Xcode项目本身的一部分。

的Android

看来，Android的没有提供原生PDF浏览器，直到5.0（棒棒堂）。为了解决这个问题，我不得不使用三个关键技术：

1. 的PDF拉出我的APK包并将其存放在我的应用程序的文件夹files。这个所谓的答案是完成这一非常有帮助：

Android: How to copy files from 'assets' folder to sdcard?

我调整一下代码，以便文件不打算的sdcard但我的应用程序的文件夹files。这是我加入到我的MainActivity.java

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

    AssetManager assetManager = getAssets(); 
    String[] files = null; 

    try { 
     files = assetManager.list("pdf"); 
    } catch (IOException e) { 
     Log.e("tag", "Failed to get asset file list.", e); 
    } 

    if (files != null) for (String filename : files) { 
     InputStream in = null; 
     OutputStream out = null; 

     try { 
     in = assetManager.open("pdf/" + filename); 

     File outFile = new File(getFilesDir(), filename); 
     out = new FileOutputStream(outFile); 
     copyFile(in, out); 
     Log.e("tag", "Copy was a success: " + outFile.getPath()); 
     } catch(IOException e) { 
     Log.e("tag", "Failed to copy asset file: " + "pdf/" + filename, e); 
     } 
     finally { 
      if (in != null) { 
       try { 
        in.close(); 
       } catch (IOException e) { 
        // NOOP 
       } 
      } 
      if (out != null) { 
       try { 
        out.close(); 
       } catch (IOException e) { 
        // NOOP 
       } 
      } 
     } 
    } 
} 

private void copyFile(InputStream in, OutputStream out) throws IOException { 
    byte[] buffer = new byte[1024]; 
    int read; 
    while((read = in.read(buffer)) != -1){ 
     out.write(buffer, 0, read); 
    } 
} 

我也android/app/src/main

下完全相信我的PDF是在 assets/pdf文件夹

我则利用react-native-fs包来获得绝对URL到我的PDF，这是现在在files文件夹：

var RNFS = require('react-native-fs'); 
var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf'; 

有了这一切的地方，我用react-native-pdf-view实际加载和显示PDF：

import PDFView from 'react-native-pdf-view'; 

render: function() { 
    var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf'; 

    return <PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    src={absolutePath} 
    style={ActharStyles.fullCover} /> 
} 

祝你好运！