代码之家  ›  专栏  ›  技术社区  ›  Morton

使用反应本机视图PDF显示空白视图

  •  0
  • Morton  · 技术社区  · 6 年前

    我用 react-native-view-pdf ,react本机版本为0.59.5

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

    我只是按照教程,但显示空白屏幕。 我想不出来。我不知道为什么他们会显示空屏幕。

    步骤1:

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

    第二步:

    react-native link react-native-view-pdf
    

    使用代码和类型 react-native run-ios

    应用程序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,
      },
    });
    

    显示黑屏: enter image description here

    0 回复  |  直到 6 年前
        1
  •  1
  •   Hardik Virani    6 年前

    你可以在图书馆下面试试,它会帮助你实现,这是 排名靠前 图书馆

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

    我最近用过这个图书馆,它和预期的一样好。