React Native 中的静态 PDF 使用 React

本文介绍了React Native 中的静态 PDF 使用 React-Native-Pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试按照

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

示例代码在这里:

/*** 版权所有 (c) 2017 年至今，Wonday (@wonday)* 版权所有.** 此源代码是在 MIT 风格的许可下获得许可的* 此源代码树的根目录中的 LICENSE 文件.*/从反应"导入反应；从'react-native'导入{样式表，尺寸，视图}；从'react-native-pdf'导入PDF；导出默认类 PDFExample 扩展 React.Component {使成为() {const source = {uri:'samples.leanpub/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,}});

我也尝试关注 www.pdftron/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 github/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) * 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:'samples.leanpub/thereactnativebook-sample.pdf',cache:true}; //let source = {uri:'samples.leanpub/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) * 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:'samples.leanpub/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 www.pdftron/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