使用 react-native-view-pdf 显示空白视图 [英] Use react-native-view-pdf shows blank view

问题描述

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

解决方案

试试这个:

import React, {Component} from 'react';从'react-native'导入{平台、样式表、文本、视图}；从'react-native-view-pdf/lib/index'导入PDFView；const 指令 = Platform.select({ios: '按 Cmd+R 重新加载，\n' + 'Cmd+D 或摇动开发菜单'，安卓:'在键盘上双击 R 重新加载，\n' +'摇动或按下开发菜单的菜单按钮',});常量资源 = {文件:Platform.OS === 'ios' ?'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',网址:'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'，base64: 'JVBERi0xLjMKJcfs ...',};类型道具 = {};导出默认类 App extends Component{使成为() {const 资源类型 = 'url';返回 (<视图样式={{flex: 1, witdth: '100%'}><Text style={styles.welcome}>欢迎使用 React Native！</Text><PDF查看淡入持续时间={250.0}样式={{ 弹性:1 }}资源={'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'}资源类型={资源类型}onLoad={(事件)=>console.log(`PDF 渲染自 ${event}`)}onError={(error) =>console.log('无法渲染 PDF'，错误)}/><文本>底部文本</文本></查看>);

I use react-native-view-pdf, React Native version is 0.59.5

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

I just follow the tutorial but show blank screen. I can't figure it out. I don't know why they are showing empty screens.

Step1:

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

Step2:

react-native link react-native-view-pdf

Use the code and type 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,
  },
});

Show black screen:

解决方案

Try this:

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 显示空白视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！