使用到的元件

• react-native-fs 檔案下載元件 GitHub - johanneslumpe/react-native-fs: Native filesystem access for react-native

• react-native-pdf-view pdf顯示元件 GitHub - cnjon/react-native-pdf-view: React Native PDF View


元件安裝

cd到你的專案目錄下，執行下面的命令安裝

npm install react-native-fs --save
react-native link react-native-fs
npm i react-native-pdf-view --save
react-native link react-native-pdf-view
 

示例程式碼

首先下載pdf檔案到本地，react-native-pdf-view元件現在只能支援顯示手機本地pdf。

1. varDownloadFileOptions={

2.            fromUrl: pdfDownloadURL,// URL to download file from

3.            toFile:this.pdfPath         // Local filesystem path to save the file to

4. }

5. var result = RNFS.downloadFile(DownloadFileOptions);

6.        console.log

   (result);

7. var _this =this;

8.        result.then(function(val){

9.            _this.setState({

10.                isPdfDownload:true,

11. });

12. },function(val){

13.            console.log('Error Result:'+ JSON.stringify(val));

14. }

15. ).catch(function(error){

16.            console.log(error.message);

17. });

顯示pdf，因為可能有多頁，所以在開啟第一頁後，利用onLoadComplete事件獲取到一共有多少頁，然後動態載入後面的幾頁

1. render(){

2. if(!this.state.isPdfDownload){

3. return(

4. <View style={styles.container}>

5. <Text>Downloading</Text>

6. </View>

7. );

8. }

9. var pages =[];

10. for(var i =2; i <this.state.pageCount +1; i++){

11.            pages.push(

12. <PDFViewref={(pdf)=>{this.pdfView = pdf;}}

13.                    key={"sop"+ i}

14.                    path={this.pdfPath}

15.                    pageNumber={i}

16.                    style={styles.pdf}/>

17. );

18. }

19. return(

20. <ScrollView style={styles.pdfcontainer}>

21. <PDFViewref={(pdf)=>{this.pdfView = pdf;}}

22.                    key="sop"

23.                    path={this.pdfPath}

24.                    pageNumber={1}

25.                    onLoadComplete={(pageCount)=>{

26. this.setState({ pageCount: pageCount });

27.                        console.log(`pdf共有: ${pageCount}頁`);

28. }}

29.                    style={styles.pdf}/>

30. {pages.map((elem, index)=>{

31. return elem;

32. })}

33. </ScrollView>

34. )

35. }

完整程式碼： GitHub地址：https://github.com/forrest23/reacttest