Xem PDF trong React Native

Question

Có ai vui lòng cung cấp mã mẫu để hiển thị PDF trong React Native không? iOS và Android.

Đây là những gì tôi đã cố gắng:

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

^Điều này dẫn đến một màn hình Red of Death với "Không thể giải quyết module" lỗi.

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

^Điều này cho biết thông báo "Lỗi tải trang" trong WebView. "Không tìm thấy URL được yêu cầu trên máy chủ này"

Tôi biết iOS có khả năng hiển thị PDF trong UIWebView. Tôi cho rằng Android có thể làm tương tự. Phải có một cái gì đó trong cách nguồn được chỉ định mà tôi đang thiếu.

Answer 1

Được rồi, cho các thế hệ tương lai, đây là cách tôi giải quyết vấn đề này:

Cập nhật 13 tháng 9 năm 2017:

Có một NPM mô-đun mới mà làm cho toàn bộ quá trình này dễ dàng hơn nhiều. Tôi sẽ đề nghị sử dụng nó đi về phía trước thay vì câu trả lời ban đầu của tôi dưới đây:

react-native-pdf

Sau khi cài đặt, render PDF dễ dàng như này:

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> 
    } 
} 

Chỉ cần đặt pdf thực tế của bạn trong android/app/src/main/assets/pdf thư mục của dự án của bạn.

gốc trả lời:

iOS

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

Bí quyết là bạn cần phải bao gồm My.pdf vào dự án của bạn trong Xcode và chắc chắn rằng nó được thêm vào để xây dựng mục tiêu của bạn.

Chỉ cần sao chép nó vào thư mục dự án React Native của bạn là không đủ. Nó phải là một phần của dự án Xcode.

Android

Dường như Android đã không cung cấp một trình xem PDF bản địa cho đến 5.0 (Lollipop). Để giải quyết vấn đề này, tôi phải sử dụng ba kỹ thuật chính:

1. Kéo PDF ra khỏi gói APK của tôi và lưu trữ trong thư mục files cho ứng dụng của tôi. Câu trả lời này SO was very helpful trong việc hoàn thành này:

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

tôi tinh chỉnh mã một chút để các tập tin sẽ không một sdcard nhưng vào thư mục ứng dụng của tôi files.Dưới đây là những gì tôi thêm vào tôi 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); 
    } 
} 

Tôi cũng chắc chắn rằng PDF của tôi là trong thư mục assets/pdf dưới android/app/src/main

2. sau đó tôi sử dụng gói react-native-fs để có được URL tuyệt đối sang PDF của tôi, mà bây giờ trong files thư mục:

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

3. với tất cả những điều này tại chỗ, tôi đã sử dụng react-native-pdf-view để thực sự tải và hiển thị 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} /> 
   } 
   

Chúc may mắn!