Question

我使用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,
  },
});

显示黑屏：

Answer 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,
    }
});

我最近使用了这个库，它的表现非常好。

Answer 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>
    );

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

2 个答案: