React Native WebView for Android 不显示 PDF 和 Word 文件答案

【问题标题】：React Native WebView for Android not displaying PDF and Word filesReact Native WebView for Android 不显示 PDF 和 Word 文件
【发布时间】：2019-09-29 13:22:58
【问题描述】：

我正在开发一个关于发布个人简历的新项目。

我需要在应用程序中显示用户的简历。

我的标准 WebView 代码如下，并且在 iOS 上运行良好。

import * as React from 'react';
import { WebView } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <WebView
            style={{flex: 1, backgroundColor: 'white'}}
            source={{
              uri: 'http://www.africau.edu/images/default/sample.pdf',
            }}
            bounces={true}
            useWebKit={true}
            scrollEnabled={true}
          />
    );
  }
}

此代码还需要在 Android 上运行。当我在 Android 上尝试时，页面什么也没有显示。

You can try this on Expo Snack.

【问题讨论】：

标签： react-native webview react-native-webview

【解决方案1】：

Android Webview 无法显示 PDF 文件。有一个与此问题相关的问题。您可以从this link查看它

您的问题有多种解决方案，您可以为自己选择最相关的一种。

1) 使用react-native-pdf-view

2) 使用 Google 文档作为查看器。尝试在您的 Webview 中加载此 URL http://docs.google.com/gview?embedded=true&url=http://www.africau.edu/images/default/sample.pdf

3)Use Chrome Custom Tabs。

【讨论】：

我使用第二个选项，因为我希望 pdf 在应用程序中打开。问题是有时我会得到没有错误日志的白屏。有人遇到过这个问题吗？
@itdoesntwork 是的，我遇到了这个问题。我认为 Google 的文档查看器中有一个 bug。

【解决方案2】：

我选择了选项 2，但遇到了一个 Google 文档查看器 error，所以我做了这个 hacky 的事情来检查是否没有加载内容以刷新 web 视图。

const retries = 10

const PdfViewerScreen = ({ route, navigation }: Props) => {
  const { pdfUrl } = route.params || {}
  const webview = useRef(null)
  const [tries, setTries] = useState(1)
  const [reset, setReset] = useState(Date.now())

  const isAndroid = Platform.OS === 'android'
  const base = !isAndroid
    ? ''
    : 'https://docs.google.com/gview?embedded=true&url='

  // Use date as reset to be able to 
  // reload the webview
  const uri = `${base}${pdfUrl}?t=${reset}`

  // Js code to get baseURI when 
  // webview is loaded. docs.google.com has a bug
  // where no content is returned.
  const myInjectedJs = `    
    (function(){ 
      window.ReactNativeWebView.postMessage(window.document.baseURI);
    })();`

  const onMessage = (event: WebViewMessageEvent) => {
    // Issue does not occur in iOS
    if(!isAndroid) return

    const baseURI = event.nativeEvent.data
    if (tries === retries) navigation.goBack()

    if (baseURI !== uri) {
      setReset(Date.now())
      setTries(tries + 1)
    }
  }

  return (
    <>
      <WebView
        ref={webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        style={tailwind(`flex-1`)}
        injectedJavaScript={myInjectedJs}
        source={{ uri }}
        onMessage={onMessage}
        renderLoading={() => (
          <View style={tailwind('w-full h-full')}>
            <Loading />
          </View>
        )}
      />
    </>
  )
}

【讨论】：