react-native-doc-viewer文檔預覽

react-native項目要求實現(xiàn)word,excel,pdf,mp4,png等格式附件圖片的在線預覽，最終選用react-native-doc-viewer實現(xiàn)，

具體步驟如下

1、安裝react-native-doc-viewer

(1) npm install react-native-doc-viewer --save

(2) react-native link react-native-doc-viewer

2、修改源代碼

（1） 因為react-native-doc-viewer已經(jīng)很久沒有更新了，所以SdkVersion是23，比較低，將它修改成如下圖所示：

（2）找到下圖中左側(cè)的文件，將右側(cè)紅圈圈里面的代碼注釋掉

至此，所以安裝和配置完成，下面是寫代碼步驟

3、代碼實現(xiàn)

import OpenFile from 'react-native-doc-viewer';
//預覽附件
viewAttachment(attachment) {
   let fileTypeArr = ['xls', 'ppt', 'doc', 'xlsx', 'pptx', 'docx', 'png', 'jpg', 'pdf', 'mp4', 'txt'];
   if (fileTypeArr.indexOf(attachment.fileSuffix) >= 0) {
      if (Platform.OS === 'ios') {
         OpenFile.openDoc([{
            url: attachment.filePath,
            fileNameOptional: attachment.fileName
         }], (error, url) => {
            if (error) {
               console.log(error);
            } else {
               console.log(url)
            }
         })
      } else {
         OpenFile.openDoc([{
            url: attachment.filePath, 
            fileName: attachment.fileName,
            cache: false,
            fileType: attachment.fileSuffix
         }], (error, url) => {
            if (error) {
               console.error(error);
            } else {
               console.log(url)
            }
         });
      }
   } else {
      Toast.show('app端暫不支持此種格式附件預覽，請去pc端預覽');
   }
}

應用會打開手機上對應的第三方軟件，做預覽。 

react-native初體驗的總結(jié)

一、前提知識點

• RN中文網(wǎng)鏈接 https://www.react-native.cn/docs/getting-started
• html、JavaScript、css基礎(chǔ)
• es6+等新的概念
• react、redux相關(guān)知識
• 如果需要用ts語法，還需要了解typescript相關(guān)知識點
• 數(shù)據(jù)請求，官方中有推薦的，我這里選擇axios

二、開發(fā)前后相關(guān)的一些配置

react-native相關(guān)知識點可以參考官方文檔進行學習，總結(jié)了幾點基本的

• RN開發(fā)需要的環(huán)境(mac,windows)，參考官方文檔即可
• RN開發(fā)利用相關(guān)腳手架初始化項目，參考官方文檔即可
• RN打包需要用的簽名創(chuàng)建，及打包流程，參考官方文檔即可
• RN開發(fā)過程中用到的模擬器（我這里用的mumu模擬器）
• RN開發(fā)過程中用到的debugger工具（推薦使用react-native-debugger）

三、開發(fā)項目中用到的知識

學習的時候，我這里主要從以下幾方面進行學習的，列出的大部分是npm包名

• 設(shè)置app啟動圖片 react-native-splash-screen
• 頁面跳轉(zhuǎn) react-navigation 起到路由的作用
• 數(shù)據(jù)存儲 @react-native-async-storage/async-storage
• 嵌入web react-native-webview
• 使用相機 react-native-camera
• 掃描二維碼 react-native-qrcode-scanner
• 文件上傳 react-native-document-picker react-native-doc-viewer
• 圖片上傳 react-native-image-picker
• 輪播圖 react-native-swiper
• 背景漸變 react-native-linear-gradient
• 頂部狀態(tài)欄 react-native 提供的組件 StatusBar
• toast提示 react-native-root-toast，會用到 react-native-root-siblings
• 手勢 react-native-gesture-handler
• 高德地圖 react-native-amap3d

四、ui庫

• react-native-element
• and-design-mobile-rn
• teaset

五、項目搭建

官網(wǎng)中提供的初始化模板

npx react-native init projectName --template react-native-template-typescript

六、根據(jù)需要安裝對應依賴

建議加上npm進行依賴搜索，或者去npm官網(wǎng)搜索，eg: react-native-camera npm

因為我這里項目初始化的rn版本為0.63.4，所以大部分依賴都是直接link之后就可以正常使用的。

七、開發(fā)和調(diào)試

靜態(tài)頁面的開發(fā)其實跟web端一樣，組件的合理利用就行。會涉及一些交互

1.物理返回鍵

const handle = ()=>{
? ? // 響應事件處理
}
// 訂閱
BackHandler.addEventListener('hardwareBackPress', handle);
// 移除
BackHandler.removeEventListener('hardwareBackPress', handle);

2.跨頁面通信

const handle = (params)=>{
? ? // 響應事件處理
}
// 訂閱
DeviceEventEmitter.addListener('eventKey', handle);
// 移除
DeviceEventEmitter.removeListener('eventKey', handle);

// 觸發(fā)
DeviceEventEmitter.emit('eventKey', params);

3. formData文件上傳

圖片或者文件上傳的時候，需要關(guān)閉debugger模式，不然會出現(xiàn)異常。 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論