使用 expo 在 react-native 中打开 PDF 文件答案

【问题标题】：Open PDF file in react-native with expo使用 expo 在 react-native 中打开 PDF 文件
【发布时间】：2019-03-04 23:11:28
【问题描述】：

我正在将 React Native 与 Expo 一起使用，并且我正在尝试打开一个 pdf 文件。我的资产文件夹中已经有了该文件。我宁愿不分离博览会。

我尝试使用react-native-pdf 喜欢：

import React, { Component } from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';

import Pdf from 'react-native-pdf';

export default class PDFExample extends Component {
  render() {
    const source = {uri:'bundle-assets://test.pdf'};
    return (
      <View style={styles.container}>
        <Pdf
          source={source}
          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,
  }
});

但没有成功。发生了许多错误，我对这个包失去了信心。所以我正在寻找一个更简单的解决方案。

问题：
如何在另一个应用程序中打开资产文件。比如，让 ios 或 android 选择哪个应用程序将打开 pdf 文件。我可以在没有分离的情况下只使用 expo 中的托管代码吗？

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题。
目前没有找到解决办法。
查看适用于 Expo 38+ 的解决方案。 stackoverflow.com/a/69117954/12960247

标签： react-native pdf expo

【解决方案1】：

通过 yarn 或 npm 安装以下库：
yarn add react-native-webview expo-file-system expo-constants rn-pdf-reader-js

然后你可以像这样显示一个PDF：

import React from ‘react’
import { ScrollView, View, } from ‘react-native’
import PDFReader from ‘rn-pdf-reader-js’

export default class Publications extends React.Component {
  render() {
      return (
          <PDFReader
               source={{
               uri: ‘http://www.africau.edu/images/default/sample.pdf’,
               }}
          />
       )
    }
}

【讨论】：