【发布时间】：2021-05-02 13:43:28
【问题描述】：
我尝试按照 https://github.com/wonday/react-native-pdf 的说明进行操作，并克隆了 repo 以尝试支持他们提供的示例，但我无法使其正常工作。
示例代码为：
/**
* 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,
}
});
我还尝试使用自述文件中提供的示例，但无法使其正常工作。
示例代码在这里：
/**
* 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,
}
});
我也尝试关注https://www.pdftron.com/blog/mobile/how-to-build-a-pdf-viewer-react-native/，但我也无法让它发挥作用。
问题
以前有没有人遇到过这个问题，或者可以帮助我获得一个启动和运行的基本示例？
【问题讨论】：
-
好的，你写了你尝试过哪个库，然后......问题是什么？
-
问题，我没有收到错误，也没有看到 PDF。我是一个全新的反应本地人，并试图简单地获得一个有效的概念验证，并希望得到一些帮助。
标签： android ios reactjs react-native mobile