如何使用react-native-webview打开本地文件

8ehkhllq 于 2023-08-07 发布在 React

关注(0)|答案(1)|浏览(209)

无法使用react-native-webview打开本地文件
我正在React Native app中的react-native-webview中打开一个本地文件。该文件位于应用程序的内部目录中，具体来说就是FileSystem. documentDirectory。我已经尝试使用WebView组件，并将源属性设置为文件的URI，但它似乎无法按预期工作。
下面是我使用的代码片段：

import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import * as FileSystem from 'expo-file-system';

const App = () => {
  const fileName = 'file.pdf';
  const fileUri = `${FileSystem.documentDirectory}${fileName}`;

  return (
    <View style={{ flex: 1 }}>
      <WebView style={{ flex: 1 }} source={{ uri: fileUri }} />
    </View>
  );
};

export default App;

字符串
但是，当我运行应用程序时，我得到一个错误或WebView显示一个空白屏幕。我已确保文件file.pdf存在于正确的位置。
我是否遗漏了什么，或者我应该采取不同的方法来使用react-native-webview打开本地文件？如有任何帮助，我们将不胜感激。谢谢你，谢谢

react-native

来源：https://stackoverflow.com/questions/76821084/how-to-open-local-file-with-react-native-webview

1条答案

按热度按时间

ejk8hzay1#

根据this，GitHub上的问题：
PDF查看不是Android Webview的功能，甚至不是Android上Chrome浏览器的功能。
但是，如果您的PDF文件是在线托管的，您可以使用Google云端硬盘作为代理来渲染PDF文件，如下所示：

import { WebView } from 'react-native-webview';

const yourPdfURL="https://example/document.pdf"

render(
    <WebView
        source={{ uri: https://docs.google.com/gview?embedded=true&url=${yourPdfURL)}}}
        style={{ width:"100%", height:"100%"}}
    />
)

字符串
如果您确实需要渲染本地PDF文件，请使用react-native-pdf模块，如以下代码：

import Pdf from 'react-native-pdf';

[...]

render (
    <Pdf
        source={uri:"file:///absolute/path/to/xxx.pdf"}
    />
)

型
如果这个答案帮助你解决了问题，别忘了投赞成票并标记为解决方案。

赞(0）回复(0）举报 2023-08-07

我来回答

如何使用react-native-webview打开本地文件

1条答案

相关问题

热门标签

最新问答