From 1e2322190ee05abda73bf9b3925badbabbd63191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=B5=A9?= Date: Wed, 22 May 2024 10:18:18 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[Issues:=20#I9R695]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-audio=E3=80=81react-native-image-crop-picker=E5=92=8C?= =?UTF-8?q?react-native-zip-archive=20=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 + _sidebar.md | 3 + zh-cn/README.md | 4 + zh-cn/react-native-audio.md | 283 ++++++++++++++++ zh-cn/react-native-image-crop-picker.md | 422 ++++++++++++++++++++++++ zh-cn/react-native-zip-archive.md | 289 ++++++++++++++++ 6 files changed, 1005 insertions(+) create mode 100644 zh-cn/react-native-audio.md create mode 100644 zh-cn/react-native-image-crop-picker.md create mode 100644 zh-cn/react-native-zip-archive.md diff --git a/README.md b/README.md index 61b1056c..db78789a 100644 --- a/README.md +++ b/README.md @@ -148,6 +148,10 @@ | 126 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather "https://github.com/yigithanyucedag/react-native-feather") | 1.1.2 | \- | \- | [链接](/zh-cn/react-native-feather.md) | | 127 | [@react-navigation/native-stack](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack) | 6.9.26 | \- | [@react-native-oh-tpl/native-stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | [链接](/zh-cn/react-navigation-native-stack.md) | | 128 | [react-native-clippath](https://github.com/Only-IceSoul/react-native-clippath) | 1.1.8 | 是 | [@react-native-oh-tpl/react-native-clippath](https://github.com/react-native-oh-library/react-native-clippath/releases) | [链接](/zh-cn/react-native-clippath.md) | +| 129 | [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) | 0.40.3 | 是 | [@react-native-image-crop-picker](https://github.com/react-native-oh-library/react-native-image-crop-picker/releases) | [链接](./zh-cn/react-native-image-crop-picker.md) | +| 130 | [react-native-audio](https://github.com/jsierles/react-native-audio "https://github.com/jsierles/react-native-audio") | 4.3.1 | 是 | [@react-native-oh-tpl/react-native-audio](https://github.com/react-native-oh-library/react-native-audio/releases) | [链接](./zh-cn/react-native-audio.md) | | +| 131 | [react-native-zip-archive](https://github.com/mockingbot/react-native-zip-archive "https://github.com/mockingbot/react-native-zip-archive") | 6.1.1 | 是 | [@react-native-oh-tpl/react-native-zip-archive](https://github.com/react-native-oh-library/react-native-zip-archive/releases "https://github.com/react-native-oh-library/react-native-zip-archive/releases") | [链接](./zh-cn/react-native-zip-archive.md) | + ## 社区 diff --git a/_sidebar.md b/_sidebar.md index c9e42e32..a9f26109 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -50,6 +50,9 @@ - [lottie-react-native](/zh-cn/lottie-react-native.md) - [react-native-image-sequence-2](/zh-cn/react-native-image-sequence-2.md) - [react-native-clippath](/zh-cn/react-native-clippath.md) + - [react-native-image-crop-picker](/zh-cn/react-native-image-crop-picker.md) + - [react-native-audio](/zh-cn/react-native-audio.md) + - [react-native-zip-archive](/zh-cn/react-native-zip-archive.md) - RN JS库 - [react-i18next](/zh-cn/react-i18next.md) - [react-native-action-button](/zh-cn/react-native-action-button.md) diff --git a/zh-cn/README.md b/zh-cn/README.md index 660e86f6..fdd26991 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -148,6 +148,10 @@ | 126 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather "https://github.com/yigithanyucedag/react-native-feather") | 1.1.2 | \- | \- | [链接](/zh-cn/react-native-feather.md) | | 127 | [@react-navigation/native-stack](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack) | 6.9.26 | \- | [@react-native-oh-tpl/native-stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | [链接](/zh-cn/react-navigation-native-stack.md)| | 128 | [react-native-clippath](https://github.com/Only-IceSoul/react-native-clippath) | 1.1.8 | 是 | [@react-native-oh-tpl/react-native-clippath](https://github.com/react-native-oh-library/react-native-clippath/releases) | [链接](/zh-cn/react-native-clippath.md) | +| 129 | [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) | 0.40.3 | 是 | [@react-native-image-crop-picker](https://github.com/react-native-oh-library/react-native-image-crop-picker/releases) | [链接](./react-native-image-crop-picker.md) | +| 130 | [react-native-audio](https://github.com/jsierles/react-native-audio "https://github.com/jsierles/react-native-audio") | 4.3.1 | 是 | [@react-native-oh-tpl/react-native-audio](https://github.com/react-native-oh-library/react-native-audio/releases) | [链接](./react-native-audio.md) | | +| 131 | [react-native-zip-archive](https://github.com/mockingbot/react-native-zip-archive "https://github.com/mockingbot/react-native-zip-archive") | 6.1.1 | 是 | [@react-native-oh-tpl/react-native-zip-archive](https://github.com/react-native-oh-library/react-native-zip-archive/releases "https://github.com/react-native-oh-library/react-native-zip-archive/releases") | [链接](./react-native-zip-archive.md) | + ## 社区 diff --git a/zh-cn/react-native-audio.md b/zh-cn/react-native-audio.md new file mode 100644 index 00000000..2c6b106b --- /dev/null +++ b/zh-cn/react-native-audio.md @@ -0,0 +1,283 @@ +> 模板版本：v0.2.1 + +

+

react-native-audio

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-audio/) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-audio Releases](https://github.com/react-native-oh-library/react-native-audio/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-audio@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-audio@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import { AudioRecorder, AudioUtils } from "react-native-audio"; + +// request microphone premission +AudioRecorder.requestAuthorization().then((isAuthorised)=>{ + console.log(`isAuthorised: ${isAuthorised}`) +}) + +// you check premission any time +AudioRecorder.checkAuthorizationStatus().then((hasPermission)=>{ + console.log(`hasPermission: ${hasPermission}`) +}) + +// Initialize recording parameters +const path = `${AudioUtils.FilesDirectoryPath}/demo.m4a` +AudioRecorder.prepareRecordingAtPath(path,{ + SampleRate: 48000, + Channels: 2, + AudioQuality:'High',//only ios + AudioEncoding: 'aac', + AudioEncodingBitRate: 100000, + AudioSource: 1, + OutputFormat: 'm4a', + MeteringEnabled:false,//only ios + MeasurementMode:false,//only ios + IncludeBase64:false +}) + +// start recording +AudioRecorder.start(); + +// pause recording +AudioRecorder.pause(); + +// resume recording +AudioRecorder.resume(); + +// stop recording +AudioRecorder.stop(); + +// add function onProgress +AudioRecorder.onProgress = (data) => { + console.log(data.currentTime) +} + +// add function onFinished +AudioRecorder.onFinished = (data) => { + console.log(data.base64);//base64 + console.log(data.duration);//audio duration + console.log(data.status);//OK/REEOR + console.log(data.audioFileSize);//audioFileSize + console.log(data.audioFileURL);//audio file url +} +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 在工程根目录的 oh-package.json 添加 overrides字段 + +```json +{ + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-audio": "file:../../node_modules/@react-native-oh-tpl/react-native-audio/harmony/audio.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-audio": "file:../../node_modules/@react-native-oh-tpl/react-native-audio/harmony/audio" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 AudioPackge + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-linear-gradient/src/main/cpp" ./audio) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_audio) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "AudioPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 AudioPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... ++ import {AudioPackage} from 'rnoh-async-storage/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new AudioPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +react-native-harmony：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[react-native-audio Releases](https://github.com/react-native-oh-library/react-native-audio/releases) + +### 权限要求 + +Encodings supported on iOS: lpcm, ima4, aac, MAC3, MAC6, ulaw, alaw, mp1, mp2, alac, amr Encodings supported on Android: aac, aac_eld, amr_nb, amr_wb, he_aac, vorbis +Encodings supported on Harmony: aac. + +AudioQuality、MeteringEnabled、MeasurementMode is only for ios; IncludeBase64 is for ios and Android, not support on Harmony. + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| requestAuthorization | 请求麦克风权限 | function | yes | phone | yes | +| checkAuthorizationStatus | 检查授权状态 | function | yes | phone | yes | +| prepareRecordingAtPath | 初始化录制实例参数 | function | yes | phone | yes | +| startRecording | 开始录制 | function | yes | phone | yes | +| pauseRecording | 暂停录制 | function | yes | phone | yes | +| resumeRecording | 重新开始录制 | function | yes | phone | yes | +| stopRecording | 结束录制 | function | yes | phone | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/jsierles/react-native-audio/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-image-crop-picker.md b/zh-cn/react-native-image-crop-picker.md new file mode 100644 index 00000000..a0feda4c --- /dev/null +++ b/zh-cn/react-native-image-crop-picker.md @@ -0,0 +1,422 @@ +> 模板版本：v0.2.1 + +

+

react-native-image-crop-picker

+

+

+ + Supported platforms + + + License + +

+ +> [Github 地址](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-image-crop-picker) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-crop-picker Releases ](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-image-crop-picker%2Freleases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!tip] #处替换为tgz包的路径 + +#### **npm** + +``` +npm install @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +#### **yarn** + +``` +yarn add @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!TIP] 使用时 import 的库名不变。 + +``` +import { ImagePicker } from 'react-native-image-crop-picker'; + +// Image +ImagePicker.openPicker({ + width: 300, + height: 400, + cropping: true +}).then(image => { + console.log(image); +}); + +// Video +ImagePicker.openCamera({ + mediaType: 'video', +}).then(image => { + console.log(image); +}); + +// Crop picture +ImagePicker.openCropper({ + path: 'my-file-path.jpg' +}).then(image => { + console.log(image); +}); + +// Clean +ImagePicker.clean().then(() => { + console.log('removed all tmp images from tmp directory'); +}).catch(e => { + alert(e); +}); +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 harmony + +``` +在工程根目录的 oh-package.json 添加 overrides字段 +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +## 配置Entry + +1.entryability下创建ImageEditAbility.ets + +``` +import UIAbility from '@ohos.app.ability.UIAbility' +import window from '@ohos.window' +import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl'; +import AbilityConstant from '@ohos.app.ability.AbilityConstant' +import Want from '@ohos.app.ability.Want' + + +const TAG = 'ImageEditAbility'; + +let names = []; + +let filePath : string; + +export default class ImageEditAbility extends UIAbility { + + + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { + filePath = want.parameters?.imageUri as string; + } + + onWindowStageCreate(windowStage: window.WindowStage) { + this.setWindowOrientation(windowStage, window.Orientation.PORTRAIT) + const permissions: Array = [ + 'ohos.permission.READ_MEDIA', + 'ohos.permission.WRITE_MEDIA', + 'ohos.permission.MEDIA_LOCATION', + ]; + const atManager = abilityAccessCtrl.createAtManager(); + atManager.requestPermissionsFromUser(this.context, permissions, (err, data) => { + if (!err) { + console.info(TAG,'Failed to requestPermission. Cause: %{public}s', + JSON.stringify(err) ?? '') + } else { + console.info(TAG,'Succeeded in requestPermission') + } + let para:Record = { 'filePath': filePath}; + let storage: LocalStorage = new LocalStorage(para); + windowStage.loadContent('pages/ImageEdit', storage, (err, data) => { + if (err.code) { + console.info(TAG,'Failed to load the content. Cause: %{public}s', + JSON.stringify(err) ?? '') + return; + } + console.info(TAG,'Succeeded in loading the content') + }); + }); + + try { + windowStage.getMainWindowSync().setWindowLayoutFullScreen(true,(err)=>{ + if (err.code) { + console.error('Failed to enable the full-screen mode. Cause: ' + JSON.stringify(err)); + return; + } + console.info('Succeeded in enabling the full-screen mode.'); + }) + windowStage.getMainWindowSync().setWindowSystemBarEnable(names, (err) => { + if (err.code) { + console.error('Failed to set the system bar to be invisible. Cause: ' + JSON.stringify(err)); + return; + } + console.info('Succeeded in setting the system bar to be invisible.'); + }); + } catch (exception) { + console.error('Failed to set the system bar to be invisible. Cause: ' + JSON.stringify(exception)); + } + + } + + setWindowOrientation(stage: window.WindowStage, orientation: window.Orientation): void { + console.info(TAG,"into setWindowOrientation :") + if (!stage || !orientation) { + return; + } + stage.getMainWindow().then(windowInstance => { + windowInstance.setPreferredOrientation(orientation); + }) + } +} +``` + +2.module.json5注册 ImageEditAbility 增加 requestPermissions + +``` +{ + "name": "ImageEditAbility", + "srcEntrance": "./ets/entryability/ImageEditAbility.ets", + "description": "$string:EntryAbility_desc", + "icon": "$media:icon", + "startWindowIcon": "$media:startIcon", + "startWindowBackground": "$color:start_window_background", + "visible": true, + +} + +"requestPermissions": [ + { + "name": "ohos.permission.MEDIA_LOCATION", + "reason": "$string:reason", + "usedScene": { + "abilities": [ + "ImageEditAbility" + ], + "when": "inuse" + } + }, + { + "name": "ohos.permission.READ_MEDIA", + "reason": "$string:reason", + "usedScene": { + "abilities": [ + "ImageEditAbility" + ], + "when": "inuse" + } + }, + { + "name": "ohos.permission.WRITE_MEDIA", + "reason": "$string:reason", + "usedScene": { + "abilities": [ + "ImageEditAbility" + ], + "when": "inuse" + } + } + ] +``` + +3.page下创建ImageEdit.ets + +``` +import { ImageEditInfo } from 'rnoh-image-crop-picker'; + +let storage = LocalStorage.GetShared() + +@Entry(storage) +@Component +struct ImageEdit { + + @LocalStorageLink('filePath') filePath: string = ''; + + build() { + Row(){ + Column(){ + ImageEditInfo({filePath: this.filePath}); + } + .width('100%') + } + .height('100%') + } +} +``` + +4.main_pages.json添加配置 + +``` +{ + "src": [ + "pages/Index", + "pages/ImageEdit" + ] +} +``` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入。 +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +``` +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-image-crop-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-crop-picker/harmony/react-native-image-crop-picker.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +``` +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-image-crop-picker": "file:../image_crop_picker" + } +``` + +打开终端，执行： + +``` +cd entry +ohpm install --no-link +``` + +### 在 ArkTs 侧引入 ImageCropPickerPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +``` +... ++ import {ImageCropPickerPackage} from "@react-native-oh-tpl/image-crop-picker/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ImageCropPickerPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +RNOH：0.72.20; SDK：HarmonyOS-NEXT-DB1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.21; + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-image-crop-picker%2Freleases) + +## 属性 + +[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | ----------- | ----------------- | +| openPicker | Call single image picker with cropping | ios/Android | yes | +| clean | Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use `clean` to clean all tmp files, or `cleanSingle(path)` to clean single tmp file. | ios/Android | yes | +| openCropper | Crop image and rotate, | ios/Android | yes | +| cleanSingle | Delete a single cache file | ios/Android | yes | +| openCamera | Select from camera | ios/Android | yes | + +cropData + +| 名称 | 类型 | 说明 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | -------- | +| cropping | bool (default false) | Enable or disable cropping | no | All | yes | +| `width` | number | Width of result image when used with `cropping` option | no | All | yes | +| height | number | Height of result image when used with `cropping` option | no | All | yes | +| multiple | bool (default false) | Enable or disable multiple image selection | no | All | yes | +| writeTempFile (ios only) | bool (default true) | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the `includeBase64` option and don't need to read files from disk. | no | ios | yes | +| includeBase64 | bool (default false) | When set to true, the image file content will be available as a base64-encoded string in the `data` property. Hint: To use this string as an image source, use it like: `` | no | All | yes | +| includeExif | bool (default false) | Include image exif data in the response | no | All | yes | +| avoidEmptySpaceAroundImage (ios only) | bool (default true) | When set to true, the image will always fill the mask space. | no | ios | no | +| cropperActiveWidgetColor (android only) | string (default `"#424242"`) | When cropping image, determines ActiveWidget color. | no | android | no | +| cropperStatusBarColor (android only) | string (default `#424242`) | When cropping image, determines the color of StatusBar. | no | android | no | +| cropperToolbarColor (android only) | string (default `#424242`) | When cropping image, determines the color of Toolbar. | no | android | no | +| cropperToolbarWidgetColor (android only) | string (default `darker orange`) | When cropping image, determines the color of Toolbar text and buttons. | no | android | no | +| freeStyleCropEnabled | bool (default false) | Enables user to apply custom rectangle area for cropping | no | All | yes | +| cropperToolbarTitle | string (default `Edit Photo`) | When cropping image, determines the title of Toolbar. | no | All | yes | +| cropperCircleOverlay | bool (default false) | Enable or disable circular cropping mask. | no | All | yes | +| disableCropperColorSetters (android only) | bool (default false) | When cropping image, disables the color setters for cropping library. | no | All | no | +| minFiles (ios only) | number (default 1) | Min number of files to select when using `multiple` option | no | ios | yes | +| maxFiles (ios only) | number (default 5) | Max number of files to select when using `multiple` option | no | ios | yes | +| waitAnimationEnd (ios only) | bool (default true) | Promise will resolve/reject once ViewController `completion` block is called | no | ios | no | +| smartAlbums (ios only) | array ([supported values](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fivpusic%2Freact-native-image-crop-picker%2Fblob%2Fmaster%2FREADME.md%23smart-album-types-ios)) (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from | no | ios | no | +| useFrontCamera | bool (default false) | Whether to default to the front/'selfie' camera when opened. Please note that not all Android devices handle this parameter, see [issue #1058](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fivpusic%2Freact-native-image-crop-picker%2Fissues%2F1058) | no | All | yes | +| compressVideoPreset (ios only) | string (default MediumQuality) | Choose which preset will be used for video compression | no | ios | no | +| compressImageMaxWidth | number (default none) | Compress image with maximum width | no | All | yes | +| compressImageMaxHeight | number (default none) | Compress image with maximum height | no | All | yes | +| compressImageQuality | number (default 1 (Android)/0.8 (iOS)) | Compress image with quality (from 0 to 1, where 1 is best quality). On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images, while a value of 0.8 will reduce the file size by about half or less compared to a value of 1. | no | All | yes | +| loadingLabelText (ios only) | string (default "Processing assets...") | Text displayed while photo is loading in picker | no | ios | yes | +| mediaType | string (default any) | Accepted mediaType for image selection, can be one of: 'photo', 'video', or 'any' | no | All | yes | +| showsSelectedCount (ios only) | bool (default true) | Whether to show the number of selected assets | no | ios | yes | +| sortOrder (ios only) | string (default 'none', supported values: 'asc', 'desc', 'none') | Applies a sort order on the creation date on how media is displayed within the albums/detail photo views when opening the image picker | no | ios | no | +| forceJpg (ios only) | bool (default false) | Whether to convert photos to JPG. This will also convert any Live Photo into its JPG representation | no | ios | yes | +| showCropGuidelines (android only) | bool (default true) | Whether to show the 3x3 grid on top of the image during cropping | no | android | yes | +| showCropFrame (android only) | bool (default true) | Whether to show crop frame during cropping | no | android | yes | +| hideBottomControls (android only) | bool (default false) | Whether to display bottom controls | no | android | no | +| enableRotationGesture (android only) | bool (default false) | Whether to enable rotating the image by hand gesture | no | android | yes | +| cropperChooseText (ios only) | string (default choose) | Choose button text | no | ios | yes | +| cropperChooseColor (ios only) | string (default `#FFCC00`) | HEX format color for the Choose button. [Default color is controlled by TOCropViewController](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2FTimOliver%2FTOCropViewController%2Fblob%2Fa942414508012b13102f776eb65dac655f31cabb%2FObjective-C%2FTOCropViewController%2FViews%2FTOCropToolbar.m%23L444). | no | ios | yes | +| cropperCancelText (ios only) | string (default Cancel) | Cancel button text | no | ios | yes | +| cropperCancelColor (ios only) | string (default tint `iOS` color ) | HEX format color for the Cancel button. Default value is the default tint iOS color [controlled by TOCropViewController](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2FTimOliver%2FTOCropViewController%2Fblob%2Fa942414508012b13102f776eb65dac655f31cabb%2FObjective-C%2FTOCropViewController%2FViews%2FTOCropToolbar.m%23L433) | no | ios | yes | +| cropperRotateButtonsHidden (ios only) | bool (default false) | Enable or disable cropper rotate buttons | no | ios | yes | + +## 遗留问题 + +- [ ] react-native-image-crop-picker 图像将始终填充蒙版空间 [#I9P3IR](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3IR) +- [ ] Android Demo中 ActiveWidget 改变颜色 [#I9P3IH](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3IH) +- [ ] Android Demo中 改变状态栏颜色 [#I9P3HC](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3HC) +- [ ] Android Demo中 改变工具栏颜色 [#I9P3GD](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3GD) +- [ ] 裁剪图像时，禁用裁剪库的颜色设置器 [#I9P3G3](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3G3) +- [ ] 裁剪图像时，确定工具栏文本和按钮的颜色 [#I9P3FN](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3FN) +- [ ] 调用ViewController“completion”块，Promise将解析/拒绝，鸿蒙不支持 [#I9P3FH](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3FH) +- [ ] Ios支持智能相册列表 [#I9P3F2](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3F2) +- [ ] Ios视频压缩的预设 [#I9P3EM](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3EM) +- [ ] Ios智能相册排序 [#I9P3E5](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3E5) +- [ ] Android Demo 设置是否显示底部控件 [#I9P3DT](https://gitee.com/lankun_lambert/usage-docs/issues/I9P3DT) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fivpusic%2Freact-native-image-crop-picker%2Fblob%2Fmaster%2FLICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-zip-archive.md b/zh-cn/react-native-zip-archive.md new file mode 100644 index 00000000..ac1231d7 --- /dev/null +++ b/zh-cn/react-native-zip-archive.md @@ -0,0 +1,289 @@ +> 模板版本：v0.2.0 + +

+

react-native-zip-archive

+

+

+ + 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:# +``` + + + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 在工程根目录的 `oh-package.json` 添加 overrides字段 + +``` +{ + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + + + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +第一步：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```diff +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", ++ "@react-native-oh-tpl/react-native-zip-archive": "file:../../node_modules/@react-native-oh-tpl/react-native-zip-archive/harmony/zipArchive_package.har" + } +``` + +点击右上角的 `sync` 按钮。 + +或者在终端执行： + +```shell +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```diff +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", ++ "@react-native-oh-tpl/react-native-zip-archive": "file:../../node_modules/@react-native-oh-tpl/react-native-zip-archive/harmony/zipArchive_package" + } +``` + +打开终端，执行： + +```shell +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入zipArchive + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-zip-archive/src/main/cpp" ./zipArchive-package) +# RNOH_END: add_package_subdirectories +``` + +### 在 ArkTs 侧引入 ZipArchivePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... ++ import {ZipArchivePackage} from '@react-native-oh-tpl/react-native-zip-archive/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ZipArchivePackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```shell +cd entry +ohpm install +``` + +然后编译、运行即可。 + +快速使用： + +>[!WARNING] 使用时 import 的库名不变。 + +```tsx +import React, { useState, useEffect } from 'react'; +import { View, Button, StyleSheet, TextInput, Alert } from 'react-native'; +import { pathParameters, zip, unzip, zipWithPassword, unzipWithPassword } from 'react-native-zip-archive'; + +export function ZipArchiveDemo() { + const [newZipPath, setNewZipPath]: any = useState(); + const [newSourcePath, setNewSourcePath]: any = useState(); + const [newFolder, setNewFolder]: any = useState(); + const [password, setPassword] = useState(''); + const correctPassword = '123456' + + useEffect(() => { + let filesDir = pathParameters(); // 获取鸿蒙应用文件路径 + let newZipPath: any = filesDir + '.zip'; //压缩时zip包路径 + let newSourcePath: any = filesDir; //压缩前文件路径 + let newFolder: any = filesDir + 'Out';//解压时新建的文件夹 + + setNewZipPath(newZipPath);//存储压缩包 + setNewSourcePath(newSourcePath);//原文件路径 + setNewFolder(newFolder);//解压时新建的文件夹 + }, []); + + + const handleZipWithPassword = () => { + if (newZipPath && newSourcePath) { + if (password === correctPassword) { + zipWithPassword(newSourcePath, newZipPath, password); + Alert.alert('加密压缩成功'); + setPassword(''); + } else { + Alert.alert('错误', '密码不正确，请重新输入!'); + } + } + } + + const handleUnzipWithPassword = () => { + if (newZipPath && newSourcePath) { + if (password === correctPassword) { + unzipWithPassword(newFolder, newZipPath, password); + Alert.alert('加密解压成功'); + setPassword(''); + } else { + Alert.alert('错误', '密码不正确，请重新输入!'); + } + } + } + + return ( + + +