React Native 中的静态 PDF 使用 React-Native-Pdf [英] Static PDF in React Native using React-Native-Pdf

问题描述

我尝试按照

我还尝试使用自述文件中提供的示例，但也无法使其正常工作.

示例代码在这里:

/*** 版权所有 (c) 2017 年至今，Wonday (@wonday.org)* 版权所有.** 此源代码是在 MIT 风格的许可下获得许可的* 此源代码树的根目录中的 LICENSE 文件.*/从反应"导入反应；从'react-native'导入{样式表，尺寸，视图}；从'react-native-pdf'导入PDF；导出默认类 PDFExample 扩展 React.Component {使成为() {const source = {uri:'http://samples.leanpub.com/thereactnativebook-sa​​mple.pdf',cache:true};//const source = require('./test.pdf');//仅限 ios//const source = {uri:'bundle-assets://test.pdf'};//const source = {uri:'file:///sdcard/test.pdf'};//const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};返回 (<视图样式={styles.container}><PDF来源={来源}onLoadComplete={(numberOfPages,filePath)=>{console.log(`页数:${numberOfPages}`);}}onPageChanged={(page,numberOfPages)=>{console.log(`当前页面:${page}`);}}onError={(error)=>{控制台日志(错误)；}}onPressLink={(uri)=>{console.log(`链接按下:${uri}`)}}style={styles.pdf}/></查看>)}}const 样式 = StyleSheet.create({容器: {弹性:1，justifyContent: 'flex-start',alignItems: '中心',边距顶部:25，},pdf:{弹性:1，宽度:Dimensions.get('window').width,高度:Dimensions.get('window').height,}});

我也尝试关注 https://www.pdftron.com/blog/mobile/how-to-build-a-pdf-viewer-react-native/ 而我也无法让它正常工作.>

问题

有没有人以前遇到过这个问题，或者可以帮我得到一个启动和运行的基本示例?

解决方案

最终的答案是我必须生成 assets 文件夹，然后添加到 XCode，然后将文件添加到 assets 文件夹中.

要将文件添加到 Xcode，我必须在 XCode 中打开 ios 文件夹，然后我必须右键单击库"，将文件添加到项目".然后单击资产文件夹，这是我运行 react-native build 命令和 react-native run-ios 的时间

I tried to follow the instructions from https://github.com/wonday/react-native-pdf and cloned the repo to tried to stand up the example that they provided but I was unable to get it to work.

The sample code is:

/**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * All rights reserved.
 *
 * This source code is licensed under the MIT-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react';
import {
    StyleSheet,
    TouchableHighlight,
    Dimensions,
    SafeAreaView,
    View,
    Text,
    Platform
} from 'react-native';

import Pdf from 'react-native-pdf';
import Orientation from 'react-native-orientation-locker';

const WIN_WIDTH = Dimensions.get('window').width;
const WIN_HEIGHT = Dimensions.get('window').height;


export default class PDFExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            scale: 1,
            numberOfPages: 0,
            horizontal: false,
            width: WIN_WIDTH
        };
        this.pdf = null;
    }

    _onOrientationDidChange = (orientation) => {
        if (orientation == 'LANDSCAPE-LEFT'||orientation == 'LANDSCAPE-RIGHT') {
          this.setState({width:WIN_HEIGHT>WIN_WIDTH?WIN_HEIGHT:WIN_WIDTH,horizontal:true});
        } else {
          this.setState({width:WIN_HEIGHT>WIN_WIDTH?WIN_HEIGHT:WIN_WIDTH,horizontal:false});
        }
    };

    componentDidMount() {
        Orientation.addOrientationListener(this._onOrientationDidChange);
    }

    componentWillUnmount() {
        Orientation.removeOrientationListener(this._onOrientationDidChange);
    }

    prePage = () => {
        let prePage = this.state.page > 1 ? this.state.page - 1 : 1;
        this.pdf.setPage(prePage);
        console.log(`prePage: ${prePage}`);
    };

    nextPage = () => {
        let nextPage = this.state.page + 1 > this.state.numberOfPages ? this.state.numberOfPages : this.state.page + 1;
        this.pdf.setPage(nextPage);
        console.log(`nextPage: ${nextPage}`);
    };

    zoomOut = () => {
        let scale = this.state.scale > 1 ? this.state.scale / 1.2 : 1;
        this.setState({scale: scale});
        console.log(`zoomOut scale: ${scale}`);
    };

    zoomIn = () => {
        let scale = this.state.scale * 1.2;
        scale = scale > 3 ? 3 : scale;
        this.setState({scale: scale});
        console.log(`zoomIn scale: ${scale}`);
    };

    switchHorizontal = () => {
        this.setState({horizontal: !this.state.horizontal, page: this.state.page});
    };

    render() {
        //let source = Platform.OS === 'windows' ?  {uri: 'ms-appx:///test.pdf'} : {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
        //let source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
        //let source = {uri: 'ms-appx:///test.pdf'}
        let source = require('./test.pdf');  // ios only
        //let source = {uri:'bundle-assets://test.pdf'};

        //let source = {uri:'file:///sdcard/test.pdf'};


        return (
            <SafeAreaView style={styles.container}>
                <View style={{flexDirection: 'row'}}>
                    <TouchableHighlight disabled={this.state.page === 1}
                                        style={this.state.page === 1 ? styles.btnDisable : styles.btn}
                                        onPress={() => this.prePage()}>
                        <Text style={styles.btnText}>{'-'}</Text>
                    </TouchableHighlight>
                    <View style={styles.btnText}><Text style={styles.btnText}>Page</Text></View>
                    <TouchableHighlight disabled={this.state.page === this.state.numberOfPages}
                                        style={this.state.page === this.state.numberOfPages ? styles.btnDisable : styles.btn}
                                        testID='NextPage'
                                        onPress={() => this.nextPage()}>
                        <Text style={styles.btnText}>{'+'}</Text>
                    </TouchableHighlight>
                    <TouchableHighlight disabled={this.state.scale === 1}
                                        style={this.state.scale === 1 ? styles.btnDisable : styles.btn}
                                        onPress={() => this.zoomOut()}>
                        <Text style={styles.btnText}>{'-'}</Text>
                    </TouchableHighlight>
                    <View style={styles.btnText}><Text style={styles.btnText}>Scale</Text></View>
                    <TouchableHighlight disabled={this.state.scale >= 3}
                                        style={this.state.scale >= 3 ? styles.btnDisable : styles.btn}
                                        onPress={() => this.zoomIn()}>
                        <Text style={styles.btnText}>{'+'}</Text>
                    </TouchableHighlight>
                    <View style={styles.btnText}><Text style={styles.btnText}>{'Horizontal:'}</Text></View>
                    <TouchableHighlight style={styles.btn} onPress={() => this.switchHorizontal()}>
                        {!this.state.horizontal ? (<Text style={styles.btnText}>{'false'}</Text>) : (
                            <Text style={styles.btnText}>{'true'}</Text>)}
                    </TouchableHighlight>

                </View>
                <View style={{flex:1,width: this.state.width}}>
                    <Pdf ref={(pdf) => {
                        this.pdf = pdf;
                    }}
                         source={source}
                         scale={this.state.scale}
                         horizontal={this.state.horizontal}
                         onLoadComplete={(numberOfPages, filePath,{width,height},tableContents) => {
                             this.setState({
                                numberOfPages: numberOfPages 
                             });
                             console.log(`total page count: ${numberOfPages}`);
                             console.log(tableContents);
                         }}
                         onPageChanged={(page, numberOfPages) => {
                             this.setState({
                                 page: page
                             });
                             console.log(`current page: ${page}`);
                         }}
                         onError={(error) => {
                             console.log(error);
                         }}
                         style={{flex:1}}
                         />
                </View>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    btn: {
        margin: 2,
        padding: 2,
        backgroundColor: "aqua",
    },
    btnDisable: {
        margin: 2,
        padding: 2,
        backgroundColor: "gray",
    },
    btnText: {
        margin: 2,
        padding: 2,
    }
});

This the screen output of trying to use the example

I also tried to use the example that is provided in the read me and unable to get that to work as well.

That sample code is here:

/**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * All rights reserved.
 *
 * This source code is licensed under the MIT-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

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,JVBERi0xLjcKJc..."};

        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);
                    }}
                    onPressLink={(uri)=>{
                        console.log(`Link presse: ${uri}`)
                    }}
                    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,
        height:Dimensions.get('window').height,
    }
});

I also attempted to try follow https://www.pdftron.com/blog/mobile/how-to-build-a-pdf-viewer-react-native/ and I was unable to get that to work as well.

Question

Has anyone ran into this issue before or can help me get a basic example of this up and running?

解决方案

The answer ended up being that I had to generate the assets folder, then add to XCode, then add the files to the assets folder.

To add files to Xcode I had to open up the ios folder in XCode, then I had to right click Libraries, Add Files to "project" then click the assets folder, this is when I ran the react-native build command and react-native run-ios

这篇关于React Native 中的静态 PDF 使用 React-Native-Pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！