Просмотр PDF в React Native

может ли кто-нибудь предоставить пример кода для отображения PDF в React Native? iOS и Android.

это то, что я пробовал:

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

^ это приводит к Красному экрану смерти с ошибкой "невозможно разрешить модуль".

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

^ это дает сообщение "Ошибка загрузки страницы" в WebView. "Запрошенный url не найден на этом сервере"

Я знаю, что iOS способна показывать PDF в UIWebView. Я предполагаю, что Android может сделать тот же. Должно быть что-то в том, как указан источник, что мне не хватает.

8
pdf react-native webview

2 ответов

ладно, для будущих поколений, вот как я решил эту проблему:

Обновлено 13 Сентября 2017:

существует новый модуль 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 project было недостаточно. Это должно было быть частью самого проекта Xcode.

Android

похоже, что Android не предоставлял собственный просмотрщик PDF до 5.0 (Lollipop). Чтобы обойти это, мне пришлось использовать три ключевых метода:--15-->

  1. вытащите PDF из моего пакета APK и сохраните его в files папка для моего приложения. Этот ответ SO был очень полезен в выполнении этого:

Android: Как скопировать файлы из папки "активы" на sdcard?

я немного изменил код, чтобы файл не собирался в sdcard но для моего приложения . Вот что я добавил к своему 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);
    }
}

я также убедился, что мой PDF находится в под android/app/src/main

  1. затем я использовал react-native-fs пакет, чтобы получить абсолютный URL-адрес моего PDF, который теперь находится в :

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

  2. со всем этим на месте, я использовал 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} />
}

удачи!

15

простое решение этой проблемы-установить <WebView> source/uri для этого:

https://drive.google.com/viewerng/viewer?embedded=true&url={your pdf url}’
1