获取后在 react-native-webview 中显示 PDF。仅限 iOS答案

【问题标题】：Display a PDF in react-native-webview after fetch. iOS only获取后在 react-native-webview 中显示 PDF。仅限 iOS
【发布时间】：2020-01-27 23:51:33
【问题描述】：

我正在尝试在 WebView 中显示下载的 pdf。我正在使用react-native-webview (https://github.com/react-native-community/react-native-webview) 和rn-fetch-blob 下载它。

基本上我有一个只是 WebView 组件的渲染：

if(this.state.path)
    return
        <WebView
            source={{ uri: this.state.path }}
            style={{ flex: 1 }}
        />
else return <Loader />

在下载 PDF 之前，该组件不会被渲染。下载完成后，我将路径保存到状态并显示 WebView。

PDF已正确下载，我可以手动转到我在该状态下获得的路径并打开PDF。

如果我将我从 uri 中下载 pdf 的 URL 放在这样的 uri 中（例如，这是 google 政策）：

source = {{ uri : "https://static.googleusercontent.com/media/www.google.com/it//intl/it/policies/privacy/google_privacy_policy_it.pdf" }}

它可以正常工作并在WebView 中显示pdf。

如果我把我的 pdf 路径放在：

source = {{ uri : path/to/file.pdf}}

我得到一个空白屏幕。

有没有办法将文件系统 pdf 显示到 WebView 中？

请注意，我需要使用 WebView、react-native-pdf 和 react-native-pdf-view 不是解决方案

【问题讨论】：

标签： ios react-native

【解决方案1】：

经过一些尝试，我找到了一个解决方案，让我可以通过 fetch 下载 PDF 并使用本地路径显示 PDF。基本上下载时我必须给保存的文件一个路径.pdf并添加道具useWebKit和originWhitelist。

<WebView
    source={{ uri: this.state.path }}
    style={{ flex: 1 }}
    originWhitelist={["*"]}
    useWebKit
/>

当我通过rn-fetch-blob 获取低谷时，我必须在fetchConfig 中指定一个路径并使用path 属性。

path: path/to/download/dir/file.pdf

【讨论】：

【解决方案2】：

使用类似的东西

source={require('path of your local html file')}

而不是

source = {{ uri : path/to/file.pdf}}

【讨论】：

【解决方案3】：

注意：在 iOS 平台上，每次访问文件系统时目录路径都会改变。所以如果你需要在 iOS 上读取文件，你需要先获取 dir 路径并与它连接文件名。

let arr = fileResp.uri.split('file://');
        PATH_TO_THE_FILE = arr[1];

Reference to Source

【讨论】：