使用 Expo Go 显示 PDF 时出现问题

Question

我正在开发一个 React Native 应用程序，我需要在其中显示 PDF 文件。我尝试了两种不同的方法，一种使用

react-native-webview

，另一种使用

react-native-pdf

，但我都遇到了问题。

这就是项目的创建方式：

-

npx create-expo-app my-app --template

-

 Blank (TypeScript)

首先，使用

react-native-webview

，下载 PDF，而不是在应用程序中显示：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import WebView from 'react-native-webview';

interface PDFViewerProps {
    uri: string;
}

const PDFViewer: React.FC<PDFViewerProps> = ({ uri }) => {
    return (
        <View style={styles.container}>
            <WebView
                originWhitelist={['*']}
                source={{
                    uri: `${uri}?inline=true`,
                    headers: {
                        'Content-Disposition': 'inline' 
                    }
                }}
                style={styles.webview}
            />
        </View>
    );
};

但是，它不是内联显示 PDF，而是触发应用程序中的下载。服务器配置为处理内联内容处置。

其次，当我切换到使用

react-native-pdf

时，我遇到运行时错误：

类型错误：无法读取未定义的属性“fs”

这是代码片段：

import React from "react";
import { StyleSheet, View } from "react-native";
import Pdf from "react-native-pdf";

interface URLType {
  uri: string;
}

const PDFViewer: React.FC<URLType> = ({ uri }) => {
  return (
    <View style={styles.container}>
      <Pdf
        source={{ uri }}
        style={styles.pdf}
        onError={(error) => {
          console.error(error);
        }}
      />
    </View>
  );
};

预期的结果是在应用程序中显示 PDF 内容而不下载它，我想使用尽可能最直接、最可靠的方法。任何有关这些错误发生原因的见解或替代解决方案将不胜感激。

Answer 1

每当我们需要添加与expo go不兼容的包时，请按照以下开发模式流程

1. 确保拥有 eas 帐户并通过 eas build:configure 链接到项目

2. npx expo 安装 expo-dev-client

3. eas build --profile开发--platform android / eas build --profiledevelopment-simulator--platform ios

4. 在您的设备中安装生成的版本

5. 在项目终端运行命令npx expo start --dev-client

6. 在应用程序的输入网址文本输入中输入生成的网址。

这可用于测试/开发，例如在应用程序 PDF 阅读器中。 就是这样！！！！