使用 react-native-view-pdf 显示空白视图

Posted 2023-03-15

【中文标题】使用 react-native-view-pdf 显示空白视图

【英文标题】：Use react-native-view-pdf shows blank view

【发布时间】：2019-04-22 06:28:27

【问题描述】：

我用react-native-view-pdf，React Native 版本是0.59.5

https://github.com/rumax/react-native-PDFView

我只是按照教程操作，但显示空白屏幕。 我想不通。我不知道他们为什么显示空白屏幕。

第一步：

npm install react-native-view-pdf --save

第二步：

react-native link react-native-view-pdf

使用代码并输入react-native run-ios

App.js：

import React, Component from 'react';
import Platform, StyleSheet, Text, View from 'react-native';
import PDFView from 'react-native-view-pdf/lib/index';

const instructions = Platform.select(
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
);

const resources = 
  file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
  url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
  base64: 'JVBERi0xLjMKJcfs...',
;

type Props = ;
export default class App extends Component<Props> 
  render() 
    const resourceType = 'url';

    return (
      <View style=styles.container>
        <Text style=styles.welcome>Welcome to React Native!</Text>
        <PDFView
          fadeInDuration=250.0
          style= flex: 1 
          resource='https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'
          resourceType=resourceType
          onLoad=(event) => console.log(`PDF rendered from $event`)
          onError=(error) => console.log('Cannot render PDF', error)
        />
        <Text>Bottom text</Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

显示黑屏：

【问题讨论】：

你试过 PDFView 给一个固定的高度和宽度吗？

是的，我试过style= height: 300, weight: 300 还是一样。

我找到了解决办法，用style= flex: 1, width: 200 设置样式会看到PDF。

对我来说，它不起作用。我仍然看到上面的页码。

【参考方案1】：

你可以试试下面的库，它会帮助你实现，这是排名靠前的库

see here

安装

npm library

npm install rn-fetch-blob --save
npm install react-native-pdf --save

react-native link rn-fetch-blob
react-native link react-native-pdf

Example

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

import Pdf from 'react-native-pdf';

export default class PDFExample extends React.Component 
    render() 
        const source = uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true;
        //const source = require('./test.pdf');  // ios only
        //const source = uri:'bundle-assets://test.pdf';

        //const source = uri:'file:///sdcard/test.pdf';
        //const source = uri:"data:application/pdf;base64,...";

        return (
            <View style=styles.container>
                <Pdf
                    source=source
                    onLoadComplete=(numberOfPages,filePath)=>
                        console.log(`number of pages: $numberOfPages`);
                    
                    onPageChanged=(page,numberOfPages)=>
                        console.log(`current page: $page`);
                    
                    onError=(error)=>
                        console.log(error);
                    
                    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,
    
);

我最近用过这个库，和预期的一样好。

【讨论】：

谢谢，我知道这个库。但它有额外的链接rn-fetch-blob，我只是想弄清楚react-native-view-pdf上发生了什么。

如果您点击相同的url pdf，它将帮助您获取 pdf 的缓存数据

没有错误。它将显示事件PDF rendered from Object

我找到了解决方案，用style= flex: 1, width: 200 设置样式会看到PDF。感谢您的帮助。

【参考方案2】：

试试这个：

import React, Component from 'react';
import Platform, StyleSheet, Text, View from 'react-native';
import PDFView from 'react-native-view-pdf/lib/index';

const instructions = Platform.select(
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
);

const resources = 
  file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
  url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
  base64: 'JVBERi0xLjMKJcfs...',
;

type Props = ;
export default class App extends Component<Props> 
  render() 
    const resourceType = 'url';

    return (
      <View style=flex: 1, witdth: '100%'>
        <Text style=styles.welcome>Welcome to React Native!</Text>
        <PDFView
          fadeInDuration=250.0
          style= flex: 1 
          resource='https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'
          resourceType=resourceType
          onLoad=(event) => console.log(`PDF rendered from $event`)
          onError=(error) => console.log('Cannot render PDF', error)
        />
        <Text>Bottom text</Text>
      </View>
    );