From 7702b541eb2495bbd0d2bd13e4ff33c7544aad89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=81=E9=B9=8F=E9=A3=9E?= Date: Tue, 4 Jun 2024 17:55:24 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#I9TIY4]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0reacr-native-zip-archive=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-zip-archive.md | 526 ++++++++++++++++++++++++++++++ 1 file changed, 526 insertions(+) create mode 100644 zh-cn/react-native-zip-archive.md diff --git a/zh-cn/react-native-zip-archive.md b/zh-cn/react-native-zip-archive.md new file mode 100644 index 00000000..9079b910 --- /dev/null +++ b/zh-cn/react-native-zip-archive.md @@ -0,0 +1,526 @@ +> 模板版本：v0.2.1 + +

+

react-native-zip-archive

+

+

+ + Supported platforms + + + License + + +

+ + +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-zip-archive) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + +#### **npm** + +```bash +npm i @react-native-oh-tpl/react-native-zip-archive@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-zip-archive@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import React, { useState, useEffect } from 'react'; +import { View, Button, StyleSheet, TextInput, Alert, Text, ActivityIndicator } from 'react-native'; +import { pathParameters, zip, unzip, zipWithPassword, unzipWithPassword, subscribe, creteFile, isPasswordProtected, unzipAssets, getUncompressedSize } from 'react-native-zip-archive'; +import { ProgressBar } from 'react-native-paper'; + +export function ZipArchiveDemo() { + const [fileName, setFileName] = useState(''); + const [fileContent, setFileContent] = useState(''); + const [createdFilePath, setCreatedFilePath] = useState(''); + const [compressedFilePath, setCompressedFilePath] = useState(''); + + const [newZipPath, setNewZipPath]: any = useState(); + const [newSourcePath, setNewSourcePath]: any = useState(); + const [newFolder, setNewFolder]: any = useState(); + const [password, setPassword] = useState(''); + const [showInput, setShowInput] = useState(false); + const [zipPassword, setZipPassword] = useState(''); + const [progress, setProgress] = useState(0); + const [isProgressPing, setIsProgressPing] = useState(false); + const [loading, setLoading] = useState(false); + const [unzipStatus, setUnzipStatus] = useState(''); + const [uncompressSize, setUncompressSize] = useState(''); + let unzipPassword: string = ''; + let needPassword: boolean = false; + + // 存储设置的密码 + const setUnzipPassword = (value: string) => { + console.log(`setUnzipPassword: ${value}`); + unzipPassword = value; + } + + useEffect(() => { + let filesDir = pathParameters(); // 获取鸿蒙应用文件路径 + let newZipPath: any = filesDir + '.zip'; + let newSourcePath: any = filesDir; + let newFolder: any = filesDir + 'Out';//解压时新建个文件夹 + + setNewZipPath(newZipPath);//存储压缩包 + setNewSourcePath(newSourcePath);//原文件路径 + setNewFolder(newFolder);//解压时新建个文件夹 + + if (!showInput) { + setPassword(''); // 隐藏输入框时清空密码 + } + }, [showInput]); + + // 创建文件 + const createFile = () => { + if (!fileName || !fileContent) { + Alert.alert('文件名和内容不能为空'); + return; + } + const filePath = `${newSourcePath}/${fileName}.txt`; + + if (fileName && fileContent) { + creteFile(filePath, fileContent) + .then(() => { + setCreatedFilePath(filePath); + Alert.alert('文件创建成功') + setTimeout(() => { + setFileName(''); + setFileContent(''); + }, 100); + }) + .catch((error) => { + console.log('文件创建失败:', error); + }); + } else { + Alert.alert('请输入文件名和内容'); + } + }; + + // 密码压缩 + const handleZipPress = () => { + if (password === '') { + Alert.alert('错误', '请输入密码'); + return; + } + + if (createdFilePath) { + handleProgress();//进度条 + zipWithPassword(newSourcePath, newZipPath, password) + .then(() => { + console.log(`password--11:${password}`) + setZipPassword(password); + setCompressedFilePath(newZipPath) + Alert.alert('成功', '已使用密码创建压缩'); + }) + .catch(error => { + Alert.alert('错误', `创建压缩文件失败: ${error}`); + }); + } else { + Alert.alert('无文件可供压缩'); + } + }; + + // 解压时是否需要密码 + const isUnzipWithPassword = () => { + if (unzipPassword) { + if (zipPassword === '') { + Alert.alert('错误', '请先进行压缩并设置密码'); + return; + } + + if (unzipPassword === zipPassword) { + handleGetUncompressedSize(); + handleProgress();//进度条 + unzipWithPassword(newZipPath,newFolder, unzipPassword) + .then(() => { + Alert.alert('成功', '已使用密码解压文件'); + }) + .catch(error => { + Alert.alert('错误', `解压文件失败: ${error}`); + }); + + } else { + Alert.alert('密码输入错误'); + } + } else { + Alert.alert('错误', '请先输入密码'); + } + } + + // 密码解压&解压 + const handleUnzipPress = () => { + if (this.needPassword) { + isUnzipWithPassword(); + setShowInput(true); + return; + } + isPasswordProtected(newZipPath) + .then((res) => { + if (res) { + this.needPassword = true; + setShowInput(true); + } else { + if (compressedFilePath) { + if (needPassword === false) { + handleGetUncompressedSize(); + handleProgress();//进度条 + unzip(newZipPath, newFolder,'UTF-8') + .then(() => { + console.log(`unzip success`) + Alert.alert('成功', '已解压'); + }) + .catch(error => { + Alert.alert('错误', '解压失败'); + console.log(`unzip error: ${error}`); + }) + } + } else { + Alert.alert('无压缩文件可供解压'); + } + } + }) + .catch(error => { + console.error(`isPasswordProtected error: ${error}`) + }) + } + + // 进度条 + const handleProgress = () => { + setIsProgressPing(true); + setProgress(0); //重置进度条 + interface data { + progress: number, + filePath: string + } + let currentProgress = 0; + + const interval = setInterval(() => { + if (currentProgress < 100) { + currentProgress += 20; + setProgress(currentProgress); + console.log(`current progress: ${currentProgress}%`); + } else { + clearInterval(interval); // 达到最大值后清除 interval + setIsProgressPing(false); + } + }, 1000); + + subscribe((data: data) => { + try { + if (data.progress != null) { + currentProgress = data.progress; + setProgress(data.progress); + console.log(`subscribe success: ${data.progress}`); + setIsProgressPing(false); + + if (data.progress === 100) { + clearInterval(interval); + } + } + } catch (error) { + console.log(`subscribe error: ${error}`); + clearInterval(interval); + } + }) + } + + // unzipAssets + const handleUnzipAssets = async () => { + setLoading(true); + let filesDir = pathParameters(); + //解压files.zip文件到系统中的 destinationFolder 目录中 + let assetPath = filesDir + '.zip'; + let targetPath = filesDir + 'destinationFolder'; + if (compressedFilePath) { + try { + await unzipAssets(assetPath, targetPath); + setUnzipStatus('解压完成'); + console.log(`unzipAssets success`); + } catch (err) { + setUnzipStatus(`解压失败：${err}`); + console.log(`unzipAssets err: ${err}`); + } finally { + setLoading(false); + } + } else { + Alert.alert('无压缩文件可供解压'); + } + } + + // getUncompressedSize + const handleGetUncompressedSize = () => { + getUncompressedSize(newZipPath) + .then((uncompressSize:any) => { + setUncompressSize(uncompressSize); + console.log(`uncompressSize success:${uncompressSize}`) + }) + .catch((err) => { + console.log(`getUncompressedSize err:${err}`) + }) + } + + return ( + + + + 解压缩后的大小:{uncompressSize ? uncompressSize : '0'}字节 + + + + {progress}% + + + + + + + setFileContent(text)} + value={fileContent} + placeholder="文件内容" + multiline={true} + /> +