Skip to content

docs: 添加迁移声明 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sesont97 wants to merge 1 commit into
base: sig
Choose a base branch
from
Open

docs: 添加迁移声明 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
# react-native-file-selector
# 迁移声明

本项目基于 [react-native-file-selector](https://github.com/prscX/react-native-file-selector)
- 本仓库已迁移至 GitCode：[OpenHarmony-SIG/rntpc_react-native-file-selector](https://gitcode.com/openharmony-sig/rntpc_react-native-file-selector)。
- 包名已更改为 `@react-native-ohos/react-native-file-selector`，支持直接从 npm 下载。
- 更多详情请查阅新仓库的 README 文件。
- 本仓库旧版本的文档已归档：[链接](/doc/zh-cn.md)

## 文档地址 / Documentation URL
# Migration Announcement

[中文 / Chinese](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-file-selector.md)

## Codegen

该库已接入 codegen，具体请查阅文档。

The library has been integrated with codegen. Please refer to the documentation for details.

## 请悉知 / Acknowledgements

本项目基于 [The Apache License (Apache)](https://github.com/prscX/react-native-file-selector/blob/master/LICENSE) ，请自由地享受和参与开源。
- This repository has been migrated to GitCode：[OpenHarmony-SIG/rntpc_react-native-file-selector](https://gitcode.com/openharmony-sig/rntpc_react-native-file-selector)
- The package name has been changed to `@react-native-ohos/react-native-file-selector` and is now available for direct download from npm.
- For more details, please refer to the README in the new repository.
- Archived documentation for versions in this repository can be found here: [Link](/doc/en.md)
209 changes: 209 additions & 0 deletions doc/en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
> Template version: v0.2.2

<p align="center">
<h1 align="center"> <code>react-native-file-selector</code> </h1>
</p>
<p align="center">
<a href="https://github.com/prscX/react-native-file-selector">
<img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
</a>
<a href="https://github.com/prscX/react-native-file-selector/blob/master/README.md">
<img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License" />
</a>
</p>

> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-file-selector)

## Installation and Usage

Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/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.

Go to the project directory and execute the following instruction:




#### **npm**

```bash
npm install @react-native-oh-tpl/react-native-file-selector
```

#### **yarn**

```bash
yarn add @react-native-oh-tpl/react-native-file-selector
```


The following code shows the basic use scenario of the repository:

> [!WARNING] The name of the imported repository remains unchanged.

```jsx
import FileSelector from 'react-native-file-selector';
import React from 'react';
function App(): React.JSX.Element {

return (
<FileSelector
onDone={(path) => {console.log("file selected: " + path);}}
onCancel={() => {console.log("cancelled");}}
/>)
};
export default App;
```

## 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](/en/codegen.md).

## Link

Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.

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

```json
{
...
"overrides": {
"@rnoh/react-native-openharmony" : "file:./react_native_openharmony"
}
}
```

### 2.Introducing Native Code

Currently, two methods are available:

1. (Recommended) Use the HAR file.
2. 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.

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-file-selector": "file:../../node_modules/@react-native-oh-tpl/react-native-file-selector/harmony/file_selector.har"
}
```

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

```bash
cd entry
ohpm install
```

Method 2: Directly link to the source code.

> [!TIP] For details, see[Directly Linking Source Code](/en/link-source-code.md)


### 3.Introducing RNFileSelectorPackage Package to ArkTS

Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code:

```diff
...
import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
+import {RNFileSelectorPackage} from '@react-native-oh-tpl/react-native-file-selector/ts';


export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
+ new RNFileSelectorPackage(ctx)
];
}
```

### 4.Running

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

```bash
cd entry
ohpm install
```

Then build and run the code.

## Constraints

### 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-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases)

## Properties

FileSelector

| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :---------------- | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- |
| filter | Filter to sort the files | string | no | All | yes |
| path | Path of directory | string | no | All | yes |
| onDone | Function called when file is selected | func | no | All | yes |
| onCancel | Function called when file selector is closed without selecting any file | func | no | All | yes |
| title | Title on the toolbar | string | no | Android iOS | no |
| closeMenu | Color of tint | string | no | Android iOS | no |
| hiddenFiles | If true it shows hidden files as well | bool | no | Android | no |
| filterDirectories | Filter should be applied on directories or not | bool | no | Android | no |

## API

> [!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 |
| ---- | ---------------------- | -------- | -------- | -------- | ----------------- |
| Show | present a fileselector | function | no | All | yes |

Show

```js
Show(filter?: string, path?: string, onDone?: func, onCancel?: func, title?: string, closeMenu?: string, hiddenFiles?: bool, filterDirectories?: bool);
```

| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :---------------- | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- |
| filter | Filter to sort the files | string | no | All | yes |
| path | Path of directory | string | no | All | yes |
| onDone | Function called when file is selected | func | no | All | yes |
| onCancel | Function called when file selector is closed without selecting any file | func | no | All | yes |
| title | Title on the toolbar | string | no | Android iOS | no |
| closeMenu | Color of tint | string | no | Android iOS | no |
| hiddenFiles | If true it shows hidden files as well | bool | no | Android | no |
| filterDirectories | Filter should be applied on directories or not | bool | no | Android | no |

## Known Issues


- [ ] FileSelector title: Harmony issue: [issue#4](https://github.com/react-native-oh-library/react-native-file-selector/issues/4)
- [ ] FileSelector closeMenu: Harmony issue: [issue#5](https://github.com/react-native-oh-library/react-native-file-selector/issues/5)
- [ ] FileSelector hiddenFiles: Harmony issue: [issue#6](https://github.com/react-native-oh-library/react-native-file-selector/issues/6)
- [ ] FileSelector filterDirectories: Harmony issue: [issue#7](https://github.com/react-native-oh-library/react-native-file-selector/issues/7)

- [ ] Show title: Harmony issue: [issue#4](https://github.com/react-native-oh-library/react-native-file-selector/issues/4)
- [ ] Show closeMenu: Harmony issue: [issue#5](https://github.com/react-native-oh-library/react-native-file-selector/issues/5)
- [ ] Show hiddenFiles: Harmony issue: [issue#6](https://github.com/react-native-oh-library/react-native-file-selector/issues/6)
- [ ] Show filterDirectories: Harmony issue: [issue#7](https://github.com/react-native-oh-library/react-native-file-selector/issues/7)

## Others

## License

This project is licensed under [Apache License 2.0](https://github.com/prscX/react-native-file-selector/blob/master/LICENSE).
Loading