From ebd66d577cf85d0a05f81f8321e5dd69a2501992 Mon Sep 17 00:00:00 2001 From: chenwenhui133 <2984202073@qq.com> Date: Mon, 16 Jun 2025 15:37:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20[Issues:=20#ICFGPQ]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-syan-image-picker=E5=BA=93=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E6=96=87=E6=A1=A3=E4=B8=AD=E7=9A=84=E4=B8=AD=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-paper.md | 2 +- en/react-native-sound.md | 2 +- en/react-native-syan-image-picker.md | 138 +++++++++++++-------------- zh-cn/react-native-paper.md | 2 +- 4 files changed, 72 insertions(+), 72 deletions(-) diff --git a/en/react-native-paper.md b/en/react-native-paper.md index 18c86bf3..0a57ecee 100644 --- a/en/react-native-paper.md +++ b/en/react-native-paper.md @@ -43,7 +43,7 @@ The following code shows the basic use scenario of the repository: ```js import { AppRegistry } from 'react-native'; import { PaperProvider } from 'react-native-paper'; -import App from './src/APP'; +import App from './src/test'; import { name as appName } from './app.json'; export default function PaperExample() { diff --git a/en/react-native-sound.md b/en/react-native-sound.md index b3a42e92..baf473a6 100644 --- a/en/react-native-sound.md +++ b/en/react-native-sound.md @@ -309,7 +309,7 @@ Check the release version information in the release address of the third-party | setMode | Set session mode | function | No | iOS | no | | setSpeakerphoneOn | Set up speakers | function | No | Android | no | -## APIs +## API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-syan-image-picker.md b/en/react-native-syan-image-picker.md index 0463b874..d3cbf472 100644 --- a/en/react-native-syan-image-picker.md +++ b/en/react-native-syan-image-picker.md @@ -64,17 +64,17 @@ export default class App extends Component<{}> { }; } /** - * 开启压缩，选择一张照片先裁剪然后再压缩，并支持base64编码 + * Enable compression. Select a photo to crop and compress, and enable Base64 encoding. **/ SYImagePicker.showImagePicker( { /** - * imageCount为1才支持裁剪 + * Cropping can be enabled only when **imageCount** is set to **1**. **/ imageCount: 1, isCrop: true, quality: 90, - compress: true, // 开启压缩 + compress: true, // Enable compression. enableBase64: false, }, (err, photos) => { @@ -88,67 +88,67 @@ SYImagePicker.showImagePicker( }, ); /** - * 关闭压缩，多选照片并支持base64编码 + * Disable compression. Select multiple photos and enable Base64 encoding. **/ handleAsyncSelectPhoto = async () => { SYImagePicker.removeAllPhoto() try { const photos = await SYImagePicker.asyncShowImagePicker({ - imageCount: 8, //指定选择的照片数量 - enableBase64: true, // 支持base64编码 + imageCount: 8, // Set the number of photos to select. + enableBase64: true, // Enable Base64 encoding. }); - // 选择成功 + // The selection is successful. this.setState({ photos: [...this.state.photos, ...photos], }); } catch (err) { console.log(err); - // 取消选择，err.message为"取消" + // Cancel selection. The value of err.message is "Cancelled". } }; /** -* 缓存清除 +* Clear cache. **/ handleDeleteCache = () => { SYImagePicker.deleteCache(); }; /** -* 移除选中的图片 +* Remove selected photos. **/ handleDeletePhoto = index => { const { selectedPhotos: oldPhotos } = this.state; const selectedPhotos = oldPhotos.filter((photo, photoIndex) => photoIndex !== index); - // 更新原生图片数组 + // Update the native photo array. SYImagePicker.removePhotoAtIndex(index); } /** -* 移除选中的全部图片 +* Remove all selected photos. **/ STImagePicke.removeAllPhoto() /** -* 调用相机 +* Use the camera. **/ SyanImagePicker.openCamera(options, (err, photos) => { if (err) { - // 取消选择 + // Cancel the selection. return; } - // 选择成功，渲染图片 + // The selection is successful. Start to render the photo. // ... }) /** -* 选择视频 +* Select videos. **/ SyanImagePicker.openVideoPicker(options, (err, videos) => { if (err) { - // 取消选择 + // Cancel the selection. return; } - // 选择成功，处理视频 + // The selection is successful. Start to process the video. // ... }) @@ -351,56 +351,56 @@ This document is verified based on the following versions: -## ImagePickerOption(选择图片或数据的配置项) +## ImagePickerOption(Configuration Options for Selecting Photos or Data) > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------- | ------------------------------------------------------------ | ------- | :------: | :---------: | :---------------: | -| imageCount | 最大选择图片数目，默认6 | number | yes | iOS/Android | yes | -| isCamera | 是否允许用户在内部拍照，默认true | boolean | yes | iOS/Android | yes | -| isCrop | 是否允许裁剪，默认false, imageCount 为1才生效 | boolean | yes | iOS/Android | yes | -| compress | 是否压缩照片 | boolean | yes | iOS/Android | yes | -| quality | 压缩质量 | number | yes | iOS/Android | yes | -| enableBase64 | 是否返回base64编码，默认不返回 | boolean | yes | iOS/Android | yes | -| videoCount | 选择的视频个数 | number | yes | iOS/Android | yes | -| allowPickingMultipleVideo | 允许选择多个视频 | boolean | yes | iOS/Android | yes | -| isRecordSelected | 是否已选图片 | bool | yes | iOS/Android | yes | -| CropW | 裁剪宽度，默认屏幕宽度60% | number | yes | iOS/Android | yes | -| CropH | 裁剪高度，默认屏幕宽度60% | number | yes | iOS/Android | yes | -| isGif | 是否允许选择GIF，默认false，暂无回调GIF数据 | boolean | yes | iOS/Android | no | -| showCropCircle | 是否显示圆形裁剪区域，默认false | boolean | yes | iOS/Android | yes | -| circleCropRadius | 圆形裁剪半径，默认屏幕宽度一半 | number | yes | iOS/Android | yes | -| showCropFrame | 是否显示裁剪区域，默认true | boolean | yes | Android | no | -| showCropGrid | 是否隐藏裁剪区域网格，默认false | boolean | yes | Android | no | -| freeStyleCropEnabled | 裁剪框是否可拖拽 | boolean | yes | Android | no | -| rotateEnabled | 裁剪是否可旋转图片 | boolean | yes | Android | no | -| scaleEnabled | 裁剪是否可放大缩小图片 | boolean | yes | Android | no | -| compressFocusAlpha | 压缩时保留图片透明度（开启后png压缩后尺寸会变大但是透明度会保留) | boolean | yes | iOS/Android | no | -| minimumCompressSize | 小于100kb的图片不压缩（Android） | number | yes | Android | no | -| allowPickingOriginalPhoto | 选择原生图片 | boolean | yes | iOS/Android | yes | -| MaxSecond | 选择视频最大时长，默认是180秒 | number | yes | Android | no | -| videoMaximumDuration | 视频最大拍摄时间，默认是10分钟，单位是秒 | number | yes | iOS/Android | yes | -| isWeChatStyle | 是否是微信风格选择界面 Android Only | boolean | yes | Android | no | -| sortAscendingByModificationDate | 对照片排序，按修改时间升序，默认是YES。如果设置为NO,最新的照片会显示在最前面，内部的拍照按钮会排在第一个 | boolean | yes | iOS/Android | no | -| MinSecond | 选择视频最小时长，默认是1秒 | number | yes | Android | no | -| showSelectedIndex | 是否显示序号， 默认不显示 | boolean | yes | iOS/Android | no | - -## SelectedPhoto（选择的图片或视频的返回结果） +| imageCount | Maximum number of photos that can be selected. The default value is **6**. | number | yes | iOS/Android | yes | +| isCamera | Whether the user is allowed to take a photo using the built-in camera. The default value is **true**. | boolean | yes | iOS/Android | yes | +| isCrop | Whether to allow cropping. The default value is **false**. This option is valid only when **imageCount** is set to **1**. | boolean | yes | iOS/Android | yes | +| compress | Whether to compress photos. | boolean | yes | iOS/Android | yes | +| quality | Compression quality. | number | yes | iOS/Android | yes | +| enableBase64 | Whether to return Base64 encoding. Disabled by default. | boolean | yes | iOS/Android | yes | +| videoCount | Number of selected videos. | number | yes | iOS/Android | yes | +| allowPickingMultipleVideo | Whether to allow selecting multiple videos. | boolean | yes | iOS/Android | yes | +| isRecordSelected | Whether a photo is selected. | bool | yes | iOS/Android | yes | +| CropW | Cropping width. The default value is 60% of the screen width. | number | yes | iOS/Android | yes | +| CropH | Cropping height. The default value is 60% of the screen height. | number | yes | iOS/Android | yes | +| isGif | Whether to allow selecting GIFs. The default value is **false** and no callback for GIF data is provided. | boolean | yes | iOS/Android | no | +| showCropCircle | Whether to display a circular cropping area. The default value is **false**. | boolean | yes | iOS/Android | yes | +| circleCropRadius | Cropping radius of a circle. The default value is half of the screen width. | number | yes | iOS/Android | yes | +| showCropFrame | Whether to display the cropping area. The default value is **true**. | boolean | yes | Android | no | +| showCropGrid | Whether to hide the cropping area. The default value is **false**. | boolean | yes | Android | no | +| freeStyleCropEnabled | Whether the cropping frame can be dragged. | boolean | yes | Android | no | +| rotateEnabled | Whether to allow rotating the photo when it is being cropped. | boolean | yes | Android | no | +| scaleEnabled | Whether to allow scaling the photo when it is being cropped. | boolean | yes | Android | no | +| compressFocusAlpha | Whether to preserve image opacity during compression. (Enabling this will increase the size of the PNG image after compression, but the opacity will be retained.)| boolean | yes | iOS/Android | no | +| minimumCompressSize | Minimum size for compressing. Photos smaller than 100 KB are not compressed (Android). | number | yes | Android | no | +| allowPickingOriginalPhoto | Whether to allow selecting native photos. | boolean | yes | iOS/Android | yes | +| MaxSecond | Maximum video duration. The default value is 180 seconds. | number | yes | Android | no | +| videoMaximumDuration | Maximum video shooting duration, in seconds. The default value is 10 minutes. | number | yes | iOS/Android | yes | +| isWeChatStyle | Whether the WeChat style is used for the selection screen (Android only). | boolean | yes | Android | no | +| sortAscendingByModificationDate | Whether to sort photos by modification time in ascending order. The default value is **YES**. If it is set to **NO**, the latest photo will be displayed first, and the built-in camera button will be placed at the top.| boolean | yes | iOS/Android | no | +| MinSecond | Minimum video duration. The default value is 1 second. | number | yes | Android | no | +| showSelectedIndex | Whether to display the sequence number. By default, the sequence number is not displayed. | boolean | yes | iOS/Android | no | + +## SelectedPhoto（Returned Result of the Selected Photo or Video） > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------ | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | -| width | 图片宽度 | number | yes | iOS/Android | yes | -| height | 图片高度 | number | yes | iOS/Android | yes | -| original_uri | 图片原始路径 | string | yes | iOS/Android | yes | -| uri | 图片路径 | string | yes | iOS/Android | yes | -| type | 文件类型 | string | yes | iOS/Android | yes | -| size | 图片大小，单位为字节 b | number | yes | iOS/Android | yes | -| base64 | 图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性 | string | yes | iOS/Android | yes | +| width | Photo width. | number | yes | iOS/Android | yes | +| height | Photo height. | number | yes | iOS/Android | yes | +| original_uri | Original photo path. | string | yes | iOS/Android | yes | +| uri | Photo path. | string | yes | iOS/Android | yes | +| type | File type. | string | yes | iOS/Android | yes | +| size | Photo size, in bytes. | number | yes | iOS/Android | yes | +| base64 | Base64 encoding of a photo, which is not returned if **enableBase64** is set to **false**.| string | yes | iOS/Android | yes | ## API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -409,22 +409,22 @@ This document is verified based on the following versions: | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ---------------------------------- | -------------------------------------------------------- | -------- | ----------- | ----------------- | -| showImagePicker | 打开图片选择器，选择图片 | callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | -| asyncShowImagePicker | 打开图片选择器，选择图片 | Promise | yes | iOS/Android | yes | -| openCamera | 打开相机拍照，并可以选择所拍的照片 | callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | -| asyncOpenCamera | 打开相机拍照，并可以选择所拍的照片 | Promise | yes | iOS/Android | yes | -| deleteCache | 清除缓存 | void | yes | iOS/Android | yes | -| removePhotoAtIndex | 删除已选择照片的索引 | void | yes | iOS/Android | yes | -| removeAllPhoto | 删除所有已选择的照片 | void | yes | iOS/Android | yes | -| openVideoPicker | 打开视频选择器,选择视频 | callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | +| showImagePicker | Opens the image picker and selects photos. | callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | +| asyncShowImagePicker | Opens the image picker and selects photos. | Promise | yes | iOS/Android | yes | +| openCamera | Opens the camera to take a photo or select a photo.| callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | +| asyncOpenCamera | Opens the camera to take a photo or select a photo.| Promise | yes | iOS/Android | yes | +| deleteCache | Clears cache. | void | yes | iOS/Android | yes | +| removePhotoAtIndex | Removes the index of the selected photo. | void | yes | iOS/Android | yes | +| removeAllPhoto | Removes all selected photos. | void | yes | iOS/Android | yes | +| openVideoPicker | Opens the video picker and selects videos. | callback: (err: null \| string, photos: SelectedPhoto[]) | yes | iOS/Android | yes | ## Known Issues -- [ ] isRecordSelected: 是否已选图片[issues#2](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/2) -- [ ] isGif: 是否允许选择GIF[issues#5](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/5) -- [ ] compressFocusAlpha: 压缩时保留图片透明度[issues#13](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/13) -- [ ] sortAscendingByModificationDate: 对照片排序，按修改时间升序[issues#19](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/19) -- [ ] showSelectedIndex: 是否显示序号[issues#21](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/21) +- [] isRecordSelected: whether a photo is selected [issues#2](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/2) +- [] isGif: whether to allow selecting GIFs [issues#5](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/5) +- [] compressFocusAlpha: whether to preserve image opacity during compression [issues#13](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/13) +- [ ] sortAscendingByModificationDate: whether to sort photos by modification time in ascending order [issues#19](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/19) +- [ ] showSelectedIndex: whether to display the sequence number [issues#21](https://github.com/react-native-oh-library/react-native-syan-image-picker/issues/21) ## Others diff --git a/zh-cn/react-native-paper.md b/zh-cn/react-native-paper.md index 1c0857a8..84c6f9d2 100644 --- a/zh-cn/react-native-paper.md +++ b/zh-cn/react-native-paper.md @@ -42,7 +42,7 @@ paper使用需要安装react-native-safe-area-context来处理安全区域。另 ```js import { AppRegistry } from 'react-native'; import { PaperProvider } from 'react-native-paper'; -import App from './src/APP'; +import App from './src/test'; import { name as appName } from './app.json'; export default function PaperExample() { -- Gitee From f6c63967970b5c9813106261e173af4411d6f7b7 Mon Sep 17 00:00:00 2001 From: chenwenhui133 <2984202073@qq.com> Date: Tue, 17 Jun 2025 17:27:52 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20[Issues:=20#ICFGPQ]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E6=96=87=E6=A1=A3=E4=B8=AD=E9=83=A8=E5=88=86=E5=BA=93?= =?UTF-8?q?github=E9=93=BE=E6=8E=A5=E8=B7=B3=E8=BD=AC=E9=97=AE=E9=A2=98?= =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=B8=AD=E8=8B=B1=E6=96=87=E7=BF=BB?= =?UTF-8?q?=E8=AF=91=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8Areact-nat?= =?UTF-8?q?ive-syan-image-picker=E5=BA=93=E7=9A=84=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/js/moment.md | 2 +- en/js/redux-toolkit.md | 2 +- en/react-native-animate-number.md | 2 +- en/react-native-fs(nocodegen).md | 6 +- en/react-native-progress.md | 2 +- en/react-native-splash-screen.md | 2 +- en/react-native-syan-image-picker.md | 229 +++++++++++++++++------- en/remobile-react-native-toast.md | 2 +- zh-cn/js/moment.md | 2 +- zh-cn/js/redux-toolkit.md | 2 +- zh-cn/react-native-animate-number.md | 2 +- zh-cn/react-native-fs(nocodegen).md | 2 +- zh-cn/react-native-progress.md | 2 +- zh-cn/react-native-splash-screen.md | 2 +- zh-cn/react-native-swiper.md | 2 +- zh-cn/react-native-syan-image-picker.md | 227 ++++++++++++++++------- 16 files changed, 335 insertions(+), 153 deletions(-) diff --git a/en/js/moment.md b/en/js/moment.md index f4e93fca..3f295dfa 100644 --- a/en/js/moment.md +++ b/en/js/moment.md @@ -9,7 +9,7 @@

-> [!TIP] [Github address](https://github.com/moment/moment) +> [!TIP] [Github address](https://github.com/moment/moment/tree/2.30.1) ## Installation and Usage diff --git a/en/js/redux-toolkit.md b/en/js/redux-toolkit.md index 2034f6f0..77b4a7be 100644 --- a/en/js/redux-toolkit.md +++ b/en/js/redux-toolkit.md @@ -12,7 +12,7 @@

-> [!TIP] [Github address](https://github.com/reduxjs/redux-toolkit) +> [!TIP] [Github address](https://github.com/reduxjs/redux-toolkit/tree/v2.2.1) ## Installation and Usage diff --git a/en/react-native-animate-number.md b/en/react-native-animate-number.md index af609798..7b31d21a 100644 --- a/en/react-native-animate-number.md +++ b/en/react-native-animate-number.md @@ -14,7 +14,7 @@ -> [!TIP] [Github address](https://github.com/wkh237/react-native-animate-number) +> [!TIP] [Github address](https://github.com/wkh237/react-native-animate-number/tree/0.1.2) ## Installation and Usage diff --git a/en/react-native-fs(nocodegen).md b/en/react-native-fs(nocodegen).md index d0629c05..79449bb5 100644 --- a/en/react-native-fs(nocodegen).md +++ b/en/react-native-fs(nocodegen).md @@ -311,7 +311,7 @@ Check the release version information in the release address of the third-party | moveFile | Moves the file located at `filepath` to `destPath`. | function | iOS/Android | No | yes | | | read | Reads `length` bytes from the given `position` of the file at `path` and returns contents. | function | iOS/Android | No | yes | | | write | Write the `contents` to `filepath` at the given random access position. | function | iOS/Android | No | yes | | -| touch | Sets the modification timestamp `mtime`of the file at `filepath`. | function | iOS/Android | No | partially | | +| touch | Sets the modification timestamp `mtime`of the file at `filepath`. | function | iOS/Android | No | yes | | | stat | Stats an item at `filepath`. | function | iOS/Android | No | yes | | | readDir | Reads the contents of `path`. | function | iOS/Android | No | yes | | | readDirAssets | Reads the contents of `dirpath ` in the Android app's assets folder. | function | Android | No | No | Android only | @@ -338,8 +338,8 @@ Check the release version information in the release address of the third-party ## Known Issues -- [ ] HarmonyOS 的 hash 哈希 API 中关于算法参数 algorithm 目前仅支持"md5"、"sha1"、 "sha256"，其他相关算法参数目前不支持，问题: [issue#1](https://github.com/react-native-oh-library/react-native-fs/issues/1) -- [ ] 原库部分接口在 HarmonyOS 中没有对应文件路径常量及接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-fs/issues/2) +- [ ] The algorithm parameter algorithm in the hash API of HarmonyOS currently only supports "md5", "sha1", and "sha256". Other related algorithm parameters are currently not supported. Problem: [issue#1](https://github.com/react-native-oh-library/react-native-fs/issues/1) +- [ ] Some interfaces in the original library do not have corresponding file path constants and interface processing related logic in HarmonyOS. Problem:[issue#2](https://github.com/react-native-oh-library/react-native-fs/issues/2) ## Others diff --git a/en/react-native-progress.md b/en/react-native-progress.md index 28945ea2..32849230 100644 --- a/en/react-native-progress.md +++ b/en/react-native-progress.md @@ -148,7 +148,7 @@ Check the release version information in the release address of the third-party > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -详情见[react-native-progress](https://github.com/oblador/react-native-progress) +详情见[react-native-progress](https://github.com/oblador/react-native-progress?tab=readme-ov-file#properties-for-all-progress-components) ### Properties for all progress components: diff --git a/en/react-native-splash-screen.md b/en/react-native-splash-screen.md index 123e46e5..89481160 100644 --- a/en/react-native-splash-screen.md +++ b/en/react-native-splash-screen.md @@ -275,4 +275,4 @@ Check the release version information in the release address of the third-party ## 7.License -This project is licensed under [The MIT License (MIT)](https://gitcode.com/openharmony-sig/rntpc_react-native-splash-screen/blob/master/LICENSE). \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/crazycodeboy/react-native-splash-screen/blob/v3.3.0/LICENSE). \ No newline at end of file diff --git a/en/react-native-syan-image-picker.md b/en/react-native-syan-image-picker.md index d3cbf472..dc1ac50d 100644 --- a/en/react-native-syan-image-picker.md +++ b/en/react-native-syan-image-picker.md @@ -40,6 +40,7 @@ yarn add @react-native-oh-tpl/react-native-syan-image-picker The following code shows the basic use scenario of the repository: +Create an imagePicker.js file > [!WARNING] The name of the imported repository remains unchanged. @@ -52,45 +53,89 @@ import { Image, ScrollView, TouchableOpacity, - Dimensions + Dimensions, + Button } from 'react-native'; -import SYImagePicker from "react-native-syan-image-picker"; +import SYImagePicker from "@react-native-oh-tpl/react-native-syan-image-picker"; -export default class App extends Component<{}> { - constructor(props) { +export default class App extends React.Component { + constructor(props) { super(props); this.state = { photos: [], }; } - /** - * Enable compression. Select a photo to crop and compress, and enable Base64 encoding. - **/ -SYImagePicker.showImagePicker( + /** + * Enable compression. Select a photo to crop and compress, and enable Base64 encoding. + **/ + handleOpenImagePicker = () => { + SYImagePicker.showImagePicker( { - /** - * Cropping can be enabled only when **imageCount** is set to **1**. - **/ - imageCount: 1, - isCrop: true, - quality: 90, - compress: true, // Enable compression. - enableBase64: false, + isCamera: true, + imageCount: 1, + quality: 10, + compress: true, + enableBase64: true, + isCrop: true, + }, (err, photos) => { + if (!err) { + this.setState({video: []}); + this.setState({ + photos: photos, + }); + {photos.map((item, index) => { + console.log("rn_syan_image_picker showImagePicker result: ", + "uri:" + item.uri + "-- " + + "width:" + item.width + "-- " + + "height:" + item.height + "-- " + + "type:" + item.type + "-- " + + "size:" + item.size + "-- " + + "original_uri:" + item.original_uri + "-- " + + "base64:" + item.base64 + "-- "); + }) + } + } else { + console.log(err); + } }, - (err, photos) => { - if (!err) { - this.setState({ - photos, - }); - } else { - console.log(err); - } + ); + }; + handleOpenImagePicker1 = () => { + SYImagePicker.showImagePicker( + { + isCamera: true, + imageCount: 1, + quality: 90, + compress: true, + enableBase64: true, + isCrop: true, + }, (err, photos) => { + if (!err) { + this.setState({video: []}); + this.setState({ + photos: photos, + }); + {photos.map((item, index) => { + console.log("rn_syan_image_picker showImagePicker result: ", + "uri:" + item.uri + "-- " + + "width:" + item.width + "-- " + + "height:" + item.height + "-- " + + "type:" + item.type + "-- " + + "size:" + item.size + "-- " + + "original_uri:" + item.original_uri + "-- " + + "base64:" + item.base64 + "-- "); + }) + } + } else { + console.log(err); + } }, ); -/** - * Disable compression. Select multiple photos and enable Base64 encoding. - **/ - handleAsyncSelectPhoto = async () => { + }; + /** + * Disable compression. Select multiple photos and enable Base64 encoding. + **/ + handleAsyncSelectPhoto = async () => { SYImagePicker.removeAllPhoto() try { const photos = await SYImagePicker.asyncShowImagePicker({ @@ -106,52 +151,98 @@ SYImagePicker.showImagePicker( // Cancel selection. The value of err.message is "Cancelled". } }; -/** -* Clear cache. -**/ -handleDeleteCache = () => { + /** + * Clear cache. + **/ + handleDeleteCache = () => { SYImagePicker.deleteCache(); }; -/** -* Remove selected photos. -**/ -handleDeletePhoto = index => { - const { selectedPhotos: oldPhotos } = this.state; - const selectedPhotos = oldPhotos.filter((photo, photoIndex) => photoIndex !== index); - // Update the native photo array. - SYImagePicker.removePhotoAtIndex(index); - } + /** + * Delete the first image using the index + **/ + handleRemoveAtIndex=()=>{ + const {photos} = this.state; + if(!!photos && photos.length > 0){ + SYImagePicker.removePhotoAtIndex(0); + } + }; -/** -* Remove all selected photos. -**/ -STImagePicke.removeAllPhoto() - -/** -* Use the camera. -**/ -SyanImagePicker.openCamera(options, (err, photos) => { - if (err) { - // Cancel the selection. - return; - } - // The selection is successful. Start to render the photo. - // ... -}) - -/** -* Select videos. -**/ -SyanImagePicker.openVideoPicker(options, (err, videos) => { - if (err) { - // Cancel the selection. - return; - } - // The selection is successful. Start to process the video. - // ... -}) + /** + * Remove all selected photos. + **/ + handleRemoveAll=()=>{ + SYImagePicker.removeAllPhoto(); + }; + /** + * Take a photo + **/ + handleLaunchCamera = async () => { + SYImagePicker.openCamera( + {isCrop: true, showCropCircle: true, showCropFrame: false, videoMaximumDuration: 5}, + (err, photos) => { + if (!err) { + this.setState({video: []}); + this.setState({ + photos: photos, + }); + {photos.map((item, index) => { + console.log("rn_syan_image_picker handleLaunchCamera result: ", + "uri:" + item.uri + "-- " + + "width:" + item.width + "-- " + + "height:" + item.height + "-- " + + "type:" + item.type + "-- " + + "size:" + item.size + "-- " + + "original_uri:" + item.original_uri + "-- " + + "base64:" + item.base64 + "-- "); + }) + } + } + }, + ); + }; + + /** + * Select videos. + **/ + handleOpenVideoPicker = () => { + SYImagePicker.openVideoPicker( + {allowPickingMultipleVideo: true, videoCount: 10}, + (err, res) => { + if (!err) { + this.setState({photos: []}); + this.setState({ + video: res, + }); + {res.map((item, index) => { + console.log("rn_syan_image_picker handleOpenVideoPicker result: ", + "uri:" + item.uri + "-- " + + "width:" + item.width + "-- " + + "height:" + item.height + "-- " + + "type:" + item.type + "--" + + "size:" + item.size + "-- " + + "original_uri:" + item.original_uri + "-- " + + "base64:" + item.base64 + "-- "); + })} + } + }, + ); + }; + + render() { + return ( + +