diff --git a/en/react-native-document-picker.md b/en/react-native-document-picker.md index a21476105c1ba82499e9e0118d5d00a12060dc15..d2835cbfab69c0713e8576fe2792e96c99ef7d04 100644 --- a/en/react-native-document-picker.md +++ b/en/react-native-document-picker.md @@ -1,40 +1,35 @@ -> Template version: v0.2.2 +> Template version: v0.3.0

react-native-document-picker

-

- - Supported platforms - - - License - - -

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/document-picker) -## Installation and Usage +This project is based on [react-native-document-picker@9.2.0](https://github.com/react-native-documents/document-picker). -Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-document-picker Releases](https://github.com/react-native-oh-library/document-picker/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-document-picker`, The version correspondence details are as follows: +| Version | Package Name | Repository | Release | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| <= 9.2.0@deprecated | @react-native-oh-library/react-native-document-picker | [Github(deprecated)](https://github.com/react-native-oh-library/document-picker) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/document-picker/releases) | +| > 9.2.0 | @react-native-ohos/react-native-document-picker | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/releases) | -Go to the project directory and execute the following instruction: +## 1. Installation and Usage +Go to the project directory and execute the following instruction: -#### npm +#### npm ```bash -npm install @react-native-oh-tpl/react-native-document-picker +npm install @react-native-ohos/react-native-document-picker ``` #### yarn ```bash -yarn add @react-native-oh-tpl/react-native-document-picker +yarn add @react-native-ohos/react-native-document-picker ``` @@ -315,31 +310,33 @@ const styles = StyleSheet.create({ }); ``` -## Use Codegen - -If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). - -## Link +## 2. Manual Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project +### 2.1 Overrides RN SDK + +For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides). ```json { - ... "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory } } ``` -### 2. Introducing Native Code +### 2.2 Introducing Native Code Currently, two methods are available: +- Use the HAR file. +- Directly link to the source code. + Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. @@ -349,7 +346,7 @@ Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-document-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-document-picker/harmony/document_picker.har" + "@react-native-ohos/react-native-document-picker": "file:../../node_modules/@react-native-ohos/react-native-document-picker/harmony/document_picker.har" } ``` @@ -366,13 +363,46 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3. Introducing DocumentPickerPackage to ArkTS +### 2.3 Configuring CMakeLists and Introducing DocumentPickerPackage + +> **[!TIP] Version v9.2.0 and above requires.** + +Open entry/src/main/cpp/CMakeLists.txt and add the following code: + +```diff ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +# RNOH_BEGIN: manual_package_linking_1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-document-picker/src/main/cpp" ./document_picker) +# RNOH_END: manual_package_linking_1 + +# RNOH_BEGIN: manual_package_linking_2 ++ target_link_libraries(rnoh_app PUBLIC rnoh_document_picker) +# RNOH_END: manual_package_linking_2 +``` + +Open entry/src/main/cpp/PackageProvider.cpp and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" ++ #include "DocumentPickerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... -+ import { DocumentPickerPackage } from '@react-native-oh-tpl/react-native-document-picker/ts'; ++ import { DocumentPickerPackage } from '@react-native-ohos/react-native-document-picker/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -382,7 +412,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 2.4 Running Click the `sync` button in the upper right corner. @@ -395,21 +425,19 @@ ohpm install Then build and run the code. -## Constraints - -### Compatibility +## 3. Constraints +### 3.1 Compatibility -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +Check the release version information in the release address of the third-party library:[@react-native-ohos/react-native-document-picker Releases](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/releases) -Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-document-picker Releases](https://github.com/react-native-oh-library/document-picker/releases) -## Properties +## 4. Properties > [!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. -### option pick 方法的传参选项 +option pick 方法的传参选项 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------- | ----------- | ----------------- | @@ -420,7 +448,7 @@ Check the release version information in the release address of the third-party | transitionStyle | Configure the transition style of the picker. Defaults to coverVertical. | 'coverVertical' \| 'flipHorizontal' \| 'crossDissolve' \| 'partialCurl' | no | IOS | no | | mode | Defaults to import. If mode is set to import the document picker imports the file from outside to inside the sandbox, otherwise if mode is set to open the document picker opens the file in-place. | "import" \| "open" | no | IOS | no | -## API +## 5. API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -437,15 +465,15 @@ Check the release version information in the release address of the third-party | types | File type object. eg type.images、types.pdf | function | No | IOS/Android | yes | | perPlatformTypes | Different platforms, file type object map | function | No | IOS/Android | yes | -## Known Issues +## 6. Known Issues - [ ] HarmonyOS 端 file picker selectMode 设置选文件夹无效: [issue#1](https://github.com/react-native-oh-library/document-picker/issues/1) - [ ] releaseSecureAccess 选择沙箱路径外文件无法实现， HarmonyOS 暂无此能力接口: [issue#2](https://github.com/react-native-oh-library/document-picker/issues/2) -## Others +## 7. Others - 因权限问题无法读写图库资源，文件管理中从图库选择文件暂不支持。 -## License +## 8. License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-documents/document-picker/blob/master/LICENSE.md). +This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/blob/master/LICENSE.md). \ No newline at end of file diff --git a/zh-cn/react-native-document-picker.md b/zh-cn/react-native-document-picker.md index 52cfb1a4ee08fadbdd6a473388c9ff5ea6bf7ccf..b026b91ca89ae6d70880f13043244ed3dcb67486 100644 --- a/zh-cn/react-native-document-picker.md +++ b/zh-cn/react-native-document-picker.md @@ -1,25 +1,21 @@ -> 模板版本：v0.2.2 +> 模板版本：v0.3.0

react-native-document-picker

-

- - Supported platforms - - - License - - -

+本项目基于 [react-native-document-picker@9.2.0](https://github.com/react-native-documents/document-picker) 开发。 + +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-document-picker`，具体版本所属关系如下： -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/document-picker) +| Version | Package Name | Repository | Release | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| <= 9.2.0@deprecated | @react-native-oh-library/react-native-document-picker | [Github(deprecated)](https://github.com/react-native-oh-library/document-picker) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/document-picker/releases) | +| > 9.2.0 | @react-native-ohos/react-native-document-picker | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/releases) | -## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-document-picker Releases](https://github.com/react-native-oh-library/document-picker/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 1. 安装与使用 进入到工程目录并输入以下命令： @@ -30,13 +26,13 @@ #### npm ```bash -npm install @react-native-oh-tpl/react-native-document-picker +npm install @react-native-ohos/react-native-document-picker ``` #### yarn ```bash -yarn add @react-native-oh-tpl/react-native-document-picker +yarn add @react-native-ohos/react-native-document-picker ``` @@ -254,28 +250,30 @@ const styles = StyleSheet.create({ ``` -## 使用 Codegen（如本库已适配了 Codegen ） +## 2. Manual Link -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +此步骤为手动配置原生依赖项的指导。 -## Link +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +### 2.1 Overrides RN SDK -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `harmony/oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。 + +关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides) -### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 ```json { - ... "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本 + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径 + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径 } } ``` -### 2.引入原生端代码 +### 2.2 引入原生端代码 目前有两种方法： @@ -291,7 +289,7 @@ const styles = StyleSheet.create({ ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-document-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-document-picker/harmony/document_picker.har" + "@react-native-ohos/react-native-document-picker": "file:../../node_modules/@react-native-ohos/react-native-document-picker/harmony/document_picker.har" } ``` @@ -308,13 +306,46 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 DocumentPickerPackage +### 2.3 配置 CMakeLists 和引入 DocumentPickerPackage + +> **[!TIP] 版本 v9.2.0 及以上需要.** + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +# RNOH_BEGIN: manual_package_linking_1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-document-picker/src/main/cpp" ./document_picker) +# RNOH_END: manual_package_linking_1 + +# RNOH_BEGIN: manual_package_linking_2 ++ target_link_libraries(rnoh_app PUBLIC rnoh_document_picker) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" ++ #include "DocumentPickerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... -+ import { DocumentPickerPackage } from '@react-native-oh-tpl/react-native-document-picker/ts'; ++ import { DocumentPickerPackage } from '@react-native-ohos/react-native-document-picker/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -324,7 +355,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 2.4 运行 点击右上角的 `sync` 按钮 @@ -337,22 +368,19 @@ ohpm install 然后编译、运行即可。 -## 约束与限制 - -### 兼容性 +## 3. 约束与限制 +### 3.1 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-document-picker Releases](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/releases) -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-document-picker Releases](https://github.com/react-native-oh-library/document-picker/releases) - -## 属性 +## 4. 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -### option pick方法的传参选项 + option pick方法的传参选项 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -363,7 +391,7 @@ ohpm install | transitionStyle | Configure the transition style of the picker. Defaults to coverVertical. | 'coverVertical' \| 'flipHorizontal' \| 'crossDissolve' \| 'partialCurl' | no | IOS | no | | mode | Defaults to import. If mode is set to import the document picker imports the file from outside to inside the sandbox, otherwise if mode is set to open the document picker opens the file in-place. | "import" \| "open" | no | IOS | no | -## API +## 5. API > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -382,14 +410,14 @@ ohpm install | perPlatformTypes | Different platforms, file type object map | function | No | IOS/Android | yes | -## 遗留问题 +## 6. 遗留问题 - [ ] HarmonyOS 端file picker selectMode设置选文件夹无效: [issue#1](https://github.com/react-native-oh-library/document-picker/issues/1) - [ ] releaseSecureAccess选择沙箱路径外文件无法实现， HarmonyOS 暂无此能力接口: [issue#2](https://github.com/react-native-oh-library/document-picker/issues/2) -## 其他 +## 7. 其他 - 因权限问题无法读写图库资源，文件管理中从图库选择文件暂不支持。 -## 开源协议 +## 8. 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-documents/document-picker/blob/master/LICENSE.md) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-document-picker/blob/master/LICENSE.md) ，请自由地享受和参与开源。