From bf175c1a92c5f92768105f23ca0412b58b4de430 Mon Sep 17 00:00:00 2001 From: ljje <1370314186@qq.com> Date: Sat, 12 Oct 2024 10:23:41 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#IAWGSR]=20=E7=BF=BB?= =?UTF-8?q?=E8=AF=91baronha-ting=E7=AD=89=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/baronha-ting.md | 162 +- en/react-content-loader.md | 133 +- en/react-native-awesome-gallery.md | 42 +- en/react-native-background-fetch.md | 92 +- en/react-native-bars.md | 182 +-- en/react-native-ble-manager.md | 172 +- en/react-native-dismiss-keyboard.md | 213 +-- en/react-native-email-link.md | 83 +- en/react-native-fast-image.md | 131 +- en/react-native-file-access.md | 113 +- en/react-native-file-viewer.md | 278 ++-- en/react-native-gifted-charts.md | 1716 ++++++++++---------- en/react-native-image-capinsets-next.md | 141 +- en/react-native-image-colors.md | 136 +- en/react-native-image-pan-zoom.md | 125 +- en/react-native-image-viewing.md | 75 +- en/react-native-keyboard-accessory.md | 159 +- en/react-native-keys.md | 112 +- en/react-native-loading-spinner-overlay.md | 120 +- en/react-native-mail.md | 79 +- en/react-native-maps-directions.md | 226 +-- en/react-native-markdown-renderer.md | 44 +- en/react-native-masked-text.md | 32 +- en/react-native-notifier.md | 44 +- en/react-native-parsed-text.md | 208 +-- en/react-native-phone-number-input.md | 38 +- en/react-native-reanimated-bottom-sheet.md | 147 +- en/react-native-safe-modules.md | 118 +- en/react-native-screenshot-prevent.md | 79 +- en/react-native-scroll-bottom-sheet.md | 38 +- en/react-native-send-intent.md | 272 ++-- en/react-native-sensitive-info.md | 197 ++- en/react-native-shake.md | 141 +- en/react-native-signature-canvas.md | 191 ++- en/react-native-snackbar.md | 87 +- en/react-native-sticky-parallax-header.md | 122 +- en/react-native-svg-capi.md | 350 ++-- en/react-native-tcp-socket.md | 193 ++- en/react-native-theme-control.md | 112 +- en/react-native-theme-switch-animation.md | 201 ++- en/react-native-tts.md | 167 +- en/react-native-version-number.md | 79 +- en/react-native-voice-voice.md | 721 ++++---- en/react-native-walkthrough-tooltip.md | 83 +- en/react-navigation-bottom-sheet.md | 100 +- en/react-navigation.md | 41 +- en/reassure.md | 112 +- en/rn-emoji-keyboard.md | 86 +- 48 files changed, 4222 insertions(+), 4271 deletions(-) diff --git a/en/baronha-ting.md b/en/baronha-ting.md index 723d4294..1674017e 100644 --- a/en/baronha-ting.md +++ b/en/baronha-ting.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

@baronha/ting

@@ -12,16 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/ting) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/ting) +## 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/ting Releases](https://github.com/react-native-oh-library/ting/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -39,9 +38,9 @@ yarn add @react-native-oh-tpl/ting@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import { View } from "react-native"; @@ -73,17 +72,17 @@ const App = () => { export default App; ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -94,18 +93,15 @@ export default App; } ``` -### 2.引入原生端代码 - -目前有两种方法： +### 2. Introducing Native Code -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Currently, two methods are available: -方法一：通过 har 包引入（推荐） +Method 1 (recommended): Use the HAR file. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -114,22 +110,22 @@ export default App; } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNTingPackage +### 3. Introducing RNTingPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -143,90 +139,90 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases) -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### ToastOptions -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|----------------------|---------------------------------------------------------|------|----------|----------|---------------------| -| title | The text for the toast’s title | string | no | All | yes | -| message | The text for the toast’s message | string | no | All | yes | -| titleColor | The color of the title text in hexadecimal format | string | no | All | yes | -| messageColor | The color of the message text in hexadecimal format | string | no | All | yes | -| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially | -| duration | The lifetime of the toast (seconds) | number | no | All | yes | -| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes | -| shouldDismissByDrag | Whether the toast can be dismissed by dragging | boolean | no | All | yes | -| position | Toast is displayed from top or bottom | string | no | All |yes | -| backgroundColor | The background color of the toast in hexadecimal format| string | no | All |yes | -| icon | A custom icon for the toast | object | no | All | yes | -| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| title | The text for the toast’s title | string | no | All | yes | +| message | The text for the toast’s message | string | no | All | yes | +| titleColor | The color of the title text in hexadecimal format | string | no | All | yes | +| messageColor | The color of the message text in hexadecimal format | string | no | All | yes | +| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially | +| duration | The lifetime of the toast (seconds) | number | no | All | yes | +| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes | +| shouldDismissByDrag | Whether the toast can be dismissed by dragging | boolean | no | All | yes | +| position | Toast is displayed from top or bottom | string | no | All | yes | +| backgroundColor | The background color of the toast in hexadecimal format | string | no | All | yes | +| icon | A custom icon for the toast | object | no | All | yes | +| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes | ### AlertOptions -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| title | The text for the toast’s title | string | no | All | yes | -| message | The text for the toast’s message | string | no | All | yes | -| titleColor | The color of the title text in hexadecimal format | string | no | All | yes | -| messageColor | The color of the message text in hexadecimal format | string | no | All | yes | -| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially | -| duration | The lifetime of the toast (seconds) | number | no | All | yes | -| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes | -| shouldDismissByTap | Whether the toast can be dismissed by tapping | boolean | no | All | yes | -| backgroundColor | The background color of the toast in hexadecimal format| string | no | All |yes | -| borderRadius | The border radius of the toast box, which determines how rounded the corners are | number | no | All | yes | -| blurBackdrop | The intensity of the background blur effect on Android platforms | number | no | Android | no | -| backdropOpacity | The opacity of the background blur effect on Android platforms, with a range from 0 (fully transparent) to 1 (fully opaque) | number | no | All | yes | -| icon | A custom icon for the toast | object | no | All | yes | -| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| title | The text for the toast’s title | string | no | All | yes | +| message | The text for the toast’s message | string | no | All | yes | +| titleColor | The color of the title text in hexadecimal format | string | no | All | yes | +| messageColor | The color of the message text in hexadecimal format | string | no | All | yes | +| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially | +| duration | The lifetime of the toast (seconds) | number | no | All | yes | +| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes | +| shouldDismissByTap | Whether the toast can be dismissed by tapping | boolean | no | All | yes | +| backgroundColor | The background color of the toast in hexadecimal format | string | no | All | yes | +| borderRadius | The border radius of the toast box, which determines how rounded the corners are | number | no | All | yes | +| blurBackdrop | The intensity of the background blur effect on Android platforms | number | no | Android | no | +| backdropOpacity | The opacity of the background blur effect on Android platforms, with a range from 0 (fully transparent) to 1 (fully opaque) | number | no | All | yes | +| icon | A custom icon for the toast | object | no | All | yes | +| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes | ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| toast | Displays a Toast notification | function | yes | All | yes | -| alert | Displays an Alert dialog | function | yes | All | yes | -| dismissAlert | Closes the currently displayed Alert dialog | function | yes | All | yes | -| setup | Configures global settings for Toast and Alert | function | yes | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ---------------------------------------------- | -------- | -------- | -------- | ----------------- | +| toast | Displays a Toast notification | function | yes | All | yes | +| alert | Displays an Alert dialog | function | yes | All | yes | +| dismissAlert | Closes the currently displayed Alert dialog | function | yes | All | yes | +| setup | Configures global settings for Toast and Alert | function | yes | All | yes | -## 遗留问题 +## Known Issues -- [ ] AlertOptions和ToastOptions中的preset：done，动画效果未实现。[issue#3](https://github.com/react-native-oh-library/ting/issues/3) +- [ ] AlertOptions 和 ToastOptions 中的 preset：done，动画效果未实现。[issue#3](https://github.com/react-native-oh-library/ting/issues/3) -## 其他 +## Others -- AlertOptions中的blurBackdrop参数配置后，iOS不支持，Android无效果。 +- AlertOptions 中的 blurBackdrop 参数配置后，iOS 不支持，Android 无效果。 -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/baronha/ting/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/baronha/ting/blob/main/LICENSE). diff --git a/en/react-content-loader.md b/en/react-content-loader.md index 0464395d..048852ca 100644 --- a/en/react-content-loader.md +++ b/en/react-content-loader.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-content-loader

@@ -12,16 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-content-loader) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-content-loader) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases)，并下载适用版本的 tgz 包。 +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-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases). +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -39,84 +38,92 @@ yarn add @react-native-oh-tpl/react-content-loader@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import ContentLoader, { Facebook, Code, List, BulletList, Instagram, Rect, Circle } from 'react-content-loader/native' -import { View, ScrollView } from "react-native" +import ContentLoader, { + Facebook, + Code, + List, + BulletList, + Instagram, + Rect, + Circle, +} from "react-content-loader/native"; +import { View, ScrollView } from "react-native"; export function AppExample() { - return - - - - - - - - - - - - + return ( + + + + + + + + + + + + + + ); } - ``` + ## Link 本库依赖@react-native-oh-tpl/react-native-svg，如已在鸿蒙工程中引入过该库，则无需再次引入。 如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入 +## 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-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases) -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +## Properties -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases) +> [!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. -## 属性 +### Options -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- | -------------- | ----------------- | +| animate | Opt-out of animations with false | boolean | no | all | yes | +| speed | Animation speed in seconds | number | no | all | yes | +| rtl | Content right-to-left | boolean | no | all | yes | +| backgroundColor | Used as background of animation | string | no | all | yes | +| viewBox | Use viewBox props to set a custom viewBox value,for more information about how to use it,read the article [How to Scale SVG](https://css-tricks.com/scale-svg/) | string | no | all | yes | +| foregroundColor | Used as the foreground of animation | string | no | all | yes | +| interval | Animation interval in seconds | number | no | all | yes | +| beforeMask | Define custom shapes before content | JSX.Element | no | all | partially | +| uniqueKey | Use the same value of prop key, that will solve inconsistency on the SSR | string | no | React DOM only | no | +| title | It's used to describe what element it is. Use '' (empty string) to remove. | string | no | React DOM only | no | +| baseUrl | Required if you're using `` document ``. This prop is common used as: `` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). | string | no | React DOM only | no | +| backgroundOpacity | Background opacity (0 = transparent, 1 = opaque)used to solve an issue in [Safari](#safari--ios) | number | no | React DOM only | no | +| foregroundOpacity | Animation opacity (0 = transparent, 1 = opaque)used to solve an issue in [Safari](#safari--ios) | number | no | React DOM only | no | +| style | css style | React.CSSProperties | no | React DOM only | no | -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +## Known Issues -### Options +- [ ] beforeMaskProperties 设置非 svg 暴露出来的组件时无效: [issue#256](https://github.com/react-native-oh-library/react-native-harmony-svg/issues/256) + +## Others + +## License -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| animate | Opt-out of animations with false | boolean | no | all | yes | -| speed | Animation speed in seconds | number | no | all | yes | -| rtl | Content right-to-left | boolean | no | all | yes | -| backgroundColor | Used as background of animation | string | no | all | yes | -| viewBox | Use viewBox props to set a custom viewBox value,for more information about how to use it,read the article [How to Scale SVG](https://css-tricks.com/scale-svg/) | string | no | all | yes | -| foregroundColor | Used as the foreground of animation | string | no | all | yes | -| interval | Animation interval in seconds | number | no | all | yes | -| beforeMask | Define custom shapes before content | JSX.Element | no | all | partially | -| uniqueKey | Use the same value of prop key, that will solve inconsistency on the SSR | string | no | React DOM only | no | -| title | It's used to describe what element it is. Use '' (empty string) to remove. | string | no | React DOM only | no | -| baseUrl | Required if you're using `` document ``. This prop is common used as: `` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). | string | no | React DOM only | no | -| backgroundOpacity | Background opacity (0 = transparent, 1 = opaque)used to solve an issue in [Safari](#safari--ios) | number | no | React DOM only | no | -| foregroundOpacity | Animation opacity (0 = transparent, 1 = opaque)used to solve an issue in [Safari](#safari--ios) | number | no | React DOM only | no | -| style | css style | React.CSSProperties | no | React DOM only | no | - - -## 遗留问题 -- [ ] beforeMask属性设置非svg暴露出来的组件时无效: [issue#256](https://github.com/react-native-oh-library/react-native-harmony-svg/issues/256) -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE). diff --git a/en/react-native-awesome-gallery.md b/en/react-native-awesome-gallery.md index 5ac5a65b..506003fe 100644 --- a/en/react-native-awesome-gallery.md +++ b/en/react-native-awesome-gallery.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-awesome-gallery

@@ -13,11 +13,11 @@

-> [!TIP] [Github 地址](https://github.com/Flair-Dev/react-native-awesome-gallery) +> [!TIP] [GitHub address](https://github.com/Flair-Dev/react-native-awesome-gallery) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -35,7 +35,7 @@ yarn add react-native-awesome-gallery@0.4.2 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```ts import React from 'react'; @@ -70,21 +70,21 @@ export default function App() { 如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)进行引入 -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.28; SDK: HarmonyOS-NEXT-DB5 5.0.0.60; IDE: DevEco Studio 5.0.3.655; ROM: 3.0.0.36; 2. RNOH: 0.72.29; SDK: HarmonyOS-NEXT-DB6 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: 5.0.0.60; -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ----------------- | ------------------------------- | -------------- | -------- | ----------- | ----------------- | @@ -111,11 +111,11 @@ export default function App() { | containerDimensions | Dimensions object for the View that wraps gallery. | {width: number, height: number} | No | iOS/Android | Yes | | style | Is double tap enabled | Style of container | No | iOS/Android | Yes | -## 事件 +## Event -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ------------------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | @@ -128,23 +128,23 @@ export default function App() { | onScaleEnd(scale: number) | Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with scale > maxScale or scale < 1 | function | No | iOS/Android | Yes | | onPanStart() | Fired when pan gesture starts | function | No | iOS/Android | Yes | -## 静态方法 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ------------------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | | setIndex | Sets active index | (newIndex: number, animated?: boolean) => void | No | iOS/Android | Yes | | reset | Resets scale, translation | (animated?: boolean) => void | No | iOS/Android | Yes | -## 遗留问题 +## Known Issues - [ ] onTranslationYChange事件设置后，拖动图片会发生异常，iOS 和 Android平台均有该问题: [issue#84](https://github.com/pavelbabenko/react-native-awesome-gallery/issues/84) - [x] react-native-gesture-handler库Gesture.Tap()事件无法获取正确的当前坐标和手指数，导致doubleTapScale、doubleTapInterval、doubleTapEnabled、onDoubleTap不生效: [issue#21](https://github.com/react-native-oh-library/react-native-harmony-gesture-handler/issues/21) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/pavelbabenko/react-native-awesome-gallery/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/pavelbabenko/react-native-awesome-gallery/blob/main/LICENSE). \ No newline at end of file diff --git a/en/react-native-background-fetch.md b/en/react-native-background-fetch.md index 42e9b6ab..d9163c17 100644 --- a/en/react-native-background-fetch.md +++ b/en/react-native-background-fetch.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-background-fetch

@@ -13,15 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-background-fetch) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-background-fetch) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-background-fetch Releases](https://github.com/react-native-oh-library/react-native-background-fetch/releases)，并下载适用版本的 tgz 包。 +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-background-fetch Releases](https://github.com/react-native-oh-library/react-native-background-fetch/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -39,9 +39,9 @@ yarn add @react-native-oh-tpl/react-native-background-fetch@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React from "react"; @@ -198,17 +198,17 @@ const styles = StyleSheet.create({ export default App; ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -219,18 +219,15 @@ export default App; } ``` -### 引入原生端代码 +### Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -239,22 +236,22 @@ export default App; } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 在 ArkTs 侧引入 RNBackgroundFetchPackage +### Introducing RNBackgroundFetchPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -268,7 +265,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 在 ArkTs 侧引入 RNBackgroundFetchExtensionAbility +### Introducing RNBackgroundFetchExtensionAbility to ArkTS 1. 打开 `entry/src/main/ets`，新建目录及 ArkTS 文件，新建一个目录并命名为 WorkSchedulerExtension。在 WorkSchedulerExtension 目录下，新建一个 ArkTS 文件并命名为 WorkSchedulerExtension.ets，用以实现延迟任务回调接口。 @@ -305,34 +302,34 @@ export default class MyWorkSchedulerExtensionAbility extends RNBackgroundFetchEx } ``` -### 运行 +### Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-background-fetch Releases](https://github.com/react-native-oh-library/react-native-background-fetch/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-background-fetch Releases](https://github.com/react-native-oh-library/react-native-background-fetch/releases) ## API ### BackgroundFetch -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | Params | Required | Platform | HarmonyOS Support | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------ | -------- | -------- | ----------------- | @@ -422,18 +419,17 @@ BackgroundFetch.status(callback?: (status: BackgroundFetchStatus) => void): Prom | `BackgroundFetchStatus.STATUS_DENIED` | The user explicitly disabled background behavior for this app or for the whole system. | `BackgroundFetchStatus` | yes | iOS | no | | `BackgroundFetchStatus.STATUS_AVAILABLE` | Background fetch is available and enabled. | `BackgroundFetchStatus` | yes | all | yes | -## 遗留问题 - -- [ ] configure 接口部分参数不支持harmonyOS。[issue#2](https://github.com/react-native-oh-library/react-native-background-fetch/issues/2) -- [ ] scheduleTask 接口部分参数不支持harmonyOS。[issue#4](https://github.com/react-native-oh-library/react-native-background-fetch/issues/4) +## Known Issues -## 其他 +- [ ] configure 接口部分参数不支持 harmonyOS。[issue#2](https://github.com/react-native-oh-library/react-native-background-fetch/issues/2) +- [ ] scheduleTask 接口部分参数不支持 harmonyOS。[issue#4](https://github.com/react-native-oh-library/react-native-background-fetch/issues/4) -- iOS可能需要数天的时间才能启动机器学习算法并开始触发常规事件。同时，您应该定期将应用程序带到前台，以使用用户的行为训练iOS机器学习算法。之后iOS才会定期执行任务。 -- Android中，不需要机器算法介入，configure函数可以每15分钟调用一次，scheduleTask可以最低每隔1分钟调用一次。 -- HarmonyOS中，系统会根据内存、功耗、设备温度、用户使用习惯等统一调度，如当系统内存资源不足或温度达到一定挡位时，系统将延迟调度该任务。假如你设置20分钟后执行，第一次任务不一定是20分钟就会执行，有可能十几分钟就执行了，往后的任务得起码2小时以后才会执行，更多详情请查看下面的链接内容。https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/work-scheduler-V5 +## Others +- iOS 可能需要数天的时间才能启动机器学习算法并开始触发常规事件。同时，您应该定期将应用程序带到前台，以使用用户的行为训练 iOS 机器学习算法。之后 iOS 才会定期执行任务。 +- Android 中，不需要机器算法介入，configure 函数可以每 15 分钟调用一次，scheduleTask 可以最低每隔 1 分钟调用一次。 +- HarmonyOS 中，系统会根据内存、功耗、设备温度、用户使用习惯等统一调度，如当系统内存资源不足或温度达到一定挡位时，系统将延迟调度该任务。假如你设置 20 分钟后执行，第一次任务不一定是 20 分钟就会执行，有可能十几分钟就执行了，往后的任务得起码 2 小时以后才会执行，更多详情请查看下面的链接内容。https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/work-scheduler-V5 -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/transistorsoft/react-native-background-fetch/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/transistorsoft/react-native-background-fetch/blob/master/LICENSE). diff --git a/en/react-native-bars.md b/en/react-native-bars.md index d18c2043..f0ac315d 100644 --- a/en/react-native-bars.md +++ b/en/react-native-bars.md @@ -1,5 +1,6 @@ -模板版本：v0.2.2 + +Template version: v0.2.2

react-native-bars

@@ -14,17 +15,15 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-bars) -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-bars) - - -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases)，并下载适用版本的 tgz 包。 +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-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -42,46 +41,46 @@ yarn add @react-native-oh-tpl/react-native-bars@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import * as React from 'react'; -import { Switch, Text, View } from 'react-native'; -import { StatusBar } from "react-native-bars"; +import * as React from "react"; +import { Switch, Text, View } from "react-native"; +import { StatusBar } from "react-native-bars"; export function BarExample() { - const [isEnabled, setIsEnabled] = React.useState(false); - const toggleSwitch = () => setIsEnabled(previousState => !previousState); + const toggleSwitch = () => setIsEnabled((previousState) => !previousState); return ( - - - 关 dark-content/ 开 light-content - - + + + 关 dark-content/ 开 light-content + + ); } - ``` +## 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 -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -92,47 +91,40 @@ export function BarExample() { } ``` -## 使用 Codegen - -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 - -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +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-bars": "file:../../node_modules/@react-native-oh-tpl/react-native-bars/harmony/bars.har" - + } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +Method 2: Directly link to the source code. +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNBarsPackage +### 3. Introducing RNBarsPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -146,77 +138,83 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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. -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +## Constraints -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases) +### 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-bars Releases](https://github.com/react-native-oh-library/react-native-bars/releases) -## 属性 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### StatusBar -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | ---- | ------------ | -| barStyle | Status Bar Style | string | yes | all | yes| -| animated | Should transition between status bar property changes be animated? (has no effect on Android) | boolean | no | all | yes| + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------- | --------------------------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| barStyle | Status Bar Style | string | yes | all | yes | +| animated | Should transition between status bar property changes be animated? (has no effect on Android) | boolean | no | all | yes | ### NavigationBar -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | ---- | ------------ | -| barStyle | Navigation Bar Style | string | yes | all | no| + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------- | -------------------- | ------ | -------- | -------- | ----------------- | +| barStyle | Navigation Bar Style | string | yes | all | no | ### SystemBar -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | ---- | ------------ | -| barStyle | System Style | string | yes | all | no| -| animated | Should transition between status bar property changes be animated? (has no effect on Android) | boolean | no | all | no| -## 静态方法 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------- | --------------------------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| barStyle | System Style | string | yes | all | no | +| animated | Should transition between status bar property changes be animated? (has no effect on Android) | boolean | no | all | no | -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +## Properties -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### StatusBar -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| pushStackEntry | Add an instance to the heap queue | StatusBar.pushStackEntry(props) | no | all | yes | -| popStackEntry | Delete an instance from the heap queue | StatusBar.popStackEntry(entry/*: StatusBarProps*/): void; | no | all | yes | -| replaceStackEntry | Replace an instance of the heap queue | const entry: StatusBarProps = StatusBar.replaceStackEntry(entry ,props ) | no | all | yes | + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------- | ------------------------------------------------------------------------ | -------- | -------- | ----------------- | +| pushStackEntry | Add an instance to the heap queue | StatusBar.pushStackEntry(props) | no | all | yes | +| popStackEntry | Delete an instance from the heap queue | StatusBar.popStackEntry(entry/_: StatusBarProps_/): void; | no | all | yes | +| replaceStackEntry | Replace an instance of the heap queue | const entry: StatusBarProps = StatusBar.replaceStackEntry(entry ,props ) | no | all | yes | ### NavigationBar -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| pushStackEntry | Add an instance to the heap queue |NavigationBar.pushStackEntry(props) | no | all | no | -| popStackEntry | Delete an instance from the heap queue | NavigationBar.popStackEntry(entry/*: NavigationBarProps*/): void; | no | all | no | -| replaceStackEntry | Replace an instance of the heap queue |const entry: NavigationBarProps = NavigationBar.replaceStackEntry(entry ,props ) | no | all | no| -## 遗留问题 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------- | -------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| pushStackEntry | Add an instance to the heap queue | NavigationBar.pushStackEntry(props) | no | all | no | +| popStackEntry | Delete an instance from the heap queue | NavigationBar.popStackEntry(entry/_: NavigationBarProps_/): void; | no | all | no | +| replaceStackEntry | Replace an instance of the heap queue | const entry: NavigationBarProps = NavigationBar.replaceStackEntry(entry ,props ) | no | all | no | + +## Known Issues + +- [ ] react-native-bars 不支持 NavigationBar 问题: [issue#16](https://github.com/react-native-oh-library/react-native-bars/issues/16) -- [ ] react-native-bars不支持NavigationBar问题: [issue#16](https://github.com/react-native-oh-library/react-native-bars/issues/16) +## Others -## 其他 +## License -## 开源协议 +This project is licensed under [The MIT License (MIT)](https://github.com/zoontek/react-native-bars/blob/main/LICENSE). -本项目基于 [The MIT License (MIT)](https://github.com/zoontek/react-native-bars/blob/main/LICENSE) ，请自由地享受和参与开源。 - \ No newline at end of file + diff --git a/en/react-native-ble-manager.md b/en/react-native-ble-manager.md index fa99ff26..63f0f605 100644 --- a/en/react-native-ble-manager.md +++ b/en/react-native-ble-manager.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-ble-manager

@@ -15,17 +15,15 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-ble-manager) +## Installation and Usage -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-ble-manager) +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-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases). -## 安装与使用 +Go to the project directory and execute the following instruction: -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases)，并下载适用版本的 tgz 包。 - -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -43,9 +41,9 @@ yarn add @react-native-oh-tpl/react-native-ble-manager@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React, { useState, useEffect } from 'react'; @@ -240,7 +238,7 @@ export default function BleManagerDemo() { BleManager - + + FileAccess.readFile() - + 读取的文件内容：{fileContent} FileAccess.unlink() - + FileAccess.mkdir() - + 新目录路径：{mkdirParam} FileAccess.mv() - + FileAccess.stat() - + 文件信息：{statInfo} FileAccess.exists() - + 文件是否存在：{isExists === '' ? '' : isExists ? '存在' : '不存在'} FileAccess.cp() - + FileAccess.isDir() - + 是否是目录：{dirOrNot === '' ? '' : dirOrNot ? '是' : '不是'} FileAccess.ls() - + 目录中的文件：{lsList} FileAccess.df() - + 可用空间：{freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB 总空间：{totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB @@ -259,18 +259,18 @@ export function FileAccessDemo() { FileAccess.hash() - + 哈希值：{hashValue} FileAccess.unzip() - + FileAccess.statDir() - + 以下为目录下的文件信息： {statDirInfo.map((item, index) => ({JSON.stringify(item)}))} @@ -278,18 +278,18 @@ export function FileAccessDemo() { FileAccess.readFileChunk() - + 读取的部分文件内容：{readFileChunkInfo} FileAccess.appendFile() - + FileAccess.concatFiles() - + 写入的字节数：{concatBeyts} @@ -318,17 +318,17 @@ const styles = StyleSheet.create({ ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ``` { @@ -339,18 +339,15 @@ const styles = StyleSheet.create({ } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -359,22 +356,22 @@ const styles = StyleSheet.create({ } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNFileAccessPackage +### 3. Introducing RNFileAccessPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -388,32 +385,32 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. #### File System Access API @@ -441,10 +438,10 @@ ohpm install | unzip | Extract a zip archive. | Function | No | iOS/Android | Yes | | writeFile | Write content to a file. | Function | No | iOS/Android | Yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/alpha0010/react-native-file-access/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/alpha0010/react-native-file-access/blob/master/LICENSE). diff --git a/en/react-native-file-viewer.md b/en/react-native-file-viewer.md index 130d2429..aac50e17 100644 --- a/en/react-native-file-viewer.md +++ b/en/react-native-file-viewer.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-file-viewer @@ -15,15 +15,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-viewer) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-file-viewer) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases)，并下载适用版本的 tgz 包。 +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-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -41,9 +41,9 @@ yarn add @react-native-oh-tpl/react-native-file-viewer@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import { StyleSheet, ScrollView, Text, TouchableOpacity } from "react-native"; @@ -51,99 +51,122 @@ import DocumentPicker from "react-native-document-picker"; import FileViewer from "react-native-file-viewer"; export function FlieViewerExample() { - const FileViewerTest = async (option?: any) => { - try { - // 使用react-native-document-picker来选择本地文件进行打开 - const res: any = await DocumentPicker.pick({ - type: [DocumentPicker.types.allFiles] - }); - // uri 为本地文件绝对路径 - await FileViewer?.open(res[0].uri, option); - } catch (e) { - // error - } - }; - - const onDismissCb = () => { - // do sth ... - }; - - return ( - - FileViewerTest()} style={styles.btn}> - Toogle Status Bar - - FileViewerTest("show_displayName string")} style={styles.btn}> - Toogle Status Bar (displayName str) - - FileViewerTest({ displayName: "show_displayName option" })} style={styles.btn}> - Toogle Status Bar (displayName opt) - - FileViewerTest({ showOpenWithDialog: true, onDismiss: onDismissCb })} style={styles.btn}> - Toogle Status Bar (onDismiss) - - FileViewerTest({ showOpenWithDialog: true })} style={styles.btn}> - Toogle Status Bar (showOpenWithDialog) - - FileViewerTest({ showAppsSuggestions: true })} style={styles.btn}> - Toogle Status Bar (showAppsSuggestions) - - - ); + const FileViewerTest = async (option?: any) => { + try { + // 使用react-native-document-picker来选择本地文件进行打开 + const res: any = await DocumentPicker.pick({ + type: [DocumentPicker.types.allFiles], + }); + // uri 为本地文件绝对路径 + await FileViewer?.open(res[0].uri, option); + } catch (e) { + // error + } + }; + + const onDismissCb = () => { + // do sth ... + }; + + return ( + + FileViewerTest()} style={styles.btn}> + Toogle Status Bar + + FileViewerTest("show_displayName string")} + style={styles.btn} + > + Toogle Status Bar (displayName str) + + + FileViewerTest({ displayName: "show_displayName option" }) + } + style={styles.btn} + > + Toogle Status Bar (displayName opt) + + + FileViewerTest({ showOpenWithDialog: true, onDismiss: onDismissCb }) + } + style={styles.btn} + > + Toogle Status Bar (onDismiss) + + FileViewerTest({ showOpenWithDialog: true })} + style={styles.btn} + > + + Toogle Status Bar (showOpenWithDialog) + + + FileViewerTest({ showAppsSuggestions: true })} + style={styles.btn} + > + + Toogle Status Bar (showAppsSuggestions) + + + + ); } const styles = StyleSheet.create({ - TextInput: { - height: 40, - borderColor: "#ccc", - borderWidth: 1, - borderRadius: 4, - width: "90%" - }, - btn: { - borderRadius: 10, - display: "flex", - justifyContent: "center", - alignItems: "center", - padding: 10, - margin: 10, - backgroundColor: "blue" - }, - btnText: { - fontWeight: "bold", - color: "#fff", - fontSize: 20 - }, - selectBtn: { - padding: 8, - margin: 3, - fontSize: 18, - borderWidth: 1, - borderRadius: 8, - borderColor: "#753c13" - }, - selectBtnActive: { - padding: 8, - margin: 3, - backgroundColor: "#e2803b", - fontSize: 18, - borderRadius: 8, - borderWidth: 1 - } + TextInput: { + height: 40, + borderColor: "#ccc", + borderWidth: 1, + borderRadius: 4, + width: "90%", + }, + btn: { + borderRadius: 10, + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: 10, + margin: 10, + backgroundColor: "blue", + }, + btnText: { + fontWeight: "bold", + color: "#fff", + fontSize: 20, + }, + selectBtn: { + padding: 8, + margin: 3, + fontSize: 18, + borderWidth: 1, + borderRadius: 8, + borderColor: "#753c13", + }, + selectBtnActive: { + padding: 8, + margin: 3, + backgroundColor: "#e2803b", + fontSize: 18, + borderRadius: 8, + borderWidth: 1, + }, }); ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -154,18 +177,15 @@ const styles = StyleSheet.create({ } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -174,22 +194,22 @@ const styles = StyleSheet.create({ } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNFileViewerTurboModule Package +### 3. Introducing RNFileViewerTurboModule Package to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -203,58 +223,58 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### `open(filepath: string, options?: Object): Promise` -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --- | --- | --- | --- | --- | --- | -| **filepath** | The absolute path where the file is stored. The file needs to have a valid extension to be successfully detected. Use [react-native-fs constants](https://github.com/itinance/react-native-fs#constants) to determine the absolute path correctly. | string | yes | All | yes | -| **options** (optional) | Some options to customize the behaviour. See below. | Object | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- | +| **filepath** | The absolute path where the file is stored. The file needs to have a valid extension to be successfully detected. Use [react-native-fs constants](https://github.com/itinance/react-native-fs#constants) to determine the absolute path correctly. | string | yes | All | yes | +| **options** (optional) | Some options to customize the behaviour. See below. | Object | no | All | yes | #### Options -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --- | --- | --- | --- | --- | --- | -| **displayName** (optional) | Customize the QuickLook title. | string | no | iOS | yes | -| **onDismiss** (optional) | Callback invoked when the viewer is being dismissed. | function | no | All | partially | -| **showOpenWithDialog** (optional) | If there is more than one app that can open the file, show an _Open With_ dialogue box. | boolean | no | Android | yes | -| **showAppsSuggestions** (optional) | If there is not an installed app that can open the file, open the Play Store with suggested apps. | boolean | no | Android | partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | ------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| **displayName** (optional) | Customize the QuickLook title. | string | no | iOS | yes | +| **onDismiss** (optional) | Callback invoked when the viewer is being dismissed. | function | no | All | partially | +| **showOpenWithDialog** (optional) | If there is more than one app that can open the file, show an _Open With_ dialogue box. | boolean | no | Android | yes | +| **showAppsSuggestions** (optional) | If there is not an installed app that can open the file, open the Play Store with suggested apps. | boolean | no | Android | partially | -## 遗留问题 +## Known Issues -- [x] HarmonyOS端暂不支持关闭预览窗口的回调函数调用: [issue#1](https://github.com/react-native-oh-library/react-native-file-viewer/issues/4) -- [x] HarmonyOS端无法直接跳转到应用市场的推荐应用页，目前只能跳转到应用市场首页: [issue#2](https://github.com/react-native-oh-library/react-native-file-viewer/issues/5) +- [x] HarmonyOS 端暂不支持关闭预览窗口的回调函数调用: [issue#1](https://github.com/react-native-oh-library/react-native-file-viewer/issues/4) +- [x] HarmonyOS 端无法直接跳转到应用市场的推荐应用页，目前只能跳转到应用市场首页: [issue#2](https://github.com/react-native-oh-library/react-native-file-viewer/issues/5) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/vinzscam/react-native-file-viewer/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/vinzscam/react-native-file-viewer/blob/master/LICENSE). diff --git a/en/react-native-gifted-charts.md b/en/react-native-gifted-charts.md index 48077a16..ff8b7878 100644 --- a/en/react-native-gifted-charts.md +++ b/en/react-native-gifted-charts.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-gifted-charts

@@ -14,15 +14,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-gifted-charts) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-gifted-charts) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases)，并下载适用版本的 tgz 包 +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-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases)，并下载适用版本的 tgz 包 -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -40,12 +40,17 @@ yarn add @react-native-oh-tpl/react-native-gifted-charts@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```jsx -import { BarChart, LineChart, PieChart, PopulationPyramid } from "react-native-gifted-charts"; +import { + BarChart, + LineChart, + PieChart, + PopulationPyramid, +} from "react-native-gifted-charts"; export default function () { const data = [{ value: 50 }, { value: 80 }, { value: 90 }, { value: 70 }]; @@ -55,12 +60,17 @@ export default function () { - + - ) + ); } ``` @@ -70,943 +80,941 @@ export default function () { 如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)、[@react-native-oh-tpl/react-native-linear-gradient 文档](/zh-cn/react-native-linear-gradient.md)进行引入 -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) -## 属性 +## Properties 详情见 [react-native-gifted-charts](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts) Props tables -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### BarChart, Horizontal BarChart and Stacked Bar Chart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a bar in the bar chart. It is described in the next table. | barDataItem[] | no | all | yes -| width | Width of the Bar chart | number | no | all | yes -| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes -| onPress | Callback function called on press of a Bar (takes item and index as parameter) | Function | no | all | yes -| onLongPress | Callback function called on long press of a Bar (takes item and index as parameter) | Function | no | all | yes -| onPressOut | Callback function called on press out of a Bar (takes item and index as parameter) | Function | no | all | yes -| focusBarOnPress | used to focus a bar on press by applying styles defined in focusedBarConfig | boolean | no | all | yes -| focusedBarConfig | styles for the focused bar including color, width, opacity, borderRadius etc | FocusedBarConfig | no | all | yes -| focusedBarIndex | index of the initially focused bar, works only when focusBarOnPress is | number | no | all | yes -| maxValue | Maximum value shown in the Y axis | number | no | all | yes -| yAxisOffset | Starting (minimum) value in the Y axis (value at the origin) | number | no | all | yes -| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes -| noOfSections | Number of sections in the Y axis | number | no | all | yes -| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes -| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes -| stepHeight | Height of 1 step/section in the Yaxis | number | no | all | yes -| negativeStepValue| Value of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes -| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes -| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes -| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes -| sectionColors | Background color of the horizontal sections of the chart | ColorValue | no | all | yes -| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes -| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes -| disableScroll | To disable horizontal scroll | boolean | no | all | yes -| showScrollIndicator | To show horizontal scroll indicator| boolean | no | all | yes -| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | iOS | yes -| showLine | To show a Line chart over the Bar chart with the same data | boolean | no | all | yes -| lineData | The data object for the line chart (use only when showLine is true). To hide any datapoint pass hideDataPoint prop as true in specific data item. | Array of items | no | all | yes -| lineConfig | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes -| lineData2 | The data object for the second line chart (use only when showLine is true) | Array of items | no | all | yes -| lineConfig2 | Properties of the second Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes -| lineBehindBars | When set to true, the line chart will appear behind the Bars in case of overlap | boolean | no | all | yes -| autoShiftLabels | When set to true, automatically shifts the X axis labels for negative values | boolean | no | all | yes -| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost bar | boolean | no | all | yes -| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | boolean | no | all | yes -| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios| number | no | iOS | yes -| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes -| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes -| initialSpacing | distance of the first bar from the Y axis | number | no | all | yes -| renderTooltip | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | Function | no | all | yes -| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes -| leftShiftForLastIndexTooltip | The distance by which the tooltip component of the last bar should shift towards left | number | no | all | yes -| adjustToWidth | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth | boolean | no | all | yes -| parentWidth | The width of the parent View or the width that the chart should auto-fit into when `adjustToWidth` is true | number | no | all | yes +| data | An item object represents a bar in the bar chart. It is described in the next table. | barDataItem[] | no | all | yes +| width | Width of the Bar chart | number | no | all | yes +| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes +| onPress | Callback function called on press of a Bar (takes item and index as parameter) | Function | no | all | yes +| onLongPress | Callback function called on long press of a Bar (takes item and index as parameter) | Function | no | all | yes +| onPressOut | Callback function called on press out of a Bar (takes item and index as parameter) | Function | no | all | yes +| focusBarOnPress | used to focus a bar on press by applying styles defined in focusedBarConfig | boolean | no | all | yes +| focusedBarConfig | styles for the focused bar including color, width, opacity, borderRadius etc | FocusedBarConfig | no | all | yes +| focusedBarIndex | index of the initially focused bar, works only when focusBarOnPress is | number | no | all | yes +| maxValue | Maximum value shown in the Y axis | number | no | all | yes +| yAxisOffset | Starting (minimum) value in the Y axis (value at the origin) | number | no | all | yes +| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes +| noOfSections | Number of sections in the Y axis | number | no | all | yes +| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes +| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes +| stepHeight | Height of 1 step/section in the Yaxis | number | no | all | yes +| negativeStepValue| Value of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes +| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes +| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes +| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes +| sectionColors | Background color of the horizontal sections of the chart | ColorValue | no | all | yes +| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes +| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes +| disableScroll | To disable horizontal scroll | boolean | no | all | yes +| showScrollIndicator | To show horizontal scroll indicator| boolean | no | all | yes +| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | iOS | yes +| showLine | To show a Line chart over the Bar chart with the same data | boolean | no | all | yes +| lineData | The data object for the line chart (use only when showLine is true). To hide any datapoint pass hideDataPoint prop as true in specific data item. | Array of items | no | all | yes +| lineConfig | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes +| lineData2 | The data object for the second line chart (use only when showLine is true) | Array of items | no | all | yes +| lineConfig2 | Properties of the second Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes +| lineBehindBars | When set to true, the line chart will appear behind the Bars in case of overlap | boolean | no | all | yes +| autoShiftLabels | When set to true, automatically shifts the X axis labels for negative values | boolean | no | all | yes +| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost bar | boolean | no | all | yes +| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | boolean | no | all | yes +| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios| number | no | iOS | yes +| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes +| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes +| initialSpacing | distance of the first bar from the Y axis | number | no | all | yes +| renderTooltip | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | Function | no | all | yes +| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes +| leftShiftForLastIndexTooltip | The distance by which the tooltip component of the last bar should shift towards left | number | no | all | yes +| adjustToWidth | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth | boolean | no | all | yes +| parentWidth | The width of the parent View or the width that the chart should auto-fit into when `adjustToWidth` is true | number | no | all | yes **Combine Line Chart using showLine** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes -| curved | To show curved line joining the data points | boolean | no | all | yes -| isAnimated | To show animates Line Chart | boolean | no | all | yes -| delay | Delay (in milliseconds) before starting the animation of the line | number | no | all | yes -| thickness | Thickness of the Line | number | no | all | yes -| color | Color of the Line | ColorValue | no | all | yes -| hideDataPoints | To hide data points along the Line chart | boolean | no | all | yes -| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | String | no | all | yes -| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsColor | Color of the data points | ColorValue | no | all | yes -| dataPointsRadius | Radius of data points (when data points' shape is _circular_) | number | no | all | yes -| textColor | Color of the dataPointText | ColorValue | no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| shiftY | To shift the Line chart up or down by the given quantity m | number | no | all | yes -| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes -| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes +| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes +| curved | To show curved line joining the data points | boolean | no | all | yes +| isAnimated | To show animates Line Chart | boolean | no | all | yes +| delay | Delay (in milliseconds) before starting the animation of the line | number | no | all | yes +| thickness | Thickness of the Line | number | no | all | yes +| color | Color of the Line | ColorValue | no | all | yes +| hideDataPoints | To hide data points along the Line chart | boolean | no | all | yes +| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | String | no | all | yes +| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes +| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes +| dataPointsColor | Color of the data points | ColorValue | no | all | yes +| dataPointsRadius | Radius of data points (when data points' shape is _circular_) | number | no | all | yes +| textColor | Color of the dataPointText | ColorValue | no | all | yes +| textFontSize | Font size of the dataPointText | number | no | all | yes +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes +| shiftY | To shift the Line chart up or down by the given quantity m | number | no | all | yes +| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes +| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes **Item description (barDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item representing height of the bar | number | no | all | yes -| barWidth | Width of the bar | number | no | all | yes -| onPress | Function called on pressing the bar | function | no | all | yes -| onLongPress | Function called on long pressing the bar | function | no | all | yes -| onPressOut | Callback function called on press out of a bar | Function | no | all | yes -| disablePress | Prop to disable the press action, defaults to false | boolean | no | all | yes -| frontColor | Color of the bar | ColorValue | no | all | yes -| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes -| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes -| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes -| barStyle | style object for the Bars | object | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes -| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes -| label | Label text appearing below the bar (under the X axis) | string | no | all | yes -| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes -| labelTextStyle | Style object for the label text appearing below the bar | object | no | all | yes -| labelComponent | Custom label component appearing below the bar | Component | no | all | yes -| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes -| topLabelComponent | Custom component appearing above the bar | Component | no | all | yes -| topLabelContainerStyle | Style object for the container of the custom component appearing above the bar| object | no | all | yes -| cappedBars | To show caps on the top of bar | boolean | no | all | yes -| capThickness | Thickness of the bar cap | number | no | all | yes -| capColor | Color of the bar cap | ColorValue | no | all | yes -| capRadius | Border radius of the bar cap | number | no | all | yes -| barBorderRadius | Border radius of the bar | number | no | all | yes -| barBorderTopLeftRadius | Top left border radius of the bar | number| no | all | yes -| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of the bar| number | no | all | yes -| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes -| spacing | Distance of the next Bar from the currennt Bar | number | no | all | yes -| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes -| patternId | ID of the pattern component | String | no | all | yes -| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes -| showXAxisIndex | show small graduation at the X axis for the corresponding bar | boolean | no | all | yes +| value | Value of the item representing height of the bar | number | no | all | yes +| barWidth | Width of the bar | number | no | all | yes +| onPress | Function called on pressing the bar | function | no | all | yes +| onLongPress | Function called on long pressing the bar | function | no | all | yes +| onPressOut | Callback function called on press out of a bar | Function | no | all | yes +| disablePress | Prop to disable the press action, defaults to false | boolean | no | all | yes +| frontColor | Color of the bar | ColorValue | no | all | yes +| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes +| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes +| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes +| barStyle | style object for the Bars | object | no | all | yes +| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes +| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes +| label | Label text appearing below the bar (under the X axis) | string | no | all | yes +| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes +| labelTextStyle | Style object for the label text appearing below the bar | object | no | all | yes +| labelComponent | Custom label component appearing below the bar | Component | no | all | yes +| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes +| topLabelComponent | Custom component appearing above the bar | Component | no | all | yes +| topLabelContainerStyle | Style object for the container of the custom component appearing above the bar| object | no | all | yes +| cappedBars | To show caps on the top of bar | boolean | no | all | yes +| capThickness | Thickness of the bar cap | number | no | all | yes +| capColor | Color of the bar cap | ColorValue | no | all | yes +| capRadius | Border radius of the bar cap | number | no | all | yes +| barBorderRadius | Border radius of the bar | number | no | all | yes +| barBorderTopLeftRadius | Top left border radius of the bar | number| no | all | yes +| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes +| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes +| barBorderBottomRightRadius | Bottom right border radius of the bar| number | no | all | yes +| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes +| spacing | Distance of the next Bar from the currennt Bar | number | no | all | yes +| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes +| patternId | ID of the pattern component | String | no | all | yes +| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes +| showXAxisIndex | show small graduation at the X axis for the corresponding bar | boolean | no | all | yes **Axes and rules related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| xAxisLength | X axis length | number | no | all | yes -| xAxisColor | X axis color | ColorValue | no | all | yes -| xAxisThickness | X axis thickness | number | no | all | yes -| yAxisColor | Y axis color | ColorValue | no | all | yes -| yAxisThickness | Y axis thickness | number | no | all | yes -| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes -| xAxisType | solid or dotted/dashed | RuleType | no | all | yes -| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | yes -| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes -| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes -| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes -| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes -| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes -| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes -| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes -| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes -| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes -| hideYAxisText | To hide Y axis label text | boolean | no | all | yes -| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes -| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes -| rulesLength | Length of the horizontal rules | number | no | all | yes -| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes -| rulesThickness | Thickness of the horizontal rules | number | no | all | yes -| hideRules | To hide the horizontal rules | boolean | no | all | yes -| rulesType | solid or dotted/dashed | RuleType | no | all | yes -| dashWidth | width of each dash | number | no | all | yes -| dashGap | gap between 2 dashes | number | no | all | yes -| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes -| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine1Position | position of reference line | number | no | all | yes -| showReferenceLine2 | show second reference line | boolean | no | all | yes -| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine2Position | position of second reference line | number | no | all | yes -| showReferenceLine3 | show third reference line | boolean | no | all | yes -| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine3Position | position of third reference line | number | no | all | yes -| referenceLinesOverChartContent | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes -| showVerticalLines | To show vertical lines | boolean | no | all | yes -| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes -| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes -| verticalLinesHeight | Height of the vertical lines | number | no | all | yes -| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes -| verticalLinesShift | vertical lines are aligned with bars. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes -| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes -| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes -| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes -| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes -| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes -| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes -| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes -| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes -| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes -| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes -| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes -| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes -| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes -| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes -| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes -| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes -| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes -| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes -| labelsExtraHeight | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop) | number | no | all | yes -| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes -| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes +| xAxisLength | X axis length | number | no | all | yes +| xAxisColor | X axis color | ColorValue | no | all | yes +| xAxisThickness | X axis thickness | number | no | all | yes +| yAxisColor | Y axis color | ColorValue | no | all | yes +| yAxisThickness | Y axis thickness | number | no | all | yes +| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes +| xAxisType | solid or dotted/dashed | RuleType | no | all | yes +| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | yes +| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes +| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes +| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes +| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes +| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes +| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes +| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes +| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes +| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes +| hideYAxisText | To hide Y axis label text | boolean | no | all | yes +| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes +| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes +| rulesLength | Length of the horizontal rules | number | no | all | yes +| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes +| rulesThickness | Thickness of the horizontal rules | number | no | all | yes +| hideRules | To hide the horizontal rules | boolean | no | all | yes +| rulesType | solid or dotted/dashed | RuleType | no | all | yes +| dashWidth | width of each dash | number | no | all | yes +| dashGap | gap between 2 dashes | number | no | all | yes +| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes +| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes +| referenceLine1Position | position of reference line | number | no | all | yes +| showReferenceLine2 | show second reference line | boolean | no | all | yes +| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes +| referenceLine2Position | position of second reference line | number | no | all | yes +| showReferenceLine3 | show third reference line | boolean | no | all | yes +| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes +| referenceLine3Position | position of third reference line | number | no | all | yes +| referenceLinesOverChartContent | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes +| showVerticalLines | To show vertical lines | boolean | no | all | yes +| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes +| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes +| verticalLinesHeight | Height of the vertical lines | number | no | all | yes +| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes +| verticalLinesShift | vertical lines are aligned with bars. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes +| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes +| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes +| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes +| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes +| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes +| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes +| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes +| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes +| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes +| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes +| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes +| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes +| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes +| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes +| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes +| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes +| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes +| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes +| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes +| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes +| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes +| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes +| labelsExtraHeight | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop) | number | no | all | yes +| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes +| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes **Bar related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| barWidth | Width of the bar | number | no | all | yes -| barStyle | style object for the Bars | object | no | all | yes -| isThreeD | Prop to render 3 dimensional bars | boolean | no | all | yes -| frontColor | Color of the bar | ColorValue | no | all | yes -| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes -| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes -| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color | boolean | no | all | yes -| gradientColor | Along with frontColor, gradientColor constitutes the 2 colors for gradient | ColorValue | no | all | yes -| roundedTop | To show rounded top | boolean | no | all | yes -| roundedBottom | To show rounded bottom | boolean | no | all | yes -| activeOpacity | activeOpacity on pressing the bar | number | no | all | yes -| disablePress | Prop to disable the bar press action | boolean | no | all | yes -| barBorderWidth | Border width of the bar | number | no | all | yes -| barBorderColor | Border color of the bar | ColorValue | no | all | yes -| barBorderRadius | Border radius of the bar | number | no | all | yes -| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes -| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes -| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes -| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes -| patternId | ID of the pattern component | String | no | all | yes -| minHeight | Minimum height of the Bars | number | no | all | yes +| barWidth | Width of the bar | number | no | all | yes +| barStyle | style object for the Bars | object | no | all | yes +| isThreeD | Prop to render 3 dimensional bars | boolean | no | all | yes +| frontColor | Color of the bar | ColorValue | no | all | yes +| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes +| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes +| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes +| showGradient | Prop to enable linear gradient for the bar color | boolean | no | all | yes +| gradientColor | Along with frontColor, gradientColor constitutes the 2 colors for gradient | ColorValue | no | all | yes +| roundedTop | To show rounded top | boolean | no | all | yes +| roundedBottom | To show rounded bottom | boolean | no | all | yes +| activeOpacity | activeOpacity on pressing the bar | number | no | all | yes +| disablePress | Prop to disable the bar press action | boolean | no | all | yes +| barBorderWidth | Border width of the bar | number | no | all | yes +| barBorderColor | Border color of the bar | ColorValue | no | all | yes +| barBorderRadius | Border radius of the bar | number | no | all | yes +| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes +| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes +| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes +| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes +| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes +| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes +| patternId | ID of the pattern component | String | no | all | yes +| minHeight | Minimum height of the Bars | number | no | all | yes **Animation related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| isAnimated | To show animates BarChart. Animation occurs onLoad and on value change | boolean | no | all | yes -| animationDuration | Duration of the animations | number | no | all | yes -| animationEasing | Easing applied to the animation | Easing | no | all | yes +| isAnimated | To show animates BarChart. Animation occurs onLoad and on value change | boolean | no | all | yes +| animationDuration | Duration of the animations | number | no | all | yes +| animationEasing | Easing applied to the animation | Easing | no | all | yes **Pagination related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes -| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes +| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes +| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes **Bar related props for making Capped Bar chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| cappedBars | To show caps on the top of bars | boolean | no | all | yes -| capThickness | Thickness of the bar caps | number | no | all | yes -| capColor | Color of the bar caps | ColorValue | no | all | yes -| capRadius | Border radius of the bar caps | number | no | all | yes +| cappedBars | To show caps on the top of bars | boolean | no | all | yes +| capThickness | Thickness of the bar caps | number | no | all | yes +| capColor | Color of the bar caps | ColorValue | no | all | yes +| capRadius | Border radius of the bar caps | number | no | all | yes **pointerConfig** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| height | Height of the pointer | number | no | all | yes -| width | width of the pointer | number | no | all | yes -| radius | radius of the pointer | number | no | all | yes -| pointerColor | pointer color | ColorValue | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes -| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes -| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes -| showPointerStrip | show pointer bar | boolean | no | all | yes -| pointerStripWidth | width of the pointer bar | number | no | all | yes -| pointerStripHeight | height of the pointer bar | number | no | all | yes -| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes -| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes -| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes -| stripOverPointer | strip to over pointer | boolean | no | all | yes -| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes -| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes -| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes -| pointerLabelWidth | pointer label width | number | no | all | yes -| pointerLabelHeight | pointer label height | number | no | all | yes -| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes -| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes -| activatePointersDelay | activation pointer delay | number | no | all | yes -| persistPointer | persistent pointer | boolean | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes -| barTouchable | touchable bar | boolean | no | all | yes -| pointerEvents | pointer event in Bars | PointerEvents | no | all | yes -| stripBehindBars | hide the strip in Bars | boolean | no | all | yes +| height | Height of the pointer | number | no | all | yes +| width | width of the pointer | number | no | all | yes +| radius | radius of the pointer | number | no | all | yes +| pointerColor | pointer color | ColorValue | no | all | yes +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes +| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes +| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes +| showPointerStrip | show pointer bar | boolean | no | all | yes +| pointerStripWidth | width of the pointer bar | number | no | all | yes +| pointerStripHeight | height of the pointer bar | number | no | all | yes +| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes +| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes +| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes +| stripOverPointer | strip to over pointer | boolean | no | all | yes +| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes +| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes +| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes +| pointerLabelWidth | pointer label width | number | no | all | yes +| pointerLabelHeight | pointer label height | number | no | all | yes +| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes +| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes +| activatePointersDelay | activation pointer delay | number | no | all | yes +| persistPointer | persistent pointer | boolean | no | all | yes +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes +| barTouchable | touchable bar | boolean | no | all | yes +| pointerEvents | pointer event in Bars | PointerEvents | no | all | yes +| stripBehindBars | hide the strip in Bars | boolean | no | all | yes **Props for horizontal BarChart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| horizontal | Render horizontal | boolean | no | all | yes -| rtl | Render the chart from right to left | boolean | no | all | yes -| shiftX | Shift the chart towards left or right by given value (only in horizontal charts) | number | no | all | yes -| shiftY | Shift the chart upwards or downwards by given value (only in horizontal charts) | number | no | all | yes -| rotateYAxisTexts | angle by which the Y axis label texts should rotate in horizontal charts | number | no | all | yes -| yAxisAtTop | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | boolean | no | all | yes -| intactTopLabel | To rotate the top label component to make it intact with the Bars | boolean | no | all | yes +| horizontal | Render horizontal | boolean | no | all | yes +| rtl | Render the chart from right to left | boolean | no | all | yes +| shiftX | Shift the chart towards left or right by given value (only in horizontal charts) | number | no | all | yes +| shiftY | Shift the chart upwards or downwards by given value (only in horizontal charts) | number | no | all | yes +| rotateYAxisTexts | angle by which the Y axis label texts should rotate in horizontal charts | number | no | all | yes +| yAxisAtTop | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | boolean | no | all | yes +| intactTopLabel | To rotate the top label component to make it intact with the Bars | boolean | no | all | yes **Props for Stacked Bar Charts** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| stackData | A stack array represents a stack of bars in the bar chart. It is described in the next table | Array of stack arrays | no | all | yes -| barBorderRadius | Border radius of each bar of the stack | number| no | all | yes -| barBorderTopLeftRadius | Top left border radius of each bar of the stack | number| no | all | yes -| barBorderTopRightRadius | Top right border radius of each bar of the stack | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of each bar of the stack | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of each bar of the stack | number | no | all | yes -| stackBorderRadius | Border radius of the top and bottom bars of the stack | number | no | all | yes -| stackBorderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes -| stackBorderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes -| stackBorderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes -| stackBorderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes -| autoShiftLabelsForNegativeStacks | Whether the x axis labels should auto shift to a position below the bar, if the bar is under x-axis due to negative value | boolean| no | all | yes +| stackData | A stack array represents a stack of bars in the bar chart. It is described in the next table | Array of stack arrays | no | all | yes +| barBorderRadius | Border radius of each bar of the stack | number| no | all | yes +| barBorderTopLeftRadius | Top left border radius of each bar of the stack | number| no | all | yes +| barBorderTopRightRadius | Top right border radius of each bar of the stack | number | no | all | yes +| barBorderBottomLeftRadius | Bottom left border radius of each bar of the stack | number | no | all | yes +| barBorderBottomRightRadius | Bottom right border radius of each bar of the stack | number | no | all | yes +| stackBorderRadius | Border radius of the top and bottom bars of the stack | number | no | all | yes +| stackBorderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes +| stackBorderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes +| stackBorderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes +| stackBorderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes +| autoShiftLabelsForNegativeStacks | Whether the x axis labels should auto shift to a position below the bar, if the bar is under x-axis due to negative value | boolean| no | all | yes **Stack Array description** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| stacks array | A stack is made of 1 or more objects of the type described in the next table | Array of stack items| no | all | yes -| label | Label text appearing below the stack (under the X axis) | string | no | all | yes -| labelTextStyle | Style object for the label text appearing below the stack | object| no | all | yes -| barWidth | Width of the stack bar | number| no | all | yes -| spacing | Distance between 2 consecutive bars in the stack Bar chart | number| no | all | yes -| borderRadius | Border radius of each bar of the stack | number| no | all | yes -| borderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes -| borderTopRightRadius | Top right border radius of the top bar of the stack | number| no | all | yes -| borderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number| no | all | yes -| borderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number| no | all | yes +| stacks array | A stack is made of 1 or more objects of the type described in the next table | Array of stack items| no | all | yes +| label | Label text appearing below the stack (under the X axis) | string | no | all | yes +| labelTextStyle | Style object for the label text appearing below the stack | object| no | all | yes +| barWidth | Width of the stack bar | number| no | all | yes +| spacing | Distance between 2 consecutive bars in the stack Bar chart | number| no | all | yes +| borderRadius | Border radius of each bar of the stack | number| no | all | yes +| borderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes +| borderTopRightRadius | Top right border radius of the top bar of the stack | number| no | all | yes +| borderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number| no | all | yes +| borderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number| no | all | yes **Stack item description** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item representing height of the stack item | number | no | all | yes -| color | Color of the stack item | ColorValue | no | all | yes -| onPress | Function called on pressing the stack item | function | no | all | yes -| onLongPress | Function called on long pressing the stack item | function | no | all | yes -| onPressOut | Callback function called on press out of a bar | Function | no | all | yes -| marginBottom | margin below a particular stack sectio | number n | no | all | yes -| barBorderRadius | Border radius of a stack section | number | no | all | yes -| borderTopLeftRadius | borderTopLeftRadius for a stack section | number | no | all | yes -| borderTopRightRadius | borderTopRightRadius for a stack section | number | no | all | yes -| borderBottomLeftRadius | borderBottomLeftRadius for a stack section | number | no | all | yes -| borderBottomRightRadius | borderBottomRightRadius for a stack section | number | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes -| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient| ColorValue | no | all | yes -| barWidth | Width of the bar | number | no | all | yes -| showXAxisIndex | show small graduation at the X axis for the corresponding stack | boolean | no | all | yes +| value | Value of the item representing height of the stack item | number | no | all | yes +| color | Color of the stack item | ColorValue | no | all | yes +| onPress | Function called on pressing the stack item | function | no | all | yes +| onLongPress | Function called on long pressing the stack item | function | no | all | yes +| onPressOut | Callback function called on press out of a bar | Function | no | all | yes +| marginBottom | margin below a particular stack sectio | number n | no | all | yes +| barBorderRadius | Border radius of a stack section | number | no | all | yes +| borderTopLeftRadius | borderTopLeftRadius for a stack section | number | no | all | yes +| borderTopRightRadius | borderTopRightRadius for a stack section | number | no | all | yes +| borderBottomLeftRadius | borderBottomLeftRadius for a stack section | number | no | all | yes +| borderBottomRightRadius | borderBottomRightRadius for a stack section | number | no | all | yes +| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes +| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient| ColorValue | no | all | yes +| barWidth | Width of the bar | number | no | all | yes +| showXAxisIndex | show small graduation at the X axis for the corresponding stack | boolean | no | all | yes ### LineChart and AreaChart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a point in the line chart. It is described in the next table. | Array | no | all | yes -| data2 | Second set of dataPoint for the second line | Array | no | all | yes -| data3 | Third set of dataPoint for the third line | Array | no | all | yes -| data4 | Fourth set of dataPoint for the fourth line | Array | no | all | yes -| data5 | Fifth set of dataPoint for the third line| Array | no | all | yes -| dataSet | Array of data sets (used instead of using `data2`, `data3`, `data4` etc) | Array| no | all | yes -| width | Width of the Bar chart | number | no | all | yes -| height| Height of the Bar chart (excluding the bottom label) | number | no | all | yes -| overflowTop | Extra space at the top of the chart to make room for dataPointText | number | no | all | yes -| overflowBottom | Extra space at the bottom of the chart to make room for dataPoints or dataPointText | number | no | all | yes -| maxValue | Maximum value shown in the Y axis | number | no | all | yes -| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes -| noOfSections | Number of sections in the Y axis | number | no | all | yes -| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too)| number | no | all | yes -| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes -| stepHeight | Height of 1 step/section in the Y axis| number | no | all | yes -| negativeStepValue | Value of 1 step/section in the Y axis for negative values (in the 4th quadrant)| number | no | all | yes -| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes -| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes -| adjustToWidth | When set to true, it auto computes the spacing value to fit the Line chart in the available width | boolean | no | all | yes -| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes -| sectionColors | Background color of the horizontal sections of the chart | ColorValue | no | all | yes -| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes -| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes -| disableScroll | To disable horizontal scroll | boolean | no | all | yes -| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes -| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | all | yes -| isAnimated | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | boolean | no | all | yes -| animateOnDataChange | To show animation on change in data. A smooth transition takes place between the iold and new line | boolean | no | all | yes -| onDataChangeAnimationDuration | Duration (milliseconds) in which the transition animation takes place on a change in data | number | no | all | yes -| onPress | The callback function that handles the press event. `item` and `index` are received as props | Function | no | all | yes -| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost data point | boolean | no | all | yes -| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | boolean | no | all | yes -| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios | number | no | iOS | yes -| onScroll | callback function called when the chart is scrolled horizontally| Function | no | all | yes -| onMomentumScrollEnd | callback function called when scroll is completed | Function| no | all | yes -| initialSpacing | distance of the first data point from the Y axis| number | no | all | yes -| endSpacing | distance/padding left at the end of the line chart | number | no | all | yes +| data | An item object represents a point in the line chart. It is described in the next table. | Array | no | all | yes +| data2 | Second set of dataPoint for the second line | Array | no | all | yes +| data3 | Third set of dataPoint for the third line | Array | no | all | yes +| data4 | Fourth set of dataPoint for the fourth line | Array | no | all | yes +| data5 | Fifth set of dataPoint for the third line| Array | no | all | yes +| dataSet | Array of data sets (used instead of using `data2`, `data3`, `data4` etc) | Array| no | all | yes +| width | Width of the Bar chart | number | no | all | yes +| height| Height of the Bar chart (excluding the bottom label) | number | no | all | yes +| overflowTop | Extra space at the top of the chart to make room for dataPointText | number | no | all | yes +| overflowBottom | Extra space at the bottom of the chart to make room for dataPoints or dataPointText | number | no | all | yes +| maxValue | Maximum value shown in the Y axis | number | no | all | yes +| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes +| noOfSections | Number of sections in the Y axis | number | no | all | yes +| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too)| number | no | all | yes +| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes +| stepHeight | Height of 1 step/section in the Y axis| number | no | all | yes +| negativeStepValue | Value of 1 step/section in the Y axis for negative values (in the 4th quadrant)| number | no | all | yes +| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes +| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes +| adjustToWidth | When set to true, it auto computes the spacing value to fit the Line chart in the available width | boolean | no | all | yes +| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes +| sectionColors | Background color of the horizontal sections of the chart | ColorValue | no | all | yes +| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes +| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes +| disableScroll | To disable horizontal scroll | boolean | no | all | yes +| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes +| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | all | yes +| isAnimated | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | boolean | no | all | yes +| animateOnDataChange | To show animation on change in data. A smooth transition takes place between the iold and new line | boolean | no | all | yes +| onDataChangeAnimationDuration | Duration (milliseconds) in which the transition animation takes place on a change in data | number | no | all | yes +| onPress | The callback function that handles the press event. `item` and `index` are received as props | Function | no | all | yes +| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost data point | boolean | no | all | yes +| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | boolean | no | all | yes +| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios | number | no | iOS | yes +| onScroll | callback function called when the chart is scrolled horizontally| Function | no | all | yes +| onMomentumScrollEnd | callback function called when scroll is completed | Function| no | all | yes +| initialSpacing | distance of the first data point from the Y axis| number | no | all | yes +| endSpacing | distance/padding left at the end of the line chart | number | no | all | yes **Item description (lineDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value| Value of the item representing representing its position | number | no | all | yes -| onPress | Function called on pressing the data point | function | no | all | yes -| label | Label text appearing under the X axis | string | no | all | yes -| labelTextStyle | Style object for the label text appearing under the X axis | object | no | all | yes -| labelComponent | custom label component appearing under the X axis | Function | no | all | yes -| yAxisLabelText | Y axis label text | string | no | all | yes -| dataPointText | Text appearing near the data points | string | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| textColor | Color of the dataPointText | ColorValue| no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| dataPointHeight | Height of the data point (when data point's shape is rectangular) | number | no | all | yes -| dataPointWidth | Width of the data point (when data point's shape is rectangular) | number | no | all | yes -| dataPointRadius | Radius of the data point (when data points' shape is circular) | number| no | all | yes -| dataPointColor | Color of the data point | ColorValue | no | all | yes -| dataPointShape | Shape of the data point (rectangular or circular) defaults to circular | string | no | all | yes -| hideDataPoint | To hide the data point | boolean | no | all | yes -| showVerticalLine | When set to true, a vertical line will be displayed along that data point | boolean | no | all | yes -| verticalLineUptoDataPoint | When set to true, it sets the height of the vertical line upto the corresponding data point | boolean | no | all | yes -| verticalLineColor | Color of the vertical Line displayed along the data point | ColorValue | no | all | yes -| verticalLineThickness | Thickness of the vertical Line displayed along the data point | number| no | all | yes -| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | yes -| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | yes -| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | yes -| dataPointLabelComponent | custom component rendered above a data point| Function | no | all | yes -| focusedDataPointLabelComponent | custom component rendered above a data point only when focused/selected (when the user presses) | Function | no | all | yes -| showStrip | To show a vertical strip along the data point (even if it's not focused/selected) | boolean | no | all | yes -| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | ColorValue| no | all | yes -| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| pointerShiftX | Shifts the pointer for that item horizontally by given quantity (used only when pointerConfig prop is passed) | number| no | all | yes -| pointerShiftY | Shifts the pointer for that item vertically by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes +| value| Value of the item representing representing its position | number | no | all | yes +| onPress | Function called on pressing the data point | function | no | all | yes +| label | Label text appearing under the X axis | string | no | all | yes +| labelTextStyle | Style object for the label text appearing under the X axis | object | no | all | yes +| labelComponent | custom label component appearing under the X axis | Function | no | all | yes +| yAxisLabelText | Y axis label text | string | no | all | yes +| dataPointText | Text appearing near the data points | string | no | all | yes +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes +| textColor | Color of the dataPointText | ColorValue| no | all | yes +| textFontSize | Font size of the dataPointText | number | no | all | yes +| dataPointHeight | Height of the data point (when data point's shape is rectangular) | number | no | all | yes +| dataPointWidth | Width of the data point (when data point's shape is rectangular) | number | no | all | yes +| dataPointRadius | Radius of the data point (when data points' shape is circular) | number| no | all | yes +| dataPointColor | Color of the data point | ColorValue | no | all | yes +| dataPointShape | Shape of the data point (rectangular or circular) defaults to circular | string | no | all | yes +| hideDataPoint | To hide the data point | boolean | no | all | yes +| showVerticalLine | When set to true, a vertical line will be displayed along that data point | boolean | no | all | yes +| verticalLineUptoDataPoint | When set to true, it sets the height of the vertical line upto the corresponding data point | boolean | no | all | yes +| verticalLineColor | Color of the vertical Line displayed along the data point | ColorValue | no | all | yes +| verticalLineThickness | Thickness of the vertical Line displayed along the data point | number| no | all | yes +| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | yes +| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | yes +| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | yes +| dataPointLabelComponent | custom component rendered above a data point| Function | no | all | yes +| focusedDataPointLabelComponent | custom component rendered above a data point only when focused/selected (when the user presses) | Function | no | all | yes +| showStrip | To show a vertical strip along the data point (even if it's not focused/selected) | boolean | no | all | yes +| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes +| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes +| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | ColorValue| no | all | yes +| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes +| pointerShiftX | Shifts the pointer for that item horizontally by given quantity (used only when pointerConfig prop is passed) | number| no | all | yes +| pointerShiftY | Shifts the pointer for that item vertically by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes **Pagination related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes -| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes +| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes +| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes **Axes and rules related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| xAxisLength | X axis length | number | no | all | yes -| xAxisColor| X axis color | ColorValue | no | all | yes -| xAxisThickness | X axis thickness | number | no | all | yes -| xAxisType | solid or dotted/dashed | RuleType | no | all | yes -| yAxisColor | Y axis color | ColorValue | no | all | yes -| yAxisThickness | Y axis thickness | number | no | all | yes -| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | ye -| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes -| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes -| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes -| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes -| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes -| yAxisOffset | Starting value on Y Axis | number | no | all | yes -| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes -| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes -| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes -| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String| no | all | yes -| yAxisLabelSuffix |The String appended to the y axis label text | String| no | all | yes -| hideYAxisText | To hide Y axis label text | boolean | no | all | yes -| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes -| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes -| rulesLength | Length of the horizontal | number | no | all | yes -| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes | -| rulesThickness | Thickness of the horizontal | number | no | all | yes -| hideRules | To hide the horizontal | boolean | no | all | yes -| rulesType | solid or dotted/dashed | RuleType | no | all | yes -| dashWidth | width of each dash | number | no | all | yes -| dashGap | gap between 2 | number | no | all | yes -| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes -| showReferenceLine1 | show reference line | boolean | no | all | yes -| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine1Position | position of reference | number | no | all | yes -| showReferenceLine2 | show second reference | boolean | no | all | yes -| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType| no | all | yes -| referenceLine2Position | position of second reference | number | no | all | yes -| showReferenceLine3 | show third reference | boolean | no | all | yes -| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine3Position | position of third reference line | number| no | all | yes -| showVerticalLines | To show vertical lines | boolean | no | all | yes -| verticalLinesUptoDataPoint | To set the height of the vertical lines upto the corresponding data point| boolean | no | all | yes -| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes -| verticalLinesHeight | Height of the vertical lines | number | no | all | yes -| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array| no | all |yes -| verticalLinesShift | vertical lines are aligned with data point. Shift them left or right using +ve or -ve value of verticalLinesShift| number| no | all |yes -| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes -| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes -| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes -| showXAxisIndices | To show the pointers on the X axis| boolean | no | all | yes -| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes -| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes -| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes -| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| yAxisIndicesColor | To hide axes, rules, labels altogether | boolean | no | all | yes -| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array| no | all |yes -| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array| no | all |yes -| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes -| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes -| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes -| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all |yes -| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes -| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | ye -| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all |yes -| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all |yes -| secondaryLineConfig | properties of the secondary data line (secondaryLineConfigType is described below) | secondaryLineConfigType| no | all |yes +| xAxisLength | X axis length | number | no | all | yes +| xAxisColor| X axis color | ColorValue | no | all | yes +| xAxisThickness | X axis thickness | number | no | all | yes +| xAxisType | solid or dotted/dashed | RuleType | no | all | yes +| yAxisColor | Y axis color | ColorValue | no | all | yes +| yAxisThickness | Y axis thickness | number | no | all | yes +| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | ye +| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes +| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes +| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes +| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes +| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes +| yAxisOffset | Starting value on Y Axis | number | no | all | yes +| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes +| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes +| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes +| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String| no | all | yes +| yAxisLabelSuffix |The String appended to the y axis label text | String| no | all | yes +| hideYAxisText | To hide Y axis label text | boolean | no | all | yes +| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes +| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes +| rulesLength | Length of the horizontal | number | no | all | yes +| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes | +| rulesThickness | Thickness of the horizontal | number | no | all | yes +| hideRules | To hide the horizontal | boolean | no | all | yes +| rulesType | solid or dotted/dashed | RuleType | no | all | yes +| dashWidth | width of each dash | number | no | all | yes +| dashGap | gap between 2 | number | no | all | yes +| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes +| showReferenceLine1 | show reference line | boolean | no | all | yes +| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes +| referenceLine1Position | position of reference | number | no | all | yes +| showReferenceLine2 | show second reference | boolean | no | all | yes +| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType| no | all | yes +| referenceLine2Position | position of second reference | number | no | all | yes +| showReferenceLine3 | show third reference | boolean | no | all | yes +| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes +| referenceLine3Position | position of third reference line | number| no | all | yes +| showVerticalLines | To show vertical lines | boolean | no | all | yes +| verticalLinesUptoDataPoint | To set the height of the vertical lines upto the corresponding data point| boolean | no | all | yes +| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes +| verticalLinesHeight | Height of the vertical lines | number | no | all | yes +| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array| no | all |yes +| verticalLinesShift | vertical lines are aligned with data point. Shift them left or right using +ve or -ve value of verticalLinesShift| number| no | all |yes +| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes +| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes +| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes +| showXAxisIndices | To show the pointers on the X axis| boolean | no | all | yes +| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes +| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes +| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes +| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes +| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes +| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes +| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes +| yAxisIndicesColor | To hide axes, rules, labels altogether | boolean | no | all | yes +| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array| no | all |yes +| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array| no | all |yes +| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes +| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes +| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes +| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all |yes +| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes +| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | ye +| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all |yes +| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all |yes +| secondaryLineConfig | properties of the secondary data line (secondaryLineConfigType is described below) | secondaryLineConfigType| no | all |yes **Line related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| curved | To show curved line joining the data points | boolean| no | all |yes -| color | Color of the lines joining the data points | ColorValue | no | all | yes -| color1| Color of the lines joining the first set of data points | ColorValue | no | all | yes -| color2 | Color of the lines joining the second set of data points | ColorValue| no | all | yes -| color3 | Color of the lines joining the third set of data points | ColorValue| no | all | yes -| color4 | Color of the lines joining the fourth set of data points | ColorValue| no | all | yes -| color5 | Color of the lines joining the fifth set of data points | ColorValue| no | all | yes -| thickness | Thickness of the lines joining the data points | number| no | all | yes -| thickness1 | Thickness of the lines joining the first set of data points | number | no | all | yes -| thickness2 | Thickness of the lines joining the second set of data points | number | no | all | yes -| thickness3 | Thickness of the lines joining the third set of data points | number | no | all | yes -| thickness4 | Thickness of the lines joining the fourth set of data points | number| no | all | yes -| thickness5 | Thickness of the lines joining the fifth set of data points | number | no | all | yes -| zIndex1 | zIndex of the lines joining the first set of data points | number | no | all | yes -| zIndex2 | zIndex of the lines joining the second set of data points | number | no | all | yes -| zIndex3 | zIndex of the lines joining the third set of data points| number | no | all | yes -| zIndex4 | zIndex of the lines joining the fourth set of data points | number | no | all | yes -| zIndex5 | zIndex of the lines joining the fifth set of data points | number | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray1 | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart| Array | no | all | yes -| strokeDashArray2| Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray3 | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray4 | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray5 | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | Array | no | all | yes -| lineSegments | Array of objects used to customize segments (parts) of line | Array | no | all | yes -| lineSegments2 | Array of objects used to customize segments (parts) of line2 | Array | no | all | yes -| lineSegments3 | Array of objects used to customize segments (parts) of line3 | Array | no | all | yes -| lineSegments4 | Array of objects used to customize segments (parts) of line4 | Array | no | all | yes -| lineSegments5 | Array of objects used to customize segments (parts) of line5 | Array | no | all | yes -| highlightedRange | renders the parts of lines lying in a given data range with a different style (color, thickness,type)| HighlightedRange | no | all | yes -| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes -| startIndex1 | Start index for data line 1 (used to display data lines having breaks) | number| no | all | yes -| startIndex2 | Start index for data line 2 (used to display data lines having breaks) | number | no | all | yes -| startIndex3 | Start index for data line 3 (used to display data lines having breaks) | number | no | all | yes -| startIndex4 | Start index for data line 4 (used to display data lines having breaks) | number | no | all | yes -| startIndex5 | Start index for data line 5 (used to display data lines having breaks) | number| no | all | yes -| endIndex | End index for data line (used to display data lines having breaks) | number| no | all | yes -| endIndex1 | End index for data line 1 (used to display data lines having breaks) | number | no | all | yes -| endIndex2 | End index for data line 2 (used to display data lines having breaks) | number| no | all | yes -| endIndex3 | End index for data line 3 (used to display data lines having breaks) | number| no | all | yes -| endIndex4 | End index for data line 4 (used to display data lines having breaks) | number | no | all | yes -| endIndex5 | End index for data line 5 (used to display data lines having breaks) | number| no | all | yes -| lineGradient | this prop is used to render the line with a gradient blend of colors | boolean| no | all | yes -| lineGradientComponent | this prop defines the svg gradient that should be applied to the line (requires lineGradient to be truthy) | Function| no | all | yes -| lineGradientId | id of the (needed along with lineGradientComponent prop) | string| no | all | yes -| lineGradientDirection | 'vertical'/'horizontal' | string | no | all | yes -| lineGradientStartColor | Start gradient color for the line (requires lineGradient to be truthy) | string| no | all | yes -| lineGradientEndColor | End gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes +| curved | To show curved line joining the data points | boolean| no | all |yes +| color | Color of the lines joining the data points | ColorValue | no | all | yes +| color1| Color of the lines joining the first set of data points | ColorValue | no | all | yes +| color2 | Color of the lines joining the second set of data points | ColorValue| no | all | yes +| color3 | Color of the lines joining the third set of data points | ColorValue| no | all | yes +| color4 | Color of the lines joining the fourth set of data points | ColorValue| no | all | yes +| color5 | Color of the lines joining the fifth set of data points | ColorValue| no | all | yes +| thickness | Thickness of the lines joining the data points | number| no | all | yes +| thickness1 | Thickness of the lines joining the first set of data points | number | no | all | yes +| thickness2 | Thickness of the lines joining the second set of data points | number | no | all | yes +| thickness3 | Thickness of the lines joining the third set of data points | number | no | all | yes +| thickness4 | Thickness of the lines joining the fourth set of data points | number| no | all | yes +| thickness5 | Thickness of the lines joining the fifth set of data points | number | no | all | yes +| zIndex1 | zIndex of the lines joining the first set of data points | number | no | all | yes +| zIndex2 | zIndex of the lines joining the second set of data points | number | no | all | yes +| zIndex3 | zIndex of the lines joining the third set of data points| number | no | all | yes +| zIndex4 | zIndex of the lines joining the fourth set of data points | number | no | all | yes +| zIndex5 | zIndex of the lines joining the fifth set of data points | number | no | all | yes +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | Array| no | all | yes +| strokeDashArray1 | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart| Array | no | all | yes +| strokeDashArray2| Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | Array| no | all | yes +| strokeDashArray3 | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | Array| no | all | yes +| strokeDashArray4 | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | Array| no | all | yes +| strokeDashArray5 | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | Array | no | all | yes +| lineSegments | Array of objects used to customize segments (parts) of line | Array | no | all | yes +| lineSegments2 | Array of objects used to customize segments (parts) of line2 | Array | no | all | yes +| lineSegments3 | Array of objects used to customize segments (parts) of line3 | Array | no | all | yes +| lineSegments4 | Array of objects used to customize segments (parts) of line4 | Array | no | all | yes +| lineSegments5 | Array of objects used to customize segments (parts) of line5 | Array | no | all | yes +| highlightedRange | renders the parts of lines lying in a given data range with a different style (color, thickness,type)| HighlightedRange | no | all | yes +| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes +| startIndex1 | Start index for data line 1 (used to display data lines having breaks) | number| no | all | yes +| startIndex2 | Start index for data line 2 (used to display data lines having breaks) | number | no | all | yes +| startIndex3 | Start index for data line 3 (used to display data lines having breaks) | number | no | all | yes +| startIndex4 | Start index for data line 4 (used to display data lines having breaks) | number | no | all | yes +| startIndex5 | Start index for data line 5 (used to display data lines having breaks) | number| no | all | yes +| endIndex | End index for data line (used to display data lines having breaks) | number| no | all | yes +| endIndex1 | End index for data line 1 (used to display data lines having breaks) | number | no | all | yes +| endIndex2 | End index for data line 2 (used to display data lines having breaks) | number| no | all | yes +| endIndex3 | End index for data line 3 (used to display data lines having breaks) | number| no | all | yes +| endIndex4 | End index for data line 4 (used to display data lines having breaks) | number | no | all | yes +| endIndex5 | End index for data line 5 (used to display data lines having breaks) | number| no | all | yes +| lineGradient | this prop is used to render the line with a gradient blend of colors | boolean| no | all | yes +| lineGradientComponent | this prop defines the svg gradient that should be applied to the line (requires lineGradient to be truthy) | Function| no | all | yes +| lineGradientId | id of the (needed along with lineGradientComponent prop) | string| no | all | yes +| lineGradientDirection | 'vertical'/'horizontal' | string | no | all | yes +| lineGradientStartColor | Start gradient color for the line (requires lineGradient to be truthy) | string| no | all | yes +| lineGradientEndColor | End gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes **The arrow** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| showArrows | To show an arrow at the end of each data line | boolean | no | all | yes -| arrowConfig | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | arrowType | no | all | yes -| showArrow1 | To show an arrow at the end of the first data line | boolean | no | all | yes -| arrowConfig1 | Object describing the properties of the first arrow | arrowType| no | all | yes -| showArrow2 | To show an arrow at the end of the second data line | boolean | no | all | yes -| arrowConfig2 | Object describing the properties of the second arrow | arrowType | no | all | yes -| showArrow3 | To show an arrow at the end of the third data line | boolean | no | all | yes -| arrowConfig3 | Object describing the properties of the third arrow | arrowType | no | all | yes -| showArrow4 | To show an arrow at the end of the fourth data line| boolean | no | all | yes -| arrowConfig4 | Object describing the properties of the fourth arrow| arrowType | no | all | yes -| showArrow5 | To show an arrow at the end of the fifth data line | boolean | no | all | yes -| arrowConfig5| Object describing the properties of the fifth arrow | arrowType | no | all | yes +| showArrows | To show an arrow at the end of each data line | boolean | no | all | yes +| arrowConfig | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | arrowType | no | all | yes +| showArrow1 | To show an arrow at the end of the first data line | boolean | no | all | yes +| arrowConfig1 | Object describing the properties of the first arrow | arrowType| no | all | yes +| showArrow2 | To show an arrow at the end of the second data line | boolean | no | all | yes +| arrowConfig2 | Object describing the properties of the second arrow | arrowType | no | all | yes +| showArrow3 | To show an arrow at the end of the third data line | boolean | no | all | yes +| arrowConfig3 | Object describing the properties of the third arrow | arrowType | no | all | yes +| showArrow4 | To show an arrow at the end of the fourth data line| boolean | no | all | yes +| arrowConfig4 | Object describing the properties of the fourth arrow| arrowType | no | all | yes +| showArrow5 | To show an arrow at the end of the fifth data line | boolean | no | all | yes +| arrowConfig5| Object describing the properties of the fifth arrow | arrowType | no | all | yes **Data points related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| hideDataPoints | To hide data points | boolean | no | all | yes -| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius | Radius of data points (when data points' shape is circular) | number| no | all | yes -| dataPointsColor | Color of the data points | ColorValue | no | all | yes -| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints1 | To hide data points for the first set of data | boolean | no | all | yes -| dataPointsHeight1 | Height of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth1 | Width of data points for the first dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius1 | Radius of data points for the first dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor1 | Color of data points for the first dataset | ColorValue | no | all | yes -| dataPointsShape1 | Shape of data points for the first dataset | string | no | all | yes -| hideDataPoints2 | To hide data points for the second set of data | boolean | no | all | yes -| dataPointsHeight2 | Height of data points for the second dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsWidth2 | Width of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius2 | Radius of data points for the second dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor2 | Color of data points for the second dataset | ColorValue| no | all | yes -| dataPointsShape2 | Shape of data points for the second dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints3 | To hide data points for the third set of data | boolean | no | all | yes -| dataPointsHeight3 | Height of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth3 | Width of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius3 | Radius of data points for the third dataset (when data points' shape is circular) | number | no | all | yes -| dataPointsColor3 | Color of data points for the third dataset | ColorValue| no | all | yes -| dataPointsShape3 | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints4 | To hide data points for the fourth set of data | boolean | no | all | yes -| dataPointsHeight4 | Height of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth4 | Width of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius4 | Radius of data points for the fourth dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor4 | Color of data points for the fourth dataset | ColorValue| no | all | yes -| dataPointsShape4 | Shape of data points for the fourth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints5 | To hide data points for the fifth set of data | boolean | no | all | yes -| dataPointsHeight5 | Height of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth5 | Width of data points for the fifth dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius5 | Radius of data points for the fifth dataset (when data points' shape is circular) | number | no | all | yes -| dataPointsColor5 | Color of data points for the fifth dataset | ColorValue| no | all | yes -| dataPointsShape5 | Shape of data points for the fifth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| focusedDataPointIndex | Index of the focused data point, works only when focusEnabled prop is used | number | no | all | yes -| focusedDataPointShape | Shape of the data points when focused due to press event | String | no | all | yes -| focusedDataPointWidth | Width of the data points when focused due to press event | number | no | all | yes -| focusedDataPointHeight | Height of the data points when focused due to press event | number | no | all | yes -| focusedDataPointColor | Color of the data points when focused due to press event | ColorValue | no | all | yes -| focusedDataPointRadius | Radius of the data points when focused due to press event | number| no | all | yes -| focusedCustomDataPoint | Custom data point when focused due to press event| Function| no | all | yes -| textColor | Color of the dataPointText | ColorValue | no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| customDataPoint | A callback function to render a custom component as the data points | Function | no | all | yes -| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | yes -| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | yes -| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | yes -| showValuesAsDataPointsText | When set to true, the data item value will be shown as a label text near data point | boolean | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using this array | ColorValue[] | no | all | yes - +| hideDataPoints | To hide data points | boolean | no | all | yes +| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes +| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number| no | all | yes +| dataPointsRadius | Radius of data points (when data points' shape is circular) | number| no | all | yes +| dataPointsColor | Color of the data points | ColorValue | no | all | yes +| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | string| no | all | yes +| hideDataPoints1 | To hide data points for the first set of data | boolean | no | all | yes +| dataPointsHeight1 | Height of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsWidth1 | Width of data points for the first dataset (when data points' shape is rectangular) | number| no | all | yes +| dataPointsRadius1 | Radius of data points for the first dataset (when data points' shape is circular) | number| no | all | yes +| dataPointsColor1 | Color of data points for the first dataset | ColorValue | no | all | yes +| dataPointsShape1 | Shape of data points for the first dataset | string | no | all | yes +| hideDataPoints2 | To hide data points for the second set of data | boolean | no | all | yes +| dataPointsHeight2 | Height of data points for the second dataset (when data points' shape is rectangular) | number| no | all | yes +| dataPointsWidth2 | Width of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsRadius2 | Radius of data points for the second dataset (when data points' shape is circular) | number| no | all | yes +| dataPointsColor2 | Color of data points for the second dataset | ColorValue| no | all | yes +| dataPointsShape2 | Shape of data points for the second dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes +| hideDataPoints3 | To hide data points for the third set of data | boolean | no | all | yes +| dataPointsHeight3 | Height of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsWidth3 | Width of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsRadius3 | Radius of data points for the third dataset (when data points' shape is circular) | number | no | all | yes +| dataPointsColor3 | Color of data points for the third dataset | ColorValue| no | all | yes +| dataPointsShape3 | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes +| hideDataPoints4 | To hide data points for the fourth set of data | boolean | no | all | yes +| dataPointsHeight4 | Height of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsWidth4 | Width of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsRadius4 | Radius of data points for the fourth dataset (when data points' shape is circular) | number| no | all | yes +| dataPointsColor4 | Color of data points for the fourth dataset | ColorValue| no | all | yes +| dataPointsShape4 | Shape of data points for the fourth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes +| hideDataPoints5 | To hide data points for the fifth set of data | boolean | no | all | yes +| dataPointsHeight5 | Height of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes +| dataPointsWidth5 | Width of data points for the fifth dataset (when data points' shape is rectangular) | number| no | all | yes +| dataPointsRadius5 | Radius of data points for the fifth dataset (when data points' shape is circular) | number | no | all | yes +| dataPointsColor5 | Color of data points for the fifth dataset | ColorValue| no | all | yes +| dataPointsShape5 | Shape of data points for the fifth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes +| focusedDataPointIndex | Index of the focused data point, works only when focusEnabled prop is used | number | no | all | yes +| focusedDataPointShape | Shape of the data points when focused due to press event | String | no | all | yes +| focusedDataPointWidth | Width of the data points when focused due to press event | number | no | all | yes +| focusedDataPointHeight | Height of the data points when focused due to press event | number | no | all | yes +| focusedDataPointColor | Color of the data points when focused due to press event | ColorValue | no | all | yes +| focusedDataPointRadius | Radius of the data points when focused due to press event | number| no | all | yes +| focusedCustomDataPoint | Custom data point when focused due to press event| Function| no | all | yes +| textColor | Color of the dataPointText | ColorValue | no | all | yes +| textFontSize | Font size of the dataPointText | number | no | all | yes +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes +| customDataPoint | A callback function to render a custom component as the data points | Function | no | all | yes +| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | yes +| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | yes +| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | yes +| showValuesAsDataPointsText | When set to true, the data item value will be shown as a label text near data point | boolean | no | all | yes +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using this array | ColorValue[] | no | all | yes **pointerConfig** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| height | Height of the pointer | number | no | all | yes -| width | width of the pointer | number | no | all | yes -| radius | radius of the pointer | number | no | all | yes -| pointerColor | pointer color | ColorValue | no | all | yes -| pointer1Color | pointer color | ColorValue | no | all | yes -| pointer2Color | pointer color | ColorValue | no | all | yes -| pointer3Color | pointer color | ColorValue | no | all | yes -| pointer4Color | pointer color | ColorValue | no | all | yes -| pointer5Color | pointer color | ColorValue | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes -| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes -| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes -| showPointerStrip | show pointer bar | boolean | no | all | yes -| pointerStripWidth | width of the pointer bar | number | no | all | yes -| pointerStripHeight | height of dthe pointer bar | number | no | all | yes -| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes -| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes -| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes -| stripOverPointer | strip to over pointer | boolean | no | all | yes -| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes -| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes -| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes -| pointerLabelWidth | pointer label width | number | no | all | yes -| pointerLabelHeight | pointer label height | number | no | all | yes -| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes -| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes -| activatePointersDelay | activation pointer delay | number | no | all | yes -| persistPointer | persistent pointer | boolean | no | all | yes -| hidePointer1 | hidden pointer | boolean | no | all | yes -| hidePointer2 | hidden pointer | boolean | no | all | yes -| hidePointer3 | hidden pointer | boolean | no | all | yes -| hidePointer4 | hidden pointer | boolean | no | all | yes -| hidePointer5 | hidden pointer | boolean | no | all | yes -| hideSecondaryPointer | Hide auxiliary pointer | boolean | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes - +| height | Height of the pointer | number | no | all | yes +| width | width of the pointer | number | no | all | yes +| radius | radius of the pointer | number | no | all | yes +| pointerColor | pointer color | ColorValue | no | all | yes +| pointer1Color | pointer color | ColorValue | no | all | yes +| pointer2Color | pointer color | ColorValue | no | all | yes +| pointer3Color | pointer color | ColorValue | no | all | yes +| pointer4Color | pointer color | ColorValue | no | all | yes +| pointer5Color | pointer color | ColorValue | no | all | yes +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes +| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes +| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes +| showPointerStrip | show pointer bar | boolean | no | all | yes +| pointerStripWidth | width of the pointer bar | number | no | all | yes +| pointerStripHeight | height of dthe pointer bar | number | no | all | yes +| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes +| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes +| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes +| stripOverPointer | strip to over pointer | boolean | no | all | yes +| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes +| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes +| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes +| pointerLabelWidth | pointer label width | number | no | all | yes +| pointerLabelHeight | pointer label height | number | no | all | yes +| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes +| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes +| activatePointersDelay | activation pointer delay | number | no | all | yes +| persistPointer | persistent pointer | boolean | no | all | yes +| hidePointer1 | hidden pointer | boolean | no | all | yes +| hidePointer2 | hidden pointer | boolean | no | all | yes +| hidePointer3 | hidden pointer | boolean | no | all | yes +| hidePointer4 | hidden pointer | boolean | no | all | yes +| hidePointer5 | hidden pointer | boolean | no | all | yes +| hideSecondaryPointer | Hide auxiliary pointer | boolean | no | all | yes +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes **onFocus and strip related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| focusEnabled | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the `onFocus` prop) | boolean| no | all | yes -| onFocus | The callback function that handles the focus event. `item` and `index` are received as props | Function| no | all | yes -| focusedDataPointIndex | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus | number| no | all | yes -| showDataPointOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolean | no | all | yes -| showStripOnFocus | If set true, it shows a vertical strip corresponding to the focused area of the chart | boolean | no | all | yes -| showTextOnFocus | If set true, it shows the data point text corresponding to the focused area of the chart | boolean | no | all | yes -| showDataPointLabelOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolea| no | all | yes -| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | ColorValue| no | all | yes -| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| unFocusOnPressOut | If set true, it unselects/unfocuses the focused/selected data point | boolean| no | all | yes -| delayBeforeUnFocus | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | number | no | all | yes -| focusedDataPointShape | Shape of the data points when focused due to press | String | no | all | yes -| focusedDataPointWidth | Width of the data points when focused due to press | number | no | all | yes -| focusedDataPointHeight | Height of the data points when focused due to press | number | no | all | yes -| focusedDataPointColor | Color of the data points when focused due to press | ColorValue | no | all | yes -| focusedDataPointRadius | Radius of the data points when focused due to press | number | no | all | yes -| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | yes +| focusEnabled | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the `onFocus` prop) | boolean| no | all | yes +| onFocus | The callback function that handles the focus event. `item` and `index` are received as props | Function| no | all | yes +| focusedDataPointIndex | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus | number| no | all | yes +| showDataPointOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolean | no | all | yes +| showStripOnFocus | If set true, it shows a vertical strip corresponding to the focused area of the chart | boolean | no | all | yes +| showTextOnFocus | If set true, it shows the data point text corresponding to the focused area of the chart | boolean | no | all | yes +| showDataPointLabelOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolea| no | all | yes +| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes +| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes +| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | ColorValue| no | all | yes +| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes +| unFocusOnPressOut | If set true, it unselects/unfocuses the focused/selected data point | boolean| no | all | yes +| delayBeforeUnFocus | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | number | no | all | yes +| focusedDataPointShape | Shape of the data points when focused due to press | String | no | all | yes +| focusedDataPointWidth | Width of the data points when focused due to press | number | no | all | yes +| focusedDataPointHeight | Height of the data points when focused due to press | number | no | all | yes +| focusedDataPointColor | Color of the data points when focused due to press | ColorValue | no | all | yes +| focusedDataPointRadius | Radius of the data points when focused due to press | number | no | all | yes +| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | yes **Props for Area Chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| areaChart | If set true, renders area chart instead of line chart | boolean| no | all | yes -| areaChart1 | If set true, renders area chart for 1st data set instead of line chart | boolean | no | all | yes -| areaChart2 | If set true, renders area chart for 2nd data set instead of line chartt | boolean | no | all | yes -| areaChart3 | If set true, renders area chart for 3rd data set instead of line chartt | boolean | no | all | yes -| areaChart4 | If set true, renders area chart for 4th data set instead of line chartt | boolean | no | all | yes -| areaChart5 | If set true, renders area chart for 5th data set instead of line chartt | boolean | no | all | yes -| startFillColor | Start gradient color for the area chart | ColorValue | no | all | yes -| endFillColor | End gradient color for the area chart | ColorValue | no | all | yes -| startOpacity | Start gradient opacity for the area chart | number | no | all | yes -| endOpacity | End gradient opacity for the area chart | number | no | all | yes -| startFillColor1 | Start gradient color for the first dataset of the area chart | ColorValue| no | all | yes -| endFillColor1 | End gradient color for the first dataset of the area chart | ColorValue | no | all | yes -| startOpacity1 | Start gradient opacity for the first dataset of the area chart | number | no | all | yes -| endOpacity1 | End gradient opacity for the first dataset of the area chart | number | no | all | yes -| startFillColor2 | Start gradient color for the second dataset of the area chart | ColorValue | no | all | yes -| endFillColor2 | End gradient color for the second dataset of the area chart | ColorValue | no | all | yes -| startOpacity2 | Start gradient color for the second dataset of the area chart | number | no | all | yes -| endOpacity2 | End gradient opacity for the second dataset of the area chart | number | no | all | yes -| startFillColor3 | Start gradient color for the third dataset of the area chart | ColorValue| no | all | yes -| endFillColor3 | End gradient color for the third dataset of the area chart | ColorValue | no | all | yes -| startOpacity3 | Start gradient color for the third dataset of the area chart | number | no | all | yes -| endOpacity3 | End gradient opacity for the third dataset of the area chart | number | no | all | yes -| startFillColor4 | Start gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes -| endFillColor4 | End gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes -| startOpacity4 | Start gradient color for the fourth dataset of the area chart | number | no | all | yes -| endOpacity4 | End gradient opacity for the fourth dataset of the area chart | number | no | all | yes -| startFillColor5 | Start gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes -| endFillColor5 | End gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes -| startOpacity5 | Start gradient color for the fifth dataset of the area chart | number | no | all | yes -| endOpacity5 | End gradient opacity for the fifth dataset of the area chart | number | no | all | yes -| gradientDirection | Direction of the gradient (_'horizontal'_ or _'vertical'_) | string | no | all | yes -| areaGradientComponent | this prop defines the svg gradient that should be applied to the area (requires areaChart to be truthy) | Function| no | all | yes -| areaGradientId | id of the (needed along with areaGradientComponent prop) | string | no | all | yes +| areaChart | If set true, renders area chart instead of line chart | boolean| no | all | yes +| areaChart1 | If set true, renders area chart for 1st data set instead of line chart | boolean | no | all | yes +| areaChart2 | If set true, renders area chart for 2nd data set instead of line chartt | boolean | no | all | yes +| areaChart3 | If set true, renders area chart for 3rd data set instead of line chartt | boolean | no | all | yes +| areaChart4 | If set true, renders area chart for 4th data set instead of line chartt | boolean | no | all | yes +| areaChart5 | If set true, renders area chart for 5th data set instead of line chartt | boolean | no | all | yes +| startFillColor | Start gradient color for the area chart | ColorValue | no | all | yes +| endFillColor | End gradient color for the area chart | ColorValue | no | all | yes +| startOpacity | Start gradient opacity for the area chart | number | no | all | yes +| endOpacity | End gradient opacity for the area chart | number | no | all | yes +| startFillColor1 | Start gradient color for the first dataset of the area chart | ColorValue| no | all | yes +| endFillColor1 | End gradient color for the first dataset of the area chart | ColorValue | no | all | yes +| startOpacity1 | Start gradient opacity for the first dataset of the area chart | number | no | all | yes +| endOpacity1 | End gradient opacity for the first dataset of the area chart | number | no | all | yes +| startFillColor2 | Start gradient color for the second dataset of the area chart | ColorValue | no | all | yes +| endFillColor2 | End gradient color for the second dataset of the area chart | ColorValue | no | all | yes +| startOpacity2 | Start gradient color for the second dataset of the area chart | number | no | all | yes +| endOpacity2 | End gradient opacity for the second dataset of the area chart | number | no | all | yes +| startFillColor3 | Start gradient color for the third dataset of the area chart | ColorValue| no | all | yes +| endFillColor3 | End gradient color for the third dataset of the area chart | ColorValue | no | all | yes +| startOpacity3 | Start gradient color for the third dataset of the area chart | number | no | all | yes +| endOpacity3 | End gradient opacity for the third dataset of the area chart | number | no | all | yes +| startFillColor4 | Start gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes +| endFillColor4 | End gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes +| startOpacity4 | Start gradient color for the fourth dataset of the area chart | number | no | all | yes +| endOpacity4 | End gradient opacity for the fourth dataset of the area chart | number | no | all | yes +| startFillColor5 | Start gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes +| endFillColor5 | End gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes +| startOpacity5 | Start gradient color for the fifth dataset of the area chart | number | no | all | yes +| endOpacity5 | End gradient opacity for the fifth dataset of the area chart | number | no | all | yes +| gradientDirection | Direction of the gradient (_'horizontal'_ or _'vertical'_) | string | no | all | yes +| areaGradientComponent | this prop defines the svg gradient that should be applied to the area (requires areaChart to be truthy) | Function| no | all | yes +| areaGradientId | id of the (needed along with areaGradientComponent prop) | string | no | all | yes ### PieChart and DonutChart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a section in the Pie chart. Descibed in the next table | pieDataItem[] | no | all | yes -| radius | Radius of the Pie | number | no | all | yes -| initialAngle | Starting angle in radians (illustrated below this table)| number | no | all | yes -| isThreeD | If set to true, it rotates and translates the chart to give it a 3D effect | boolean | no | all | yes -| showGradient | Prop to enable radial gradient for the Pie sections | boolean | no | all | yes -| gradientCenterColor | Gradient color at the center of the Pie chart | ColorValue | no | all | yes -| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes -| focusOnPress | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | boolean | no | all | yes -| toggleFocusOnPress | When set to true, if the user presses an already focused pie section, it will be unfocused | boolean | no | all | yes -| extraRadiusForFocused | Extra radius for the focused Pie section | number | no | all | yes -| inwardExtraLengthForFocused | Extra length of focused Pie section towards the center (only for donut charts) | number | no | all | yes -| sectionAutoFocus | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | boolean | no | all | yes -| onLabelPress | Callback function called on press of a Label (takes item and index as parameter) | Function | no | all | yes -| tiltAngle | The angle by which the chart should be tilted | Angle in deg | no | all | yes -| shadow | Shadow to the Pie chart, when set to true, it enhances the 3D effect | boolean | no | all | yes -| shadowColor | Color of the shadow | ColorValue | no | all | yes -| shadowWidth | Width of the shadow | number | no | all | yes -| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes -| strokeColor | Stroke (line) color | ColorValue | no | all | yes -| backgroundColor | Background color of the container that contains the Pie chart | ColorValue | no | all | yes -| showText | When set to true, displays text on the Pie sections | boolean | no | all | yes -| textColor | Color of the label texts | ColorValue | no | all | yes -| textSize | Size of the label texts (max allowed: radius / 5) | number | no | all | yes -| fontStyle | Style of the text - 'normal', 'italic' or 'oblique'| string| no | all | yes -| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes -| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | yes -| showTextBackground | When set to true, displays background for text on the Pie sections | boolean | no | all | yes -| textBackgroundColor | Background color for the label texts | ColorValue | no | all | yes -| textBackgroundRadius | Radius for the background of the text labels | number | no | all | yes -| showValuesAsLabels | When set to true, the values of the Pie sections are displayed as labels | boolean | no | all | yes -| centerLabelComponent | Component to be rendered at the center of the Pie chart | Function | no | all | yes -| semiCircle | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | boolean | no | all | yes -| labelsPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes -| pieInnerComponent | Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes -| paddingHorizontal | horizontal padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes -| paddingVertical | vertical padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes -| isAnimated | To show animates PieProChart. Animation occurs onLoad and on value change | boolean | no | all | yes -| animationDuration | Duration of the animations, only fro PieProChart | number| no | all | yes -| curvedStartEdges | Bend start edge, only fro PieProChart | boolean | no | all | yes -| curvedEndEdges | Bend end edge, only fro PieProChart | boolean | no | all | yes -| edgesRadius | Bend radius, only fro PieProChart | number | no | all | yes +| data | An item object represents a section in the Pie chart. Descibed in the next table | pieDataItem[] | no | all | yes +| radius | Radius of the Pie | number | no | all | yes +| initialAngle | Starting angle in radians (illustrated below this table)| number | no | all | yes +| isThreeD | If set to true, it rotates and translates the chart to give it a 3D effect | boolean | no | all | yes +| showGradient | Prop to enable radial gradient for the Pie sections | boolean | no | all | yes +| gradientCenterColor | Gradient color at the center of the Pie chart | ColorValue | no | all | yes +| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes +| focusOnPress | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | boolean | no | all | yes +| toggleFocusOnPress | When set to true, if the user presses an already focused pie section, it will be unfocused | boolean | no | all | yes +| extraRadiusForFocused | Extra radius for the focused Pie section | number | no | all | yes +| inwardExtraLengthForFocused | Extra length of focused Pie section towards the center (only for donut charts) | number | no | all | yes +| sectionAutoFocus | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | boolean | no | all | yes +| onLabelPress | Callback function called on press of a Label (takes item and index as parameter) | Function | no | all | yes +| tiltAngle | The angle by which the chart should be tilted | Angle in deg | no | all | yes +| shadow | Shadow to the Pie chart, when set to true, it enhances the 3D effect | boolean | no | all | yes +| shadowColor | Color of the shadow | ColorValue | no | all | yes +| shadowWidth | Width of the shadow | number | no | all | yes +| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes +| strokeColor | Stroke (line) color | ColorValue | no | all | yes +| backgroundColor | Background color of the container that contains the Pie chart | ColorValue | no | all | yes +| showText | When set to true, displays text on the Pie sections | boolean | no | all | yes +| textColor | Color of the label texts | ColorValue | no | all | yes +| textSize | Size of the label texts (max allowed: radius / 5) | number | no | all | yes +| fontStyle | Style of the text - 'normal', 'italic' or 'oblique'| string| no | all | yes +| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes +| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | yes +| showTextBackground | When set to true, displays background for text on the Pie sections | boolean | no | all | yes +| textBackgroundColor | Background color for the label texts | ColorValue | no | all | yes +| textBackgroundRadius | Radius for the background of the text labels | number | no | all | yes +| showValuesAsLabels | When set to true, the values of the Pie sections are displayed as labels | boolean | no | all | yes +| centerLabelComponent | Component to be rendered at the center of the Pie chart | Function | no | all | yes +| semiCircle | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | boolean | no | all | yes +| labelsPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes +| pieInnerComponent | Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes +| paddingHorizontal | horizontal padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes +| paddingVertical | vertical padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes +| isAnimated | To show animates PieProChart. Animation occurs onLoad and on value change | boolean | no | all | yes +| animationDuration | Duration of the animations, only fro PieProChart | number| no | all | yes +| curvedStartEdges | Bend start edge, only fro PieProChart | boolean | no | all | yes +| curvedEndEdges | Bend end edge, only fro PieProChart | boolean | no | all | yes +| edgesRadius | Bend radius, only fro PieProChart | number | no | all | yes **Item description (pieDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item, representing a section of the Pie chart | number | no | all | yes -| shiftX | Translates (shifts) the particular section horizontally by given value | number | no | all | yes -| shiftY | Translates (shifts) the particular section vertically by given value | number | no | all | yes -| shiftTextX | Translates (shifts) the position of label text horizontally | number | no | all | yes -| shiftTextY | Translates (shifts) the position of label text vertically | number | no | all | yes -| shiftTextBackgroundX | Shifts the background of label text horizontally (default value is shiftTextX) | number | no | all | yes -| shiftTextBackgroundY | Shifts the background of label text vertically (default value is shiftTextY) | number | no | all | yes -| color | Color (background color) of the section | ColorValue | no | all | yes -| text | Label text for the sections | string | no | all | yes -| textColor | Color of the text (label) inside the section | ColorValue | no | all | yes -| textSize | Size of the text (label) inside the section | number | no | all | yes -| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes -| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes -| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | yes -| textBackgroundColor | Background color for the label text | ColorValue | no | all | yes -| textBackgroundRadius | Radius for the background of the text label| number | no | all | yes -| labelPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes -| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes -| onLabelPress | Callback function called on press of a Label (takes item and index as parameter) | Function | no | all | yes -| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes -| strokeColor | Stroke (line) color | ColorValue | no | all | yes -| focused | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | boolean | no | all | yes -| pieInnerComponent | Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes +| value | Value of the item, representing a section of the Pie chart | number | no | all | yes +| shiftX | Translates (shifts) the particular section horizontally by given value | number | no | all | yes +| shiftY | Translates (shifts) the particular section vertically by given value | number | no | all | yes +| shiftTextX | Translates (shifts) the position of label text horizontally | number | no | all | yes +| shiftTextY | Translates (shifts) the position of label text vertically | number | no | all | yes +| shiftTextBackgroundX | Shifts the background of label text horizontally (default value is shiftTextX) | number | no | all | yes +| shiftTextBackgroundY | Shifts the background of label text vertically (default value is shiftTextY) | number | no | all | yes +| color | Color (background color) of the section | ColorValue | no | all | yes +| text | Label text for the sections | string | no | all | yes +| textColor | Color of the text (label) inside the section | ColorValue | no | all | yes +| textSize | Size of the text (label) inside the section | number | no | all | yes +| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes +| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes +| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | yes +| textBackgroundColor | Background color for the label text | ColorValue | no | all | yes +| textBackgroundRadius | Radius for the background of the text label| number | no | all | yes +| labelPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes +| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes +| onLabelPress | Callback function called on press of a Label (takes item and index as parameter) | Function | no | all | yes +| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes +| strokeColor | Stroke (line) color | ColorValue | no | all | yes +| focused | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | boolean | no | all | yes +| pieInnerComponent | Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes **Donut chart related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| donut | When set to true, renders a Donut chart (makes an inner ring) | boolean | no | all | yes -| innerRadius | Radius of the inner ring | number | no | all | yes -| innerCircleColor | Color of the inner ring | ColorValue| no | all | yes -| innerCircleBorderWidth | Stroke (border) width of the inner ring | number | no | all | yes -| innerCircleBorderColor | Stroke (border) color of the inner ring | ColorValue | no | all | yes -| shiftInnerCenterX | Shifts the inner ring horizontally to enhance the 3D effect | number | no | all | yes -| shiftInnerCenterY | Shifts the inner ring vertically to enhance the 3D effect | number | no | all | yes +| donut | When set to true, renders a Donut chart (makes an inner ring) | boolean | no | all | yes +| innerRadius | Radius of the inner ring | number | no | all | yes +| innerCircleColor | Color of the inner ring | ColorValue| no | all | yes +| innerCircleBorderWidth | Stroke (border) width of the inner ring | number | no | all | yes +| innerCircleBorderColor | Stroke (border) color of the inner ring | ColorValue | no | all | yes +| shiftInnerCenterX | Shifts the inner ring horizontally to enhance the 3D effect | number | no | all | yes +| shiftInnerCenterY | Shifts the inner ring vertically to enhance the 3D effect | number | no | all | yes ### Population Pyramid **base props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| height | height of chart body (excluding x-axis labels) | number | no | all | yes -| width | width of chart body | number | no | all | yes -| data | array of objects, each object is described by **popnPyramidDataItem** | Array | no | all | yes -| hideRules | when set to true, hides horizontal rules (which are displayed in the background of the charts) | boolean | no | all | yes -| rulesThickness | thickness of the horizontal rules | number | no | all | yes -| rulesColor | color of the horizontal rules | ColorValue | no | all | yes -| rulesType| type of the horizontal rules - SOLID or DASHED/DOTTED | RuleTypes | no | all | yes -| dashWidth | width of each dash in the horizontal rules | number | no | all | yes -| dashGap | gap between each dash in the horizontal rules | number | no | all | yes -| stepHeight| height of each step/horizontal section in the chart body | number | no | all | yes -| verticalMarginBetweenBars| self explanatory | number | no | all | yes -| hideYAxisText | hide Y axis labels, when not set to true, a gap will be left to the left of the chart | boolean | no | all | yes -| yAxisLabelWidth | self explanatory | number | no | all | yes -| yAxisColor | self explanatory | ColorValue | no | all | yes -| yAxisThickness | self explanatory | number | no | all | yes -| yAxisStrokeDashArray | used to render a dashed or dotted Y axis line ([dashWidth,dashGap]) | Array | no | all | yes -| xAxisColor | self explanatory | ColorValue | no | all | yes -| xAxisThickness | self explanatory | number | no | all | yes -| xAxisType | type of X-axis- SOLID, DASHED or DOTTED | RuleTypes | no | all | yes -| xAxisNoOfSections | number of sections in X-axis (in both left and right parts) | number | no | all | yes -| showXAxisIndices | when set to true, shows small lines (indices) at each section of x-axis | boolean | no | all | yes -| xAxisIndicesWidth | width of x axis indices | number | no | all | yes -| xAxisIndicesHeight | height of x axis indices | number | no | all | yes -| xAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes -| xAxisIndicesShiftY | used to shift x axis indices downwards or upwards | number | no | all | yes -| showXAxisLabelTexts | self explanatory | boolean | no | all | yes -| xAxisLabelFontSize | self explanatory | number | no | all | yes -| xAxisLabelColor | self explanatory | ColorValue | no | all | yes -| xAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes -| xAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes -| xAxisLabelFontFamily | self explanatory | string | no | all | yes -| xAxisLabelShiftX | horizontally shifts the x axis labels by given value | number | no | all | yes -| xAxisLabelShiftY | vertically shifts the x axis labels by given value | number | no | all | yes -| xAxisRoundToDigits | number of decimal places upto which x axis labels will be displayed | number | no | all | yes -| xAxisLabelPrefix | The String prepended to the x axis label text (for example- '$') | string | no | all | yes -| xAxisLabelSuffix | The String appended to the x axis label text | string | no | all | yes -| formatXAxisLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes -| showVerticalLines | show vertical lines (similar to horiz rules) in background of the chart | boolean | no | all | yes -| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes -| verticalLinesThickness | Thickness of the vertical lines | number | no | all | yes -| verticalLinesStrokeDashArray | used to render dashed or dotted vertical lines ([dashWidth,dashGap]) | Array | no | all | yes -| noOfSections | Number of sections (and horiz rules) in the Y axis | number | no | all | yes -| barsMapToYAxisSections | this prop tells whether the number of sections in the Y axis is equal to the length of data array | boolean | no | all | yes -| showYAxisIndices | when set to true, shows small lines (indices) at each section of y-axis | boolean | no | all | yes -| yAxisIndicesWidth | width of y axis indices | number | no | all | yes -| yAxisIndicesHeight | height of y axis indices | number | no | all | yes -| yAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes -| yAxisLabelColor | color of of x axis label text | ColorValue | no | all | yes -| yAxisLabelFontSize | font size of of of x axis label text =| number | no | all | yes -| yAxisLabelTextMarginRight | space left between the y axis labels and the y axis line | number | no | all | yes -| yAxisLabelTexts | An array of string labels to be rendered as Y axis labels (top to bottom) | Array | no | all | yes -| yAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes -| yAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes -| yAxisLabelFontFamily | self explanatory | string | no | all | yes -| showValuesAsBarLabels | when set to true, displays the left and right values as labels beside the respective bars | boolean | no | all | yes -| showMidAxis | when set to true, displays an axis in the mid - between the left and right halves of the pyramid | boolean | no | all | yes -| midAxisThickness | thickness of the mid axis lines | number | no | all | yes -| midAxisLabelWidth | width of the mid axis | number | no | all | yes -| midAxisColor | color of the mid axis lines | ColorValue | no | all | yes -| midAxisLeftColor | color of the left mid axis line | ColorValue | no | all | yes -| midAxisRightColor | color of the right mid axis line | ColorValue | no | all | yes -| midAxisStrokeDashArray | used to render dashed or dotted mid axis lines ([dashWidth,dashGap]) | Array | no | all | yes -| midAxisLabelFontSize | self explanatory | number | no | all | yes -| midAxisLabelColor | self explanatory | ColorValue | no | all | yes -| midAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes -| midAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes -| midAxisLabelFontFamily | self explanatory | string | no | all | yes -| barLabelWidth | width of the labels displayed behind the bars (both left and right bars) | number | no | all | yes -| barLabelFontSize | font size of the labels displayed behind the bars (both left and right bars) | number | no | all | yes -| barLabelColor | color of the of the labels displayed behind the bars (both left and right bars) | ColorValue | no | all | yes -| barLabelFontStyle | font style of the labels displayed behind the bars (both left and right bars) | FontStyle | no | all | yes -| barLabelFontWeight | font weight of the labels displayed behind the bars (both left and right bars) | FontWeight | no | all | yes -| barLabelFontFamily | font family of the labels displayed behind the bars (both left and right bars) | string | no | all | yes -| leftBarLabelWidth | width of the labels displayed behind the left bars | number | no | all | yes -| leftBarLabelFontSize | font size of the labels displayed behind the left bars | number | no | all | yes -| leftBarLabelColor | color of the labels displayed behind the left bars | ColorValue | no | all | yes -| leftBarLabelFontStyle | font style of the labels displayed behind the left bars | FontStyle | no | all | yes -| leftBarLabelFontWeight | font weight of the labels displayed behind the left bars | FontWeight | no | all | yes -| leftBarLabelFontFamily | font family of the labels displayed behind the left bars | string | no | all | yes -| leftBarLabelShift | value by which the left bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes -| leftBarLabelPrefix | The String prepended to the left bar label text (for example- '$') | string | no | all | yes -| leftBarLabelSuffix | The String appended to the left bar label text | string | no | all | yes -| rightBarLabelWidth | width of the labels displayed behind the right bars | number | no | all | yes -| rightBarLabelFontSize | font size of the labels displayed behind the right bars | number | no | all | yes -| rightBarLabelColor | color of the labels displayed behind the right bars | ColorValue | no | all | yes -| rightBarLabelFontStyle | font style of the labels displayed behind the right bars | FontStyle | no | all | yes -| rightBarLabelFontWeight | font weight of the labels displayed behind the right bars | FontWeight | no | all | yes -| rightBarLabelFontFamily | font family of the labels displayed behind the right bars | string | no | all | yes -| rightBarLabelShift | value by which the right bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes -| rightBarLabelPrefix | The String prepended to the right bar label text (for example- '$') | string | no | all | yes -| rightBarLabelSuffix | The String appended to the right bar label text | string | no | all | yes -| formatBarLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes -| leftBarColor | color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes -| rightBarColor | color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes -| leftBarBorderColor | border color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes -| rightBarBorderColor | border color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes -| barBorderWidth | boder width of the bars (both left and right bars) | number | no | all | yes -| leftBarBorderWidth | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes -| rightBarBorderWidth | boder width of the bars displayed in the right half of the pyramid | number | no | all | yes -| barBorderRadius | boder radius of the bars | number | no | all | yes -| leftBarBorderRadius | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes -| rightBarBorderRadius | boder width of the bars displayed in the right half of the pyramid| number | no | all | yes -| allCornersRounded | when set to true, border radius will apply to all the four corners of the bars, else applied only on outer edges | boolean | no | all | yes -| showSurplus | shows surplus values on the edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes -| showSurplusLeft | shows surplus values on the left edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes -| showSurplusRight | shows surplus values on the right edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes -| leftSurplusColor | highlight color of the left surplus | ColorValue | no | all | yes -| leftSurplusBorderColor | border color of the left surplus | ColorValue | no | all | yes -| rightSurplusColor | highlight color of the right surplus | ColorValue | no | all | yes -| rightSurplusBorderColor | border color of the right surplus | ColorValue | no | all | yes -| leftSurplusBorderWidth | border width of the left surplus | number | no | all | yes -| rightSurplusBorderWidth | border width of the right surplus | number | no | all | yes - -## 遗留问题 - -- [ ] PieChart设置圆环设置为3D，中间圆环显示问题，svg问题。 [issue#7](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/7) -- [X] BarChart设置barBackgroundPattern显示问题，svg问题。 [issue#6](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/6) -- [ ] LineChart设置customDataPoint不显示，svg问题。 [issue#8](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/8) -- [ ] PieChartPro饼图设置animated为true，动画会卡顿，RN框架问题。 [issue#9](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/9) - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/LICENSE) ，请自由地享受和参与开源。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- | -------- | -------- | ----------------- | +| height | height of chart body (excluding x-axis labels) | number | no | all | yes | +| width | width of chart body | number | no | all | yes | +| data | array of objects, each object is described by **popnPyramidDataItem** | Array | no | all | yes | +| hideRules | when set to true, hides horizontal rules (which are displayed in the background of the charts) | boolean | no | all | yes | +| rulesThickness | thickness of the horizontal rules | number | no | all | yes | +| rulesColor | color of the horizontal rules | ColorValue | no | all | yes | +| rulesType | type of the horizontal rules - SOLID or DASHED/DOTTED | RuleTypes | no | all | yes | +| dashWidth | width of each dash in the horizontal rules | number | no | all | yes | +| dashGap | gap between each dash in the horizontal rules | number | no | all | yes | +| stepHeight | height of each step/horizontal section in the chart body | number | no | all | yes | +| verticalMarginBetweenBars | self explanatory | number | no | all | yes | +| hideYAxisText | hide Y axis labels, when not set to true, a gap will be left to the left of the chart | boolean | no | all | yes | +| yAxisLabelWidth | self explanatory | number | no | all | yes | +| yAxisColor | self explanatory | ColorValue | no | all | yes | +| yAxisThickness | self explanatory | number | no | all | yes | +| yAxisStrokeDashArray | used to render a dashed or dotted Y axis line ([dashWidth,dashGap]) | Array | no | all | yes | +| xAxisColor | self explanatory | ColorValue | no | all | yes | +| xAxisThickness | self explanatory | number | no | all | yes | +| xAxisType | type of X-axis- SOLID, DASHED or DOTTED | RuleTypes | no | all | yes | +| xAxisNoOfSections | number of sections in X-axis (in both left and right parts) | number | no | all | yes | +| showXAxisIndices | when set to true, shows small lines (indices) at each section of x-axis | boolean | no | all | yes | +| xAxisIndicesWidth | width of x axis indices | number | no | all | yes | +| xAxisIndicesHeight | height of x axis indices | number | no | all | yes | +| xAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes | +| xAxisIndicesShiftY | used to shift x axis indices downwards or upwards | number | no | all | yes | +| showXAxisLabelTexts | self explanatory | boolean | no | all | yes | +| xAxisLabelFontSize | self explanatory | number | no | all | yes | +| xAxisLabelColor | self explanatory | ColorValue | no | all | yes | +| xAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes | +| xAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes | +| xAxisLabelFontFamily | self explanatory | string | no | all | yes | +| xAxisLabelShiftX | horizontally shifts the x axis labels by given value | number | no | all | yes | +| xAxisLabelShiftY | vertically shifts the x axis labels by given value | number | no | all | yes | +| xAxisRoundToDigits | number of decimal places upto which x axis labels will be displayed | number | no | all | yes | +| xAxisLabelPrefix | The String prepended to the x axis label text (for example- '$') | string | no | all | yes | +| xAxisLabelSuffix | The String appended to the x axis label text | string | no | all | yes | +| formatXAxisLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes | +| showVerticalLines | show vertical lines (similar to horiz rules) in background of the chart | boolean | no | all | yes | +| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes | +| verticalLinesThickness | Thickness of the vertical lines | number | no | all | yes | +| verticalLinesStrokeDashArray | used to render dashed or dotted vertical lines ([dashWidth,dashGap]) | Array | no | all | yes | +| noOfSections | Number of sections (and horiz rules) in the Y axis | number | no | all | yes | +| barsMapToYAxisSections | this prop tells whether the number of sections in the Y axis is equal to the length of data array | boolean | no | all | yes | +| showYAxisIndices | when set to true, shows small lines (indices) at each section of y-axis | boolean | no | all | yes | +| yAxisIndicesWidth | width of y axis indices | number | no | all | yes | +| yAxisIndicesHeight | height of y axis indices | number | no | all | yes | +| yAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes | +| yAxisLabelColor | color of of x axis label text | ColorValue | no | all | yes | +| yAxisLabelFontSize | font size of of of x axis label text = | number | no | all | yes | +| yAxisLabelTextMarginRight | space left between the y axis labels and the y axis line | number | no | all | yes | +| yAxisLabelTexts | An array of string labels to be rendered as Y axis labels (top to bottom) | Array | no | all | yes | +| yAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes | +| yAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes | +| yAxisLabelFontFamily | self explanatory | string | no | all | yes | +| showValuesAsBarLabels | when set to true, displays the left and right values as labels beside the respective bars | boolean | no | all | yes | +| showMidAxis | when set to true, displays an axis in the mid - between the left and right halves of the pyramid | boolean | no | all | yes | +| midAxisThickness | thickness of the mid axis lines | number | no | all | yes | +| midAxisLabelWidth | width of the mid axis | number | no | all | yes | +| midAxisColor | color of the mid axis lines | ColorValue | no | all | yes | +| midAxisLeftColor | color of the left mid axis line | ColorValue | no | all | yes | +| midAxisRightColor | color of the right mid axis line | ColorValue | no | all | yes | +| midAxisStrokeDashArray | used to render dashed or dotted mid axis lines ([dashWidth,dashGap]) | Array | no | all | yes | +| midAxisLabelFontSize | self explanatory | number | no | all | yes | +| midAxisLabelColor | self explanatory | ColorValue | no | all | yes | +| midAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes | +| midAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes | +| midAxisLabelFontFamily | self explanatory | string | no | all | yes | +| barLabelWidth | width of the labels displayed behind the bars (both left and right bars) | number | no | all | yes | +| barLabelFontSize | font size of the labels displayed behind the bars (both left and right bars) | number | no | all | yes | +| barLabelColor | color of the of the labels displayed behind the bars (both left and right bars) | ColorValue | no | all | yes | +| barLabelFontStyle | font style of the labels displayed behind the bars (both left and right bars) | FontStyle | no | all | yes | +| barLabelFontWeight | font weight of the labels displayed behind the bars (both left and right bars) | FontWeight | no | all | yes | +| barLabelFontFamily | font family of the labels displayed behind the bars (both left and right bars) | string | no | all | yes | +| leftBarLabelWidth | width of the labels displayed behind the left bars | number | no | all | yes | +| leftBarLabelFontSize | font size of the labels displayed behind the left bars | number | no | all | yes | +| leftBarLabelColor | color of the labels displayed behind the left bars | ColorValue | no | all | yes | +| leftBarLabelFontStyle | font style of the labels displayed behind the left bars | FontStyle | no | all | yes | +| leftBarLabelFontWeight | font weight of the labels displayed behind the left bars | FontWeight | no | all | yes | +| leftBarLabelFontFamily | font family of the labels displayed behind the left bars | string | no | all | yes | +| leftBarLabelShift | value by which the left bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes | +| leftBarLabelPrefix | The String prepended to the left bar label text (for example- '$') | string | no | all | yes | +| leftBarLabelSuffix | The String appended to the left bar label text | string | no | all | yes | +| rightBarLabelWidth | width of the labels displayed behind the right bars | number | no | all | yes | +| rightBarLabelFontSize | font size of the labels displayed behind the right bars | number | no | all | yes | +| rightBarLabelColor | color of the labels displayed behind the right bars | ColorValue | no | all | yes | +| rightBarLabelFontStyle | font style of the labels displayed behind the right bars | FontStyle | no | all | yes | +| rightBarLabelFontWeight | font weight of the labels displayed behind the right bars | FontWeight | no | all | yes | +| rightBarLabelFontFamily | font family of the labels displayed behind the right bars | string | no | all | yes | +| rightBarLabelShift | value by which the right bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes | +| rightBarLabelPrefix | The String prepended to the right bar label text (for example- '$') | string | no | all | yes | +| rightBarLabelSuffix | The String appended to the right bar label text | string | no | all | yes | +| formatBarLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes | +| leftBarColor | color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes | +| rightBarColor | color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes | +| leftBarBorderColor | border color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes | +| rightBarBorderColor | border color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes | +| barBorderWidth | boder width of the bars (both left and right bars) | number | no | all | yes | +| leftBarBorderWidth | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes | +| rightBarBorderWidth | boder width of the bars displayed in the right half of the pyramid | number | no | all | yes | +| barBorderRadius | boder radius of the bars | number | no | all | yes | +| leftBarBorderRadius | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes | +| rightBarBorderRadius | boder width of the bars displayed in the right half of the pyramid | number | no | all | yes | +| allCornersRounded | when set to true, border radius will apply to all the four corners of the bars, else applied only on outer edges | boolean | no | all | yes | +| showSurplus | shows surplus values on the edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes | +| showSurplusLeft | shows surplus values on the left edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes | +| showSurplusRight | shows surplus values on the right edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes | +| leftSurplusColor | highlight color of the left surplus | ColorValue | no | all | yes | +| leftSurplusBorderColor | border color of the left surplus | ColorValue | no | all | yes | +| rightSurplusColor | highlight color of the right surplus | ColorValue | no | all | yes | +| rightSurplusBorderColor | border color of the right surplus | ColorValue | no | all | yes | +| leftSurplusBorderWidth | border width of the left surplus | number | no | all | yes | +| rightSurplusBorderWidth | border width of the right surplus | number | no | all | yes | + +## Known Issues + +- [ ] PieChart 设置圆环设置为 3D，中间圆环显示问题，svg 问题。 [issue#7](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/7) +- [x] BarChart 设置 barBackgroundPattern 显示问题，svg 问题。 [issue#6](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/6) +- [ ] LineChart 设置 customDataPoint 不显示，svg 问题。 [issue#8](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/8) +- [ ] PieChartPro 饼图设置 animated 为 true，动画会卡顿，RN 框架问题。 [issue#9](https://github.com/react-native-oh-library/react-native-gifted-charts/issues/9) + +## Others + +## License + +This project is licensed under [The MIT License (MIT)](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/LICENSE). diff --git a/en/react-native-image-capinsets-next.md b/en/react-native-image-capinsets-next.md index 61c121d4..9a62101c 100644 --- a/en/react-native-image-capinsets-next.md +++ b/en/react-native-image-capinsets-next.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-image-capinsets-next

@@ -14,15 +14,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-capinsets-next) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-capinsets-next) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases)，并下载适用版本的 tgz 包。 +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-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -40,21 +40,21 @@ yarn add @react-native-oh-tpl/react-native-image-capinsets-next@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import ImageCapInset from 'react-native-image-capinsets-next'; -import React, {useState} from 'react'; -import {View, StyleSheet, Text, Switch} from 'react-native'; +import ImageCapInset from "react-native-image-capinsets-next"; +import React, { useState } from "react"; +import { View, StyleSheet, Text, Switch } from "react-native"; const YourImage = () => { // 以下图片资源可在img文件夹中获取 - const img1 = require('./capinset_bg.png'); - const img2 = require('./capinset_bg2.png'); - const initInset = JSON.stringify({top: 4, right: 3, bottom: 4, left: 12}); - const initInset2 = JSON.stringify({top: 1, right: 1, bottom: 1, left: 5}); + const img1 = require("./capinset_bg.png"); + const img2 = require("./capinset_bg2.png"); + const initInset = JSON.stringify({ top: 4, right: 3, bottom: 4, left: 12 }); + const initInset2 = JSON.stringify({ top: 1, right: 1, bottom: 1, left: 5 }); const [currentImg, setCurrentImg] = useState(img1); const [currentCapInset, setCurrentCapInset] = useState(JSON.parse(initInset)); @@ -74,14 +74,15 @@ const YourImage = () => { + capInsets={currentCapInset} + > 图片内容2 切换图片: { 切换Inset: @@ -102,38 +103,38 @@ const YourImage = () => { const styles = StyleSheet.create({ container: { paddingTop: 50, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, imgStyle: { width: 200, height: 40, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: 'lightblue', + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "lightblue", }, switchItem: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', + display: "flex", + flexDirection: "row", + alignItems: "center", }, }); export default YourImage; ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -144,18 +145,15 @@ export default YourImage; } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -164,22 +162,22 @@ export default YourImage; } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNCImageCapInsets 组件 +### 3. Introducing RNCImageCapInsets Component to ArkTS -找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +(If the code of the repository is written through CAPI, delete this section.)
Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: ```diff ... @@ -199,9 +197,9 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... ``` -> [!TIP] 本库使用了混合方案，需要添加组件名。 +> [!TIP] If the repository uses a mixed solution, the component name needs to be added. -在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 +Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. ```diff const arkTsComponentNames: Array = [ @@ -212,9 +210,9 @@ const arkTsComponentNames: Array = [ ]; ``` -### 4.在 ArkTs 侧引入 xxx Package +### 4. Introducing RNCImageCapInsetsPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -228,45 +226,42 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +### 5. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +Then build and run the code. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases) +## 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. -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-capinsets-next Releases](https://github.com/react-native-oh-library/react-native-image-capinsets-next/releases) -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +## Properties -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| source | Image source data | [ImageSource](https://reactnative.cn/docs/next/image#imagesource) | yes | All | yes | -| capInsets | When the image is scaled, the size of the corners specified by the capInsets is fixed without scaling, while the rest of the middle and sides are stretched. This is useful for making variable-size rounded button shadows and other resources | [Rect](https://reactnative.cn/docs/next/rect) | no | All | yes | +> [!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 | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------- | -------- | ----------------- | +| source | Image source data | [ImageSource](https://reactnative.cn/docs/next/image#imagesource) | yes | All | yes | +| capInsets | When the image is scaled, the size of the corners specified by the capInsets is fixed without scaling, while the rest of the middle and sides are stretched. This is useful for making variable-size rounded button shadows and other resources | [Rect](https://reactnative.cn/docs/next/rect) | no | All | yes | -## 开源协议 +## Others -本项目基于 [The MIT License (MIT)](https://www.mit-license.org) ，请自由地享受和参与开源。 +## License +This project is licensed under [The MIT License (MIT)](https://www.mit-license.org). - \ No newline at end of file + diff --git a/en/react-native-image-colors.md b/en/react-native-image-colors.md index bcee4091..1fe17e1e 100644 --- a/en/react-native-image-colors.md +++ b/en/react-native-image-colors.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-image-colors

@@ -13,15 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-colors) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-colors) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases)，并下载适用版本的 tgz 包。 +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-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -39,9 +39,9 @@ yarn add @react-native-oh-tpl/react-native-image-colors@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React, { useEffect, useState } from 'react' @@ -197,17 +197,17 @@ const styles = StyleSheet.create({ }) ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -218,18 +218,15 @@ const styles = StyleSheet.create({ } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -238,22 +235,22 @@ const styles = StyleSheet.create({ } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNImageColorsPackage +### 3. Introducing RNImageColorsPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -267,63 +264,61 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) ## API ### ImageColors.getColors(uri: string, config?: Config): Promise +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | | getColors | Fetch prominent colors from an image. | Function | yes | all | yes | - ### Uri A string which can be: -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | -| uri | 1. URL: [`https://i.imgur.com/O3XSdU7.jpg`](https://i.imgur.com/O3XSdU7.jpg);
2. Local file: const catImg = require('./images/cat.jpg');
3. Base64: const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...' | string | yes | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | -------- | ----------------- | +| uri | 1. URL: [`https://i.imgur.com/O3XSdU7.jpg`](https://i.imgur.com/O3XSdU7.jpg);
2. Local file: const catImg = require('./images/cat.jpg');
3. Base64: const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...' | string | yes | all | yes | - > The mime type prefix for base64 is required (e.g. data:image/png;base64). +> The mime type prefix for base64 is required (e.g. data:image/png;base64). ### Config The config object is optional. -| Name | Description | Type | Required | Default | Supported | HarmonyOS Support | -| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------------------- | ----------------- | ----------------- | -| `fallback` | If a color property couldn't be retrieved, it will default to this hex color string | `string` | no | `"#000000"` | all | yes | -| `cache` | Enables in-memory caching of the result - skip downloading the same image next time. | `boolean` | no | `false` | all | yes | -| `key` | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string` | no | `undefined` | all | yes | -| `headers` | HTTP headers to be sent along with the GET request to download the image | `Record` | no | `undefined` | iOS, Android | yes | -| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1). | `number` | no | `5` | Android | no | -| `quality` | Highest implies no downscaling and very good colors. | `'lowest'`
`'low'`
`'high'`
`'highest'` | no | `'low'` | iOS, Web | no | +| Name | Description | Type | Required | Default | Supported | HarmonyOS Support | +| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------- | ----------- | ------------ | ----------------- | +| `fallback` | If a color property couldn't be retrieved, it will default to this hex color string | `string` | no | `"#000000"` | all | yes | +| `cache` | Enables in-memory caching of the result - skip downloading the same image next time. | `boolean` | no | `false` | all | yes | +| `key` | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string` | no | `undefined` | all | yes | +| `headers` | HTTP headers to be sent along with the GET request to download the image | `Record` | no | `undefined` | iOS, Android | yes | +| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1). | `number` | no | `5` | Android | no | +| `quality` | Highest implies no downscaling and very good colors. | `'lowest'`
`'low'`
`'high'`
`'highest'` | no | `'low'` | iOS, Web | no | ### ImageColorsResult @@ -331,35 +326,34 @@ Every result object contains a respective `platform` key to help narrow down the HarmonyImageColors -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------ | --------------------------------------------------- | ----------- | -------- | --------- | ----------------- | -| `mainColor` | The main colors of the image. | `string` | no | harmonyOS | yes | -| `largestProportionColor` | The color with the highest proportion in the image. | `string` | no | harmonyOS | yes | -| `highestSaturationColor` | The color with the highest saturation in the image. | `string` | no | harmonyOS | yes | -| `averageColor` | The average color of the image. | `string` | no | harmonyOS | yes | -| `platform` | The platform is HarmonyOS. | `string` | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | --------------------------------------------------- | -------- | -------- | --------- | ----------------- | +| `mainColor` | The main colors of the image. | `string` | no | harmonyOS | yes | +| `largestProportionColor` | The color with the highest proportion in the image. | `string` | no | harmonyOS | yes | +| `highestSaturationColor` | The color with the highest saturation in the image. | `string` | no | harmonyOS | yes | +| `averageColor` | The average color of the image. | `string` | no | harmonyOS | yes | +| `platform` | The platform is HarmonyOS. | `string` | no | all | yes | ### ImageColors.cache -| Name | Description | Type | Required | Params | Platform | HarmonyOS Support | -| --------- | ------------------------------------- | -------- | -------- | -------- | -------- | ----------------- | -| getItem | Read cache result. | Function | no | key: string | all | yes | -| setItem | Set a cached result. | Function | no | key: string, value: ImageColorsResult | all | yes | -| removeItem | Delete a cached result. | Function | no | key: string | all | yes | -| clear | Clearing the cache. | Function | no | | all | yes | - +| Name | Description | Type | Required | Params | Platform | HarmonyOS Support | +| ---------- | ----------------------- | -------- | -------- | ------------------------------------- | -------- | ----------------- | +| getItem | Read cache result. | Function | no | key: string | all | yes | +| setItem | Set a cached result. | Function | no | key: string, value: ImageColorsResult | all | yes | +| removeItem | Delete a cached result. | Function | no | key: string | all | yes | +| clear | Clearing the cache. | Function | no | | all | yes | ### Notes + - Since the implementation of each platform is different you can get **different color results for each**. - This module is a wrapper around the [Palette](https://developer.android.com/reference/androidx/palette/graphics/Palette) class on Android, [UIImageColors](https://github.com/jathu/UIImageColors) on iOS and [node-vibrant](https://github.com/Vibrant-Colors/node-vibrant) for the web and [@ohos.effectKit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-effectkit-V5) on harmonyOS. +## Known Issues -## 遗留问题 - -- [x] harmonyOS获取颜色值暂时只能得到固定的一种颜色，暂不支持通过传入`pixelSpacing`或`quality`参数来计算获取不同精确度的颜色值。[issue链接](https://github.com/react-native-oh-library/react-native-image-colors/issues/16) +- [x] harmonyOS 获取颜色值暂时只能得到固定的一种颜色，暂不支持通过传入`pixelSpacing`或`quality`参数来计算获取不同精确度的颜色值。[issue 链接](https://github.com/react-native-oh-library/react-native-image-colors/issues/16) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/osamaqarem/react-native-image-colors/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/osamaqarem/react-native-image-colors/blob/master/LICENSE). diff --git a/en/react-native-image-pan-zoom.md b/en/react-native-image-pan-zoom.md index 1cf726f7..9c9c68dc 100644 --- a/en/react-native-image-pan-zoom.md +++ b/en/react-native-image-pan-zoom.md @@ -1,4 +1,4 @@ -模板版本：v0.2.2 +Template version: v0.2.2

react-native-image-pan-zoom

@@ -12,15 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-zoom) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-zoom) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-image-zoom Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases)，并下载适用版本的 tgz 包。 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-library/react-native-image-zoom Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -38,18 +38,18 @@ yarn add @react-native-oh-tpl/react-native-image-zoom@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```tsx -import React from "react" -import { Image, Text, Button } from "react-native" -import ImageZoom from "react-native-image-pan-zoom" +import React from "react"; +import { Image, Text, Button } from "react-native"; +import ImageZoom from "react-native-image-pan-zoom"; export default function () { - const [cropWidth, setCropWidth] = React.useState(300) - const [cropHeight, setCropHeight] = React.useState(300) - const [imageWidth, setImageWidth] = React.useState(600) - const [imageHeight, setImageHeight] = React.useState(600) - const [panToMove, setPanToMove] = React.useState(false) + const [cropWidth, setCropWidth] = React.useState(300); + const [cropHeight, setCropHeight] = React.useState(300); + const [imageWidth, setImageWidth] = React.useState(600); + const [imageHeight, setImageHeight] = React.useState(600); + const [panToMove, setPanToMove] = React.useState(false); return ( <> @@ -79,78 +79,77 @@ export default function () { onPress={() => setPanToMove(!panToMove)} /> - ) + ); } ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-zoom Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases) -## 属性 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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-image-zoom](https://github.com/ascoders/react-native-image-zoom) ImageZoom -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ------------------ | ----------------------- | -------- | -------- | ----------------- | -| **cropWidth** | operating area width | number | YES | ALL | YES | -| **cropHeight** | operating area height | number | YES | ALL | YES | -| **imageWidth** | picture width | number | YES | ALL | YES -| **imageHeight** | picture height | number | YES | ALL | YES | -| `onClick` | onClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | -| `onDoubleClick` | onDoubleClick | (eventParams: IOnClick)=>void | NO | ALL | YES | -| `panToMove` | allow to move picture with one finger | boolean | NO | ALL | YES | -| `pinchToZoom` | allow scale with two fingers | boolean | NO | ALL | YES | -| `enableDoubleClickZoom` | allow double-click to enlarge | boolean | NO | ALL | YES | -| `clickDistance` | how many finger movement can also trigger `onClick` | number | NO | ALL | YES | -| `horizontalOuterRangeOffset` | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | (offsetX?: number)=>void | NO | ALL | YES | -| `onDragLeft` | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>void | NO | \ | NO | -| `responderRelease` | let go but do not cancel | (vx: number)=>void | NO | ALL | YES | -| `maxOverflow` | maximum sliding threshold | number | NO | ALL | YES | -| `longPressTime` | long press threshold | number | NO | ALL | YES | -| `onLongPress` | on longPress | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | -| `doubleClickInterval ` | time allocated for second click to be considered as doublClick event | number | NO | ALL | YES | -| `onMove` | reports movement position data (helpful to build overlays) | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | NO | ALL | YES | -| `centerOn` | if given this will cause the map to pan and zoom to the desired location | { x: number, y: number, scale: number, duration: number } | NO | ALL | YES | -| `enableSwipeDown` | for enabling vertical movement if user doesn't want it | boolean | NO | ALL | YES | -| `enableCenterFocus` | for disabling focus on image center if user doesn't want it | boolean | NO | ALL | YES | -| `onSwipeDown` | function that fires when user swipes down | () => void | NO | ALL | YES | -| `swipeDownThreshold` | threshold for firing swipe down function | number | NO | ALL | YES | -| `minScale` | minimum zoom scale | number | NO | ALL | YES | -| `maxScale` | maximum zoom scale | number | NO | ALL | YES | -| `useNativeDriver` | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | NO | ALL | YES | -| `onStartShouldSetPanResponder` | Override onStartShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | -| `onMoveShouldSetPanResponder` | Override onMoveShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | -| `onPanResponderTerminationRequest` | Override onPanResponderTerminationRequest behavior | () => boolean | NO | ALL | YES | -| `useHardwareTextureAndroid` | for disabling rendering to hardware texture on Android | boolean | NO | Android | NO | - -## 遗留问题 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| **cropWidth** | operating area width | number | YES | ALL | YES | +| **cropHeight** | operating area height | number | YES | ALL | YES | +| **imageWidth** | picture width | number | YES | ALL | YES | +| **imageHeight** | picture height | number | YES | ALL | YES | +| `onClick` | onClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | +| `onDoubleClick` | onDoubleClick | (eventParams: IOnClick)=>void | NO | ALL | YES | +| `panToMove` | allow to move picture with one finger | boolean | NO | ALL | YES | +| `pinchToZoom` | allow scale with two fingers | boolean | NO | ALL | YES | +| `enableDoubleClickZoom` | allow double-click to enlarge | boolean | NO | ALL | YES | +| `clickDistance` | how many finger movement can also trigger `onClick` | number | NO | ALL | YES | +| `horizontalOuterRangeOffset` | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | (offsetX?: number)=>void | NO | ALL | YES | +| `onDragLeft` | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>void | NO | \ | NO | +| `responderRelease` | let go but do not cancel | (vx: number)=>void | NO | ALL | YES | +| `maxOverflow` | maximum sliding threshold | number | NO | ALL | YES | +| `longPressTime` | long press threshold | number | NO | ALL | YES | +| `onLongPress` | on longPress | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | +| `doubleClickInterval ` | time allocated for second click to be considered as doublClick event | number | NO | ALL | YES | +| `onMove` | reports movement position data (helpful to build overlays) | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | NO | ALL | YES | +| `centerOn` | if given this will cause the map to pan and zoom to the desired location | { x: number, y: number, scale: number, duration: number } | NO | ALL | YES | +| `enableSwipeDown` | for enabling vertical movement if user doesn't want it | boolean | NO | ALL | YES | +| `enableCenterFocus` | for disabling focus on image center if user doesn't want it | boolean | NO | ALL | YES | +| `onSwipeDown` | function that fires when user swipes down | () => void | NO | ALL | YES | +| `swipeDownThreshold` | threshold for firing swipe down function | number | NO | ALL | YES | +| `minScale` | minimum zoom scale | number | NO | ALL | YES | +| `maxScale` | maximum zoom scale | number | NO | ALL | YES | +| `useNativeDriver` | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | NO | ALL | YES | +| `onStartShouldSetPanResponder` | Override onStartShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | +| `onMoveShouldSetPanResponder` | Override onMoveShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | +| `onPanResponderTerminationRequest` | Override onPanResponderTerminationRequest behavior | () => boolean | NO | ALL | YES | +| `useHardwareTextureAndroid` | for disabling rendering to hardware texture on Android | boolean | NO | Android | NO | + +## Known Issues - [x] 双指缩放在 harmony 框架侧不支持使用 [issues#1](https://github.com/react-native-oh-library/react-native-image-zoom/issues/1) -- [x] 长按图片后，rn 框架图片拖拽属性导致程序崩溃 [issues#2](https://github.com/react-native-oh-library/react-native-image-zoom/issues/2) +- [x] 长按图片后，rn 框架图片拖拽 Properties 导致程序崩溃 [issues#2](https://github.com/react-native-oh-library/react-native-image-zoom/issues/2) - [x] onPanResponderTerminationRequest 方法，harmony 端与 android 端表现不一致 [issues#3](https://github.com/react-native-oh-library/react-native-image-zoom/issues/3) - -## 其他 +## Others - 下滑图片，然后双击放大，再次下滑表现异常，已在源库基础上修改[上库地址](https://github.com/react-native-oh-library/react-native-image-zoom)，源库已被存档，不能新建 issue，特此记录 - onDragLeft 此回调函数源码未实现，详见:[issues#103](https://github.com/ascoders/react-native-image-zoom/issues/103) -- useHardwareTextureAndroid 此属性仅 Android 生效 +- useHardwareTextureAndroid 此 Properties 仅 Android 生效 -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/ascoders/react-native-image-zoom/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/ascoders/react-native-image-zoom/blob/master/LICENSE). diff --git a/en/react-native-image-viewing.md b/en/react-native-image-viewing.md index 852be281..7667f9c8 100644 --- a/en/react-native-image-viewing.md +++ b/en/react-native-image-viewing.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-image-viewing

@@ -12,20 +12,19 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-viewing) -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewing) +## 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-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: #### npm @@ -186,46 +185,46 @@ const styles = StyleSheet.create({ ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | Platform | Required | HarmonyOS Support | -| ---------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- | -------- | ----------------- | -| images | Array of images to display | ImageSource[] | All | Yes | Yes | -| keyExtractor | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | All | No | Yes | -| imageIndex | Current index of image to display | number | All | Yes | Yes | -| visible | Is modal shown or not | boolean | All | No | Yes | -| onRequestClose | Function called to close the modal | function | All | Yes | Yes | -| onImageIndexChange | Function called when image index has been changed | function | All | No | Yes | -| onLongPress | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | All | No | Yes | -| delayLongPress | Delay in ms, before onLongPress is called: default | number | All | No | Yes | -| animationType | Animation modal presented with: default | none, fade, slide | All | No | Yes | +| Name | Description | Type | Platform | Required | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- | -------- | ----------------- | +| images | Array of images to display | ImageSource[] | All | Yes | Yes | +| keyExtractor | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | All | No | Yes | +| imageIndex | Current index of image to display | number | All | Yes | Yes | +| visible | Is modal shown or not | boolean | All | No | Yes | +| onRequestClose | Function called to close the modal | function | All | Yes | Yes | +| onImageIndexChange | Function called when image index has been changed | function | All | No | Yes | +| onLongPress | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | All | No | Yes | +| delayLongPress | Delay in ms, before onLongPress is called: default | number | All | No | Yes | +| animationType | Animation modal presented with: default | none, fade, slide | All | No | Yes | | presentationStyle | Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar | fullScreen, pageSheet, formSheet, overFullScreen | All | No | Yes | -| backgroundColor | Background color of the modal in HEX | string | All | No | Yes | -| swipeToCloseEnabled | Close modal with swipe up or down: default | boolean | All | No | No | -| doubleTapToZoomEnabled | Zoom image by double tap on it: default | boolean | All | No | No | -| HeaderComponent | Header component, gets current imageIndex as a prop | component, function | All | No | Yes | -| FooterComponent | Footer component, gets current imageIndex as a prop | component, function | All | No | Yes | +| backgroundColor | Background color of the modal in HEX | string | All | No | Yes | +| swipeToCloseEnabled | Close modal with swipe up or down: default | boolean | All | No | No | +| doubleTapToZoomEnabled | Zoom image by double tap on it: default | boolean | All | No | No | +| HeaderComponent | Header component, gets current imageIndex as a prop | component, function | All | No | Yes | +| FooterComponent | Footer component, gets current imageIndex as a prop | component, function | All | No | Yes | -## 遗留问题 +## Known Issues -- [x] 组件上下滑动关闭暂未实现，由于 scrollView的naticeEvent.velocity属性HarmonyOS暂不支持 [issue#6](https://github.com/react-native-oh-library/react-native-image-viewing/issues/6) -- [x] 组件双击放大方法暂未实现，由于doubleTapToZoomEnabled属性HarmonyOS暂不支持 [issue#7](https://github.com/react-native-oh-library/react-native-image-viewing/issues/7) -- [x] 组件animationType淡入淡出效果暂未实现，由于modal组件未适配 [issue#8](https://github.com/react-native-oh-library/react-native-image-viewing/issues/8) +- [x] 组件上下滑动关闭暂未实现，由于 scrollView 的 naticeEvent.velocityPropertiesHarmonyOS 暂不支持 [issue#6](https://github.com/react-native-oh-library/react-native-image-viewing/issues/6) +- [x] 组件双击放大方法暂未实现，由于 doubleTapToZoomEnabledPropertiesHarmonyOS 暂不支持 [issue#7](https://github.com/react-native-oh-library/react-native-image-viewing/issues/7) +- [x] 组件 animationType 淡入淡出效果暂未实现，由于 modal 组件未适配 [issue#8](https://github.com/react-native-oh-library/react-native-image-viewing/issues/8) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/jobtoday/react-native-image-viewing/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/jobtoday/react-native-image-viewing/blob/master/LICENSE). diff --git a/en/react-native-keyboard-accessory.md b/en/react-native-keyboard-accessory.md index 9402236d..d811f4d8 100644 --- a/en/react-native-keyboard-accessory.md +++ b/en/react-native-keyboard-accessory.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-keyboard-accessory

@@ -13,15 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-accessory) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-keyboard-accessory) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-accessory Releases](https://github.com/react-native-oh-library/react-native-keyboard-accessory/releases)，并下载适用版本的 tgz 包。 +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-keyboard-accessory Releases](https://github.com/react-native-oh-library/react-native-keyboard-accessory/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径。 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#).。 #### **npm** @@ -35,9 +35,9 @@ npm install @react-native-oh-tpl/react-native-keyboard-accessory@file:# yarn add @react-native-oh-tpl/react-native-keyboard-accessory@file:# ``` -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React, { Component } from "react"; @@ -46,17 +46,18 @@ import { KeyboardAccessoryView } from "react-native-keyboard-accessory"; class ViewExample extends Component { state = { - text: '', + text: "", }; render() { - const { text } = this.state; + const { text } = this.state; return ( - + {({ isKeyboardVisible }) => ( @@ -65,8 +66,8 @@ class ViewExample extends Component { placeholder="Write your message" underlineColorAndroid="transparent" style={styles.textInput} - value={text} - onChangeText={text => this.setState({ text })} + value={text} + onChangeText={(text) => this.setState({ text })} multiline={true} /> {isKeyboardVisible && ( @@ -112,9 +113,9 @@ const styles = StyleSheet.create({ margin: 20, paddingVertical: 10, paddingHorizontal: 20, - borderColor: 'gray', + borderColor: "gray", borderWidth: 1, - backgroundColor: '#FFF', + backgroundColor: "#FFF", }, textInputButton: { flexShrink: 1, @@ -124,86 +125,86 @@ const styles = StyleSheet.create({ export default ViewExample; ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-accessory Releases](https://github.com/react-native-oh-library/react-native-keyboard-accessory/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-keyboard-accessory Releases](https://github.com/react-native-oh-library/react-native-keyboard-accessory/releases) -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. -### KeyboardAccessoryView属性 +### KeyboardAccessoryViewProperties -用于在键盘上方显示一个自定义的工具栏或附加内容，允许用户在输入内容时操作工具栏中的按钮或其他控件 +用于在键盘上方显示一个自定义的工具栏或附加内容，允许用户在输入内容时操作工具栏中的按钮或 Others 控件 -| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | -| --------------------- | ------------------------------------------------------------ | ---------------------- | -------- | ----------- | ----------- | ----------------- | -| `style` | Style `object` or `StyleSheet` reference which will be applied to Accessory `View` | `object` | no | `null` | iOS/Android | yes | -| `animateOn` | Enables show/hide animation on given platform. Values: `['ios', 'android', 'all', 'none','harmony']`. | `enum:string` | no | `ios` | iOS/Android | yes | +| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | +| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- | ----------- | ----------- | ----------------- | +| `style` | Style `object` or `StyleSheet` reference which will be applied to Accessory `View` | `object` | no | `null` | iOS/Android | yes | +| `animateOn` | Enables show/hide animation on given platform. Values: `['ios', 'android', 'all', 'none','harmony']`. | `enum:string` | no | `ios` | iOS/Android | yes | | `animationConfig` | For passing custom animations to show/hide. If given prop is function, `duration` and `easing` parameters from `Keyboard` event will be passed to the function, function should return `LayoutAnimation` compatible animation config. Or you can directly pass animation config object. | `function` or `object` | no | `null` | iOS/Android | yes | -| `alwaysVisible` | When set to `true` Accessory View will be always visible at the bottom of the screen. Good for sticky `TextInput`'s | `boolean` | no | `false` | iOS/Android | yes | -| `bumperHeight` | Bumper height to prevent visual glitches if animation couldn't keep up with the keyboard animation. | `number` | no | 15 | iOS/Android | yes | -| `visibleOpacity` | Opacity of the Accessory when it is visible. *Note:* Opacity is used for hiding the accessory to prevent render delays. | `number` | no | 1 | iOS/Android | yes | -| `heightProperty` | Control how the component manages its height. The component listens for children changes and automatically adjusts its height, so `height` is usually sufficient. For use with a multiline, autogrowing `TextInput`, `minHeight` is recommended. Values: `['height', 'minHeight']` | `enum:string` | no | `height` | iOS/Android | yes | -| `hiddenOpacity` | Opacity of the Accessory when it is hidden. | `number` | no | 0 | iOS/Android | yes | -| `hideBorder` | Set true if you want to hide top border of the Accessory | `boolean` | no | false | iOS/Android | yes | -| `inSafeAreaView` | Set true if you want to adapt SafeAreaView on iPhone X | `boolean` | no | false | iOS | no | -| `androidAdjustResize` | Set true in ejected apps to adjust resize | `boolean` | no | false | Android | no | -| `avoidKeyboard` | Set true if you want accessory to maintain KeyboardAvoidingView behavior. You shouldn't use any other Keyboard Avoiding library when you set this to `true` | `boolean` | no | false | iOS/Android | yes | - -### KeyboardAccessoryNavigation属性 +| `alwaysVisible` | When set to `true` Accessory View will be always visible at the bottom of the screen. Good for sticky `TextInput`'s | `boolean` | no | `false` | iOS/Android | yes | +| `bumperHeight` | Bumper height to prevent visual glitches if animation couldn't keep up with the keyboard animation. | `number` | no | 15 | iOS/Android | yes | +| `visibleOpacity` | Opacity of the Accessory when it is visible. _Note:_ Opacity is used for hiding the accessory to prevent render delays. | `number` | no | 1 | iOS/Android | yes | +| `heightProperty` | Control how the component manages its height. The component listens for children changes and automatically adjusts its height, so `height` is usually sufficient. For use with a multiline, autogrowing `TextInput`, `minHeight` is recommended. Values: `['height', 'minHeight']` | `enum:string` | no | `height` | iOS/Android | yes | +| `hiddenOpacity` | Opacity of the Accessory when it is hidden. | `number` | no | 0 | iOS/Android | yes | +| `hideBorder` | Set true if you want to hide top border of the Accessory | `boolean` | no | false | iOS/Android | yes | +| `inSafeAreaView` | Set true if you want to adapt SafeAreaView on iPhone X | `boolean` | no | false | iOS | no | +| `androidAdjustResize` | Set true in ejected apps to adjust resize | `boolean` | no | false | Android | no | +| `avoidKeyboard` | Set true if you want accessory to maintain KeyboardAvoidingView behavior. You shouldn't use any other Keyboard Avoiding library when you set this to `true` | `boolean` | no | false | iOS/Android | yes | + +### KeyboardAccessoryNavigationProperties 用于处理键盘导航的组件 -| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | -| ------------------------- | ------------------------------------------------------------ | ------------- | -------- | ---------------------------------------- | ----------- | ----------------- | -| `doneButtonTitle` | Title text to show on the right Button of Navigation View | `string` | no | `'Done'` | iOS/Android | yes | -| `tintColor` | Tint color for the arrows and done button | `string` | no | `'#007AFF'` | iOS/Android | yes | -| `doneButton` | Replace default Done Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | -| `nextButton` | Replace default Next Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | -| `previousButton` | Replace default Previous Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | -| `doneDisabled` | Disables Done Button | `boolean` | no | false | no | no | -| `nextDisabled` | Disables Next Button | `boolean` | no | false | iOS/Android | yes | -| `previousDisabled` | Disables Previous Button | `boolean` | no | false | iOS/Android | yes | -| `doneHidden` | Hides Done Button | `boolean` | no | false | no | no | -| `nextHidden` | Hides Next Button | `boolean` | no | false | iOS/Android | yes | -| `previousHidden` | Hides Previous Button | `boolean` | no | false | iOS/Android | yes | +| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------------------------------------ | ------------- | -------- | ---------------------------------------- | ----------- | ----------------- | +| `doneButtonTitle` | Title text to show on the right Button of Navigation View | `string` | no | `'Done'` | iOS/Android | yes | +| `tintColor` | Tint color for the arrows and done button | `string` | no | `'#007AFF'` | iOS/Android | yes | +| `doneButton` | Replace default Done Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | +| `nextButton` | Replace default Next Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | +| `previousButton` | Replace default Previous Button. Non-Touchable node should be provided. | `node` | no | `null` | iOS/Android | yes | +| `doneDisabled` | Disables Done Button | `boolean` | no | false | no | no | +| `nextDisabled` | Disables Next Button | `boolean` | no | false | iOS/Android | yes | +| `previousDisabled` | Disables Previous Button | `boolean` | no | false | iOS/Android | yes | +| `doneHidden` | Hides Done Button | `boolean` | no | false | no | no | +| `nextHidden` | Hides Next Button | `boolean` | no | false | iOS/Android | yes | +| `previousHidden` | Hides Previous Button | `boolean` | no | false | iOS/Android | yes | | `accessoryStyle` | Style object or StyleSheet reference which will be applied to Navigation Accessory `View`. | `object` | no | null | iOS/Android | yes | -| `doneButtonStyle` | Style object or StyleSheet reference which will be applied to Done Button `View` | `object` | no | null | iOS/Android | yes | -| `doneButtonTitleStyle` | Style object or StyleSheet reference which will be applied to Done Button `Text` | `object` | no | null | iOS/Android | yes | -| `doneButtonHitslop` | This defines how far your touch can start away from the doneButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | -| `previousButtonStyle` | Style object or StyleSheet reference which will be applied to Previous Button `View` | `object` | no | 0 | iOS/Android | yes | -| `nextButtonStyle` | Style object or StyleSheet reference which will be applied to Next Button `View` | `object` | no | 0 | iOS/Android | yes | -| `nextButtonDirection` | Arrow direction for the Next Button. Values: `['down', 'up', 'right', 'left']`. | `enum:string` | no | `'down'` | iOS/Android | yes | -| `nextButtonHitslop` | This defines how far your touch can start away from the nextButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | -| `previousButtonDirection` | Arrow direction for the Previous Button. Values: `['down', 'up', 'right', 'left']`. | `enum:string` | no | `'up'` | iOS/Android | yes | -| `previousButtonHitslop` | This defines how far your touch can start away from the previousButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | -| `onDone` | Triggered on Done Button `press` | `function` | no | null | iOS/Android | yes | -| `onNext` | Triggered on Next Button `press` | `function` | no | null | iOS/Android | yes | -| `onPrevious` | Triggered on Previous Button `press` | `function` | no | null | iOS/Android | yes | - -### KeyboardAwareTabBarComponent属性 - -| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | -| ----------------- | ------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------- | ----------------- | +| `doneButtonStyle` | Style object or StyleSheet reference which will be applied to Done Button `View` | `object` | no | null | iOS/Android | yes | +| `doneButtonTitleStyle` | Style object or StyleSheet reference which will be applied to Done Button `Text` | `object` | no | null | iOS/Android | yes | +| `doneButtonHitslop` | This defines how far your touch can start away from the doneButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | +| `previousButtonStyle` | Style object or StyleSheet reference which will be applied to Previous Button `View` | `object` | no | 0 | iOS/Android | yes | +| `nextButtonStyle` | Style object or StyleSheet reference which will be applied to Next Button `View` | `object` | no | 0 | iOS/Android | yes | +| `nextButtonDirection` | Arrow direction for the Next Button. Values: `['down', 'up', 'right', 'left']`. | `enum:string` | no | `'down'` | iOS/Android | yes | +| `nextButtonHitslop` | This defines how far your touch can start away from the nextButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | +| `previousButtonDirection` | Arrow direction for the Previous Button. Values: `['down', 'up', 'right', 'left']`. | `enum:string` | no | `'up'` | iOS/Android | yes | +| `previousButtonHitslop` | This defines how far your touch can start away from the previousButton | `Insets` | no | { left: 0, top: 0, right: 0, bottom: 0 } | iOS/Android | yes | +| `onDone` | Triggered on Done Button `press` | `function` | no | null | iOS/Android | yes | +| `onNext` | Triggered on Next Button `press` | `function` | no | null | iOS/Android | yes | +| `onPrevious` | Triggered on Previous Button `press` | `function` | no | null | iOS/Android | yes | + +### KeyboardAwareTabBarComponentProperties + +| Name | **Description** | **Type** | Required | **Default** | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------- | ----------------- | | `TabBarComponent` | Provide TabBarComponent to render. Usually from `react-navigation` | `node`, `function` | no | | iOS/Android | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -- inSafeAreaView 是专为适配ios的刘海和底部横条布局设计的，HarmonyOS没有此类问题，只支持默认设置false。 +- inSafeAreaView 是专为适配 ios 的刘海和底部横条布局设计的，HarmonyOS 没有此类问题，只支持默认设置 false。 -- androidAdjustResize 是为适配安卓键盘弹出时窗口的布局，HarmonyOS键盘弹出没有该问题，无需设置该属性。 +- androidAdjustResize 是为适配安卓键盘弹出时窗口的布局，HarmonyOS 键盘弹出没有该问题，无需设置该 Properties。 -- doneDisabled和doneHidden属性在iOS,Android不生效，HarmonyOS与其表现一致: [issue#99](https://github.com/ardaogulcan/react-native-keyboard-accessory/issues/99) +- doneDisabled 和 doneHiddenProperties 在 iOS,Android 不生效，HarmonyOS 与其表现一致: [issue#99](https://github.com/ardaogulcan/react-native-keyboard-accessory/issues/99) -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/ardaogulcan/react-native-keyboard-accessory/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/ardaogulcan/react-native-keyboard-accessory/blob/master/LICENSE). diff --git a/en/react-native-keys.md b/en/react-native-keys.md index 8465074f..7e764d8c 100644 --- a/en/react-native-keys.md +++ b/en/react-native-keys.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-keys

@@ -12,21 +12,19 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-keys) +## Installation and Usage -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keys) +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-library/react-native-keys Releases](https://github.com/react-native-oh-library/react-native-keys/releases). -## 安装与使用 +Go to the project directory and execute the following instruction: -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-keys Releases](https://github.com/react-native-oh-library/react-native-keys/releases)，并下载适用版本的 tgz 包。 - -进入到工程目录并输入以下命令： - ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). -#### npm +#### npm ```bash npm install @react-native-oh-tpl/react-native-keys@file:# @@ -40,12 +38,12 @@ yarn add @react-native-oh-tpl/react-native-keys@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. 1. Create a new file keys.development.json in the root of your React Native app and add Envs in secure object for protected envs variables and add Envs in public for public usage this: - + ```json { "secure": { @@ -59,30 +57,28 @@ yarn add @react-native-oh-tpl/react-native-keys@file:# "PACKAGE_ID": "com.example.rnkeys.dev" } } - ``` 2. Use Public Keys & Secure Keys -``` js -import Keys from 'react-native-keys'; +```js +import Keys from "react-native-keys"; Keys.API_URL; Keys.URI_SCHEME; -Keys.secureFor('API_TOKEN'); -Keys.secureFor('GOOGLE_API_KEY'); -Keys.secureFor('SECRET_KEY'); - +Keys.secureFor("API_TOKEN"); +Keys.secureFor("GOOGLE_API_KEY"); +Keys.secureFor("SECRET_KEY"); ``` ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 在工程根目录的 `oh-package.json` 添加 overrides字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -93,18 +89,15 @@ Keys.secureFor('SECRET_KEY'); } ``` -### 2.引入原生端代码 - -目前有两种方法： +### 2. Introducing Native Code -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Currently, two methods are available: -方法一：通过 har 包引入 (推荐) +Method 1 (recommended): Use the HAR file. (推荐) -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -113,22 +106,22 @@ Keys.secureFor('SECRET_KEY'); } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.配置 CMakeLists 和引入 RNOHKeysPackage +### 3. Configuring CMakeLists and Introducing RNOHKeysPackage -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff project(rnapp) @@ -166,7 +159,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_END: manual_package_linking_2 ``` -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: ```diff #include "RNOH/PackageProvider.h" @@ -185,9 +178,9 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 RNKeysPackage +### 4. Introducing RNKeysPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -201,56 +194,53 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.在 DevEco 创建运行前script（生成加解密代码和编译配置文件） +### 5.在 DevEco 创建 Running 前 script（生成加解密代码和编译配置文件） -> [!TIP] 如下步骤中添加配置完成时记得点击Apply按钮让配置生效 +> [!TIP] 如下步骤中添加配置完成时记得点击 Apply 按钮让配置生效 1. 点击右上角 entry -> Edit Configurations... 打开配置面板 -2. 点击面板左上角 + , 选择Shell Script, 打开新建 script的配置面板, 按如下图片提示进行配置 +2. 点击面板左上角 + , 选择 Shell Script, 打开新建 script 的配置面板, 按如下图片提示进行配置 ![shell script config](../img/rnkeys/RNKeys_Script_Config.PNG) -3. 配置entry -> Before Lunch，点击加号选择 Run Another Configuration， 选择上一步配置的 Shell Script, 并将配置拖动到Hvigor-Build Make上方 +3. 配置 entry -> Before Lunch，点击加号选择 Run Another Configuration， 选择上一步配置的 Shell Script, 并将配置拖动到 Hvigor-Build Make 上方 ![entry config](../img/rnkeys/entry_config.PNG) -### 6.运行 +### 6. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-keys Releases](https://github.com/react-native-oh-library/react-native-keys/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-keys Releases](https://github.com/react-native-oh-library/react-native-keys/releases) - ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | -|-----------------|----------------------|----------|----------|-------------|-------------------| +| --------------- | -------------------- | -------- | -------- | ----------- | ----------------- | | Keys attributes | Get public value | object | no | iOS/Android | yes | | Keys.publicKeys | Get all public value | function | no | iOS/Android | yes | | Keys.secureFor | Get secret value | function | no | iOS/Android | yes | +## Known Issues -## 遗留问题 - -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/numandev1/react-native-keys/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/numandev1/react-native-keys/blob/main/LICENSE). diff --git a/en/react-native-loading-spinner-overlay.md b/en/react-native-loading-spinner-overlay.md index 4dbf5b0f..807bd4ad 100644 --- a/en/react-native-loading-spinner-overlay.md +++ b/en/react-native-loading-spinner-overlay.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-loading-spinner-overlay

@@ -14,11 +14,11 @@

-> [!TIP] [Github 地址](https://github.com/ladjs/react-native-loading-spinner-overlay) +> [!TIP] [GitHub address](https://github.com/ladjs/react-native-loading-spinner-overlay) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -36,9 +36,9 @@ yarn add react-native-loading-spinner-overlay@3.0.1 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React, { Component } from "react"; @@ -47,76 +47,80 @@ import Spinner from "react-native-loading-spinner-overlay"; type Props = {}; export default class App extends Component { - state = { - spinner: false - }; - - componentDidMount() { - setInterval(() => { - this.setState({ - spinner: !this.state.spinner - }); - }, 3000); - } - - render() { - return ( - - - - ); - } + state = { + spinner: false, + }; + + componentDidMount() { + setInterval(() => { + this.setState({ + spinner: !this.state.spinner, + }); + }, 3000); + } + + render() { + return ( + + + + ); + } } const styles = StyleSheet.create({ - spinnerTextStyle: { - color: "#FFF" - }, - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF" - } + spinnerTextStyle: { + color: "#FFF", + }, + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", + }, }); ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | Default | Required | Platform | HarmonyOS Support | -| --- | --- | --- | --- | --- | --- | --- | -| cancelable | If set to false, it will prevent spinner from hiding when pressing the hardware back button. If set to true, it will allow spinner to hide if the hardware back button is pressed. | Boolean | `false` | no | Android | yes | -| color | Changes the spinner's color (example values are `red`, `#ff0000`, etc). For adjusting the contrast see `overlayColor` prop below. | String | `"white"` | no | All | yes | -| animation | Changes animation on show and hide spinner's view. | String (enum) `none`, `slide`, `fade` | `"none"` | no | All | yes | -| overlayColor | Changes the color of the overlay. | String | `rgba(0, 0, 0, 0.25)` | no | All | yes | -| size | Sets the spinner's size. No other cross-platform sizes are supported right now. | String (enum) `small`, `normal`, `large` | `"large"` | no | All | yes | -| textContent | Optional text field to be shown. | String | `""` | no | All | yes | -| textStyle | The style to be applied to the `` that displays the `textContent`. | StyleSheet | `-` | no | All | yes | -| visible | Controls the visibility of the spinner. | Boolean | `false` | yes | All | yes | -| indicatorStyle | Additional styles for the [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator) to inherit | StyleSheet | `undefined` | no | All | yes | -| customIndicator | An alternative, custom component to use instead of the default `` | Element | `undefined` | no | All | yes | -| children | Children element(s) to nest inside the spinner | Element | `undefined` | no | All | yes | +| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------- | -------- | -------- | ----------------- | +| cancelable | If set to false, it will prevent spinner from hiding when pressing the hardware back button. If set to true, it will allow spinner to hide if the hardware back button is pressed. | Boolean | `false` | no | Android | yes | +| color | Changes the spinner's color (example values are `red`, `#ff0000`, etc). For adjusting the contrast see `overlayColor` prop below. | String | `"white"` | no | All | yes | +| animation | Changes animation on show and hide spinner's view. | String (enum) `none`, `slide`, `fade` | `"none"` | no | All | yes | +| overlayColor | Changes the color of the overlay. | String | `rgba(0, 0, 0, 0.25)` | no | All | yes | +| size | Sets the spinner's size. No other cross-platform sizes are supported right now. | String (enum) `small`, `normal`, `large` | `"large"` | no | All | yes | +| textContent | Optional text field to be shown. | String | `""` | no | All | yes | +| textStyle | The style to be applied to the `` that displays the `textContent`. | StyleSheet | `-` | no | All | yes | +| visible | Controls the visibility of the spinner. | Boolean | `false` | yes | All | yes | +| indicatorStyle | Additional styles for the [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator) to inherit | StyleSheet | `undefined` | no | All | yes | +| customIndicator | An alternative, custom component to use instead of the default `` | Element | `undefined` | no | All | yes | +| children | Children element(s) to nest inside the spinner | Element | `undefined` | no | All | yes | -## 遗留问题 +## Known Issues -- [ ] 在RNOH框架中引入RN组件`Modal`和`ActivityIndicator`嵌套使用(`ActivityIndicator`作为`Modal`的 children)时会出现`ActivityIndicator`无法正常运作，导致当前库也无法在HarmonyOS中正常运行。 +- [ ] 在 RNOH 框架中引入 RN 组件`Modal`和`ActivityIndicator`嵌套使用(`ActivityIndicator`作为`Modal`的 children)时会出现`ActivityIndicator`无法正常运作，导致当前库也无法在 HarmonyOS 中正常 Running。 -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/ladjs/react-native-loading-spinner-overlay/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/ladjs/react-native-loading-spinner-overlay/blob/master/LICENSE). diff --git a/en/react-native-mail.md b/en/react-native-mail.md index 60d221eb..88b9aae3 100644 --- a/en/react-native-mail.md +++ b/en/react-native-mail.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-mail

@@ -14,15 +14,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-mail) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-mail) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-mail Releases](https://github.com/react-native-oh-library/react-native-mail/releases)，并下载适用版本的 tgz 包 +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-mail Releases](https://github.com/react-native-oh-library/react-native-mail/releases)，并下载适用版本的 tgz 包 -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -40,9 +40,9 @@ yarn add @react-native-oh-tpl/react-native-mail@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```jsx import React, { Component } from "react"; @@ -107,17 +107,17 @@ export default class App extends Component { } ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +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 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -128,18 +128,15 @@ export default class App extends Component { } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -148,22 +145,22 @@ export default class App extends Component { } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNMailPackage +### 3. Introducing RNMailPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -177,32 +174,32 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-mail Releases](https://github.com/react-native-oh-library/react-native-mail/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-mail Releases](https://github.com/react-native-oh-library/react-native-mail/releases) ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ---- | ---------------------------------------------------------------------------------- | -------------------------- | -------- | -------- | ----------------- | @@ -221,14 +218,14 @@ ohpm install | isHTML | 邮件内容是否为 html | boolean | no | all | yes | | attachments | 附件信息 | object[] | no | all | no | -## 遗留问题 +## Known Issues - [ ] 不支持 attachments 附件传递: [issue#1](https://github.com/react-native-oh-library/react-native-mail/issues/1) - [ ] 不支持 customChooserTitle: [issue#4](https://github.com/react-native-oh-library/react-native-mail/issues/4) - [x] 邮箱应用上 body 显示异常: [issue#2](https://github.com/react-native-oh-library/react-native-mail/issues/2) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/chirag04/react-native-mail/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/chirag04/react-native-mail/blob/master/LICENSE). diff --git a/en/react-native-maps-directions.md b/en/react-native-maps-directions.md index 404346a0..a5bb22d2 100644 --- a/en/react-native-maps-directions.md +++ b/en/react-native-maps-directions.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-maps-directions

@@ -13,15 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-maps-directions) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-maps-directions) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-maps-directions Releases](https://github.com/react-native-oh-library/react-native-maps-directions/releases)，并下载适用版本的 tgz 包。 +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-maps-directions Releases](https://github.com/react-native-oh-library/react-native-maps-directions/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). #### **npm** @@ -35,23 +35,23 @@ npm install @react-native-oh-tpl/react-native-maps-directions@file:# yarn add @react-native-oh-tpl/react-native-maps-directions@file:# ``` -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { Component } from 'react'; -import { Dimensions, StyleSheet, View, Text } from 'react-native'; -import MapViewDirections from 'react-native-maps-directions'; +import React, { Component } from "react"; +import { Dimensions, StyleSheet, View, Text } from "react-native"; +import MapViewDirections from "react-native-maps-directions"; import MapView, { Marker } from "react-native-maps"; -const { width, height } = Dimensions.get('window'); +const { width, height } = Dimensions.get("window"); const ASPECT_RATIO = width / height; const LATITUDE = 37.771707; const LONGITUDE = -122.4053769; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; -const MAPS_APIKEY = 'xxxxxx'; +const MAPS_APIKEY = "xxxxxx"; class MapExample extends Component { constructor(props) { @@ -73,61 +73,62 @@ class MapExample extends Component { onMapPress = (e) => { this.setState({ - coordinates: [ - ...this.state.coordinates, - e.nativeEvent.coordinate, - ], + coordinates: [...this.state.coordinates, e.nativeEvent.coordinate], }); - } + }; render() { - const { coordinates} = this.state; + const { coordinates } = this.state; return ( - this.mapView = c} - onPress={this.onMapPress}> - - {this.state.coordinates.map((coordinate, index) => - - )} - {(this.state.coordinates.length >= 2) && ( - { - console.log(`Started routing between "${params.origin}" and "${params.destination}"`); - }} - onReady={result => { - console.log(`Distance: ${result.distance} km`) - console.log(`Duration: ${result.duration} min.`) - this.mapView.fitToCoordinates(result.coordinates, { - edgePadding: { - right: (width / 20), - bottom: (height / 20), - left: (width / 20), - top: (height / 20), - } - }); - }} - onError={(errorMessage) => { - console.log('GOT AN ERROR'); - }} - /> - )} - + (this.mapView = c)} + onPress={this.onMapPress} + > + {this.state.coordinates.map((coordinate, index) => ( + + ))} + {this.state.coordinates.length >= 2 && ( + { + console.log( + `Started routing between "${params.origin}" and "${params.destination}"` + ); + }} + onReady={(result) => { + console.log(`Distance: ${result.distance} km`); + console.log(`Duration: ${result.duration} min.`); + this.mapView.fitToCoordinates(result.coordinates, { + edgePadding: { + right: width / 20, + bottom: height / 20, + left: width / 20, + top: height / 20, + }, + }); + }} + onError={(errorMessage) => { + console.log("GOT AN ERROR"); + }} + /> + )} + ); } @@ -146,55 +147,54 @@ const styles = StyleSheet.create({ }); export default MapExample; - ``` ## Link -本库在HarmonyOS NEXT侧实现依赖@react-native-oh-tpl/react-native-maps 的原生端代码，如已在HarmonyOS NEXT工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库在 HarmonyOS NEXT 侧实现依赖@react-native-oh-tpl/react-native-maps 的原生端代码，如已在 HarmonyOS NEXT 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 如未引入请参照[@react-native-oh-tpl/react-native-maps 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-maps.md#link)进行引入 -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-maps-directions Releases](https://github.com/react-native-oh-library/react-native-maps-directions/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-maps-directions Releases](https://github.com/react-native-oh-library/react-native-maps-directions/releases) -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. > -> 由于渲染在屏幕上的结果是 `MapView.Polyline` 组件，因此也支持 `MapView.Polyline` 属性，`MapView.Polyline`属性参见[**react-native-maps**](/zh-cn/react-native-maps.md#polyline)。 - -| Name | **Description** | Type | Required | **Default** | Platform | HarmonyOS Support | -| ------------------------ | ------------------------------------------------------------ | ---------------------- | -------- | ----------- | ----------- | ----------------------------------------------------------- | -| `origin` | The origin location to start routing from. | LatLng` or `String | true | | iOS/Android | yes | -| destination | The destination location to start routing to. | LatLng` or `String | true | | iOS/Android | yes | -| apikey | Your Google Maps API Key or HUWEI Map API Key. HUWEI Map API Key see [here](https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/preparations-0000001185174404#section169441820428) | String | true | | iOS/Android | yes | -| waypoints | Array of waypoints to use between origin and destination. | [`LatLng` or `String`] | false | [] | iOS/Android | no | -| language | The language to use when calculating directions. See [here](https://developers.google.com/maps/documentation/javascript/localization) for more info. | String | false | en | iOS/Android | no | -| mode | Which transportation mode to use when calculating directions. Allowed values are `"DRIVING"`, `"BICYCLING"`, `"WALKING"`, and `"TRANSIT"`. | String | false | "DRIVING" | iOS/Android | partially (Support `"DRIVING"`, `"BICYCLING"`, `"WALKING"`) | -| resetOnChange | Tweak if the rendered `MapView.Polyline` should reset or not when calculating the route between `origin` and `destionation`. Set to `false` if you see the directions line glitching. | boolean | false | true | iOS/Android | yes | -| optimizeWaypoints | Set it to true if you would like Google Maps to re-order all the waypoints to optimize the route for the fastest route. Please be aware that if this option is enabled, you will be billed at a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints). | boolean | false | false | iOS/Android | no | +> 由于渲染在屏幕上的结果是 `MapView.Polyline` 组件，因此也支持 `MapView.Polyline` Properties，`MapView.Polyline`Properties 参见[**react-native-maps**](/zh-cn/react-native-maps.md#polyline)。 + +| Name | **Description** | Type | Required | **Default** | Platform | HarmonyOS Support | +| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- | ----------- | ----------- | ----------------------------------------------------------- | +| `origin` | The origin location to start routing from. | LatLng`or`String | true | | iOS/Android | yes | +| destination | The destination location to start routing to. | LatLng`or`String | true | | iOS/Android | yes | +| apikey | Your Google Maps API Key or HUWEI Map API Key. HUWEI Map API Key see [here](https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/preparations-0000001185174404#section169441820428) | String | true | | iOS/Android | yes | +| waypoints | Array of waypoints to use between origin and destination. | [`LatLng` or `String`] | false | [] | iOS/Android | no | +| language | The language to use when calculating directions. See [here](https://developers.google.com/maps/documentation/javascript/localization) for more info. | String | false | en | iOS/Android | no | +| mode | Which transportation mode to use when calculating directions. Allowed values are `"DRIVING"`, `"BICYCLING"`, `"WALKING"`, and `"TRANSIT"`. | String | false | "DRIVING" | iOS/Android | partially (Support `"DRIVING"`, `"BICYCLING"`, `"WALKING"`) | +| resetOnChange | Tweak if the rendered `MapView.Polyline` should reset or not when calculating the route between `origin` and `destionation`. Set to `false` if you see the directions line glitching. | boolean | false | true | iOS/Android | yes | +| optimizeWaypoints | Set it to true if you would like Google Maps to re-order all the waypoints to optimize the route for the fastest route. Please be aware that if this option is enabled, you will be billed at a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints). | boolean | false | false | iOS/Android | no | | splitWaypoints | Directions API has a [limit](https://developers.google.com/maps/documentation/directions/usage-and-billing#directions-advanced) of 10 or 25 (depends on the billing plan) waypoints per route. When exceeding this limit you will be billed at a higher reate by Google. Set this to `true` if you would like to automatically split waypoints into multiple routes, thus bypassing this waypoints limit. | boolean | false | false | iOS/Android | no | -| directionsServiceBaseUrl | Base URL of the Directions Service (API) you are using. | string | false | (Google's) | iOS/Android | yes | -| region | If you are using strings for **origin** or **destination**, sometimes you will get an incorrect route because Google Maps API needs the region where this places belong to. See [here](https://developers.google.com/maps/documentation/javascript/localization#Region) for more info. | String | false | | iOS/Android | no | -| precision | The precision level of detail of the drawn polyline. Allowed values are "high", and "low". Setting to "low" will yield a polyline that is an approximate (smoothed) path of the resulting directions. Setting to "high" may cause a hit in performance in case a complex route is returned. | String | false | "low" | iOS/Android | no | -| timePrecision | The timePrecision to get Realtime traffic info. Allowed values are "none", and "now". Defaults to "none". | String | false | "none" | iOS/Android | no | -| channel | If you include the channel parameter in your requests, you can generate a Successful Requests report that shows a breakdown of your application's API requests across different applications that use the same client ID (such as externally facing access vs. internally facing access). | String | false | null | iOS/Android | no | +| directionsServiceBaseUrl | Base URL of the Directions Service (API) you are using. | string | false | (Google's) | iOS/Android | yes | +| region | If you are using strings for **origin** or **destination**, sometimes you will get an incorrect route because Google Maps API needs the region where this places belong to. See [here](https://developers.google.com/maps/documentation/javascript/localization#Region) for more info. | String | false | | iOS/Android | no | +| precision | The precision level of detail of the drawn polyline. Allowed values are "high", and "low". Setting to "low" will yield a polyline that is an approximate (smoothed) path of the resulting directions. Setting to "high" may cause a hit in performance in case a complex route is returned. | String | false | "low" | iOS/Android | no | +| timePrecision | The timePrecision to get Realtime traffic info. Allowed values are "none", and "now". Defaults to "none". | String | false | "none" | iOS/Android | no | +| channel | If you include the channel parameter in your requests, you can generate a Successful Requests report that shows a breakdown of your application's API requests across different applications that use the same client ID (such as externally facing access vs. internally facing access). | String | false | null | iOS/Android | no | ### 事件和返回 -| Event Name | **Description** | Type | Required | Platform | HarmonyOS Support | -| ---------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | -| `onStart` | Callback that is called when the routing has started. | Function | false | iOS/Android | yes | +| Event Name | **Description** | Type | Required | Platform | HarmonyOS Support | +| ---------- | --------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| `onStart` | Callback that is called when the routing has started. | Function | false | iOS/Android | yes | | `onReady` | Callback that is called when the routing has succesfully finished. note: distance returned in kilometers and duration in minutes. | Function | false | iOS/Android | yes | -| `onError` | Callback that is called in case the routing has failed. | Function | false | iOS/Android | yes | +| `onError` | Callback that is called in case the routing has failed. | Function | false | iOS/Android | yes | #### onStart @@ -202,8 +202,8 @@ export default MapExample; onStart(params:Object):void ``` -| Name | **Description** | Type | Required | Platform | HarmonyOS Support | -| ------ | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | +| Name | **Description** | Type | Required | Platform | HarmonyOS Support | +| ------ | ------------------------------------------------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | | params | 回调函数返回值，包含起点、终点和中间点的经纬度信息。数据格式为：{ origin, destination, waypoints: [] } | Object | True | iOS/Android | yes | #### onReady @@ -212,8 +212,8 @@ export default MapExample; onReady(result:Object):void ``` -| Name | **Description** | Type | Required | Platform | HarmonyOS Support | -| ------ | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | +| Name | **Description** | Type | Required | Platform | HarmonyOS Support | +| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | | result | 回调函数返回值，包含起点到终点的距离、路程时间、和途径路径的经纬度等信息。数据格式：{ distance: Number, duration: Number, coordinates: [], fare: Object, waypointOrder: [[]] } | Object | True | iOS/Android | yes | #### onError @@ -222,25 +222,25 @@ export default MapExample; onError(errorMessage:Object):void ``` -| Name | **Description** | Type | Required | Platform | HarmonyOS Support | -| ------------ | ------------------------------------------------- | ------ | -------- | ----------- | ----------------- | -| errorMessage | 回调函数返回值，访问directions rest api的报错信息 | Object | True | iOS/Android | yes | +| Name | **Description** | Type | Required | Platform | HarmonyOS Support | +| ------------ | --------------------------------------------------- | ------ | -------- | ----------- | ----------------- | +| errorMessage | 回调函数返回值，访问 directions rest api 的报错信息 | Object | True | iOS/Android | yes | -## 遗留问题 +## Known Issues -- [ ] waypoints属性不支持，不支持的原因是由于华为侧Directions API不支持中间点参数查询：[issue#13](https://github.com/react-native-oh-library/react-native-maps-directions/issues/13) -- [ ] language属性不支持，不支持的原因是由于华为侧Directions API只支持文字指引的语种和谷歌地图api的语言本地化本地化功能不一样：[issue#14](https://github.com/react-native-oh-library/react-native-maps-directions/issues/14) -- [ ] optimizeWaypoints属性不支持，不支持的原因是由于华为侧Directions API不支持中间点优化，获取更快路线：[issue#15](https://github.com/react-native-oh-library/react-native-maps-directions/issues/15) -- [ ] splitWaypoints属性不支持，不支持的原因是由于华为侧Directions API不支持将中间点个数设置，将其分割成多条路线：[issue#16](https://github.com/react-native-oh-library/react-native-maps-directions/issues/16) -- [ ] region属性不支持，不支持的原因是由于华为侧Directions API不支持地区代码和地点的映射：[issue#17](https://github.com/react-native-oh-library/react-native-maps-directions/issues/17) -- [ ] precision属性不支持，不支持的原因是由于华为侧Directions API不支持更精细的绘画路程线路：[issue#18](https://github.com/react-native-oh-library/react-native-maps-directions/issues/18) -- [ ] timePrecision属性不支持，不支持的原因是由于华为侧Directions API不支持实时查询路线：[issue#19](https://github.com/react-native-oh-library/react-native-maps-directions/issues/19) -- [ ] channel属性不支持，不支持的原因是由于华为侧Directions API不支持渠道查询：[issue#20](https://github.com/react-native-oh-library/react-native-maps-directions/issues/20) +- [ ] waypointsProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持中间点参数查询：[issue#13](https://github.com/react-native-oh-library/react-native-maps-directions/issues/13) +- [ ] languageProperties 不支持，不支持的原因是由于华为侧 Directions API 只支持文字指引的语种和谷歌地图 api 的语言本地化本地化功能不一样：[issue#14](https://github.com/react-native-oh-library/react-native-maps-directions/issues/14) +- [ ] optimizeWaypointsProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持中间点优化，获取更快路线：[issue#15](https://github.com/react-native-oh-library/react-native-maps-directions/issues/15) +- [ ] splitWaypointsProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持将中间点个数设置，将其分割成多条路线：[issue#16](https://github.com/react-native-oh-library/react-native-maps-directions/issues/16) +- [ ] regionProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持地区代码和地点的映射：[issue#17](https://github.com/react-native-oh-library/react-native-maps-directions/issues/17) +- [ ] precisionProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持更精细的绘画路程线路：[issue#18](https://github.com/react-native-oh-library/react-native-maps-directions/issues/18) +- [ ] timePrecisionProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持实时查询路线：[issue#19](https://github.com/react-native-oh-library/react-native-maps-directions/issues/19) +- [ ] channelProperties 不支持，不支持的原因是由于华为侧 Directions API 不支持渠道查询：[issue#20](https://github.com/react-native-oh-library/react-native-maps-directions/issues/20) -## 其他 +## Others -华为地图apikey申请参见[获取API key](https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/preparations-0000001185174404#section169441820428) +华为地图 apikey 申请参见[获取 API key](https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/preparations-0000001185174404#section169441820428) -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/bramus/react-native-maps-directions/blob/master/LICENSE.md) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/bramus/react-native-maps-directions/blob/master/LICENSE.md). diff --git a/en/react-native-markdown-renderer.md b/en/react-native-markdown-renderer.md index 57d9b4db..cb18503f 100644 --- a/en/react-native-markdown-renderer.md +++ b/en/react-native-markdown-renderer.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-markdown-renderer

@@ -12,15 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-markdown-renderer) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-markdown-renderer) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases)，并下载适用版本的 tgz 包。 +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-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -38,9 +38,9 @@ yarn add @react-native-oh-tpl/react-native-markdown-renderer@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import react from "react"; @@ -66,13 +66,13 @@ export default class Page extends PureComponent { } ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases)，并下载适用版本的 tgz 包。 +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-markdown-renderer Releases](https://github.com/react-native-oh-library/react-native-markdown-renderer/releases). ## Markdown 组件 @@ -81,13 +81,13 @@ export default class Page extends PureComponent { Markdown 组件核心功能就是支持 Markdowm 语法格式的渲染，语法格式为（说明:`copy`为符合 Markdown 语法的字符串）：`{copy}`。 说明：`copy`为组件支持的满足 Markdown 语法格式的字符串，具体支持的语法格式，详见：[Syntax Support](https://github.com/mientjan/react-native-markdown-renderer/blob/master/README.md) -### 组件属性 +### 组件 Properties Markdown 组件的 Props -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ---------- | ------------------------------------------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | @@ -97,11 +97,11 @@ Markdown 组件的 Props ## 库相关变量、封装类及工具函数 -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. -改库导出了一系列内部定义的常量、封装类及工具函数 +该库导出了一系列内部定义的常量、封装类及工具函数 ### 内部定义的常量 @@ -131,10 +131,10 @@ Markdown 组件的 Props | tokensToAST | 将 token 数组转换为 AST 抽象树（内部方法，不应直接调用） | function | yes | iOS/Android | yes | | blockPlugin | js 插件方法,用于提供对 Markdown 中 Blockquotes 语法的支持 | function | yes | iOS/Android | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/killserver/react-native-markdown-renderer/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/killserver/react-native-markdown-renderer/blob/main/LICENSE). diff --git a/en/react-native-masked-text.md b/en/react-native-masked-text.md index 4c6f3680..a7273235 100644 --- a/en/react-native-masked-text.md +++ b/en/react-native-masked-text.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-masked-text

@@ -14,9 +14,9 @@

-> [!TIP] [Github 地址](https://github.com/bhrott/react-native-masked-text) +> [!TIP] [GitHub address](https://github.com/bhrott/react-native-masked-text) -## 安装与使用 +## Installation and Usage @@ -34,7 +34,7 @@ yarn add react-native-masked-text@1.13.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```js import React, { useState } from "react"; @@ -75,19 +75,19 @@ const styles = StyleSheet.create({ }); ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-NEXT-DB1; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; -## 属性 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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-masked-text](https://github.com/bhrott/react-native-masked-text) @@ -160,9 +160,9 @@ const styles = StyleSheet.create({ ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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-masked-text](https://github.com/bhrott/react-native-masked-text) @@ -192,12 +192,12 @@ const styles = StyleSheet.create({ - `value` (String, required): the value to be masked - `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License](https://github.com/bhrott/react-native-masked-text/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License](https://github.com/bhrott/react-native-masked-text/blob/master/LICENSE). diff --git a/en/react-native-notifier.md b/en/react-native-notifier.md index 789d66f4..37f62cd8 100644 --- a/en/react-native-notifier.md +++ b/en/react-native-notifier.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-notifier

@@ -14,10 +14,10 @@

->[!TIP] [Github 地址](https://github.com/seniv/react-native-notifier) -## 安装与使用 +>[!TIP] [GitHub address](https://github.com/seniv/react-native-notifier) +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: #### **npm** @@ -33,7 +33,7 @@ yarn add react-native-notifier@2.0.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```js @@ -80,22 +80,22 @@ export const Notifier = () => { 本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/react-native-gesture-handler 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入 -## 约束与限制 -### 兼容性 +## Constraints +### Compatibility -本文档内容基于以下版本验证通过: +This document is verified based on the following versions: 1. RNOH: 0.72.28; SDK: HarmonyOS-NEXT-DB1 5.0.0.31; IDE: DevEco Studio 5.0.3.500; ROM: 3.0.0.25; -## 属性 +## Properties 详细请查看 [react-native-notifier 的文档介绍](https://github.com/seniv/react-native-notifier) Both `NotifierWrapper` and `NotifierRoot` receive the same props. -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -105,9 +105,9 @@ Both `NotifierWrapper` and `NotifierRoot` receive the same props. ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -177,10 +177,10 @@ All possible modes: | next | Put notification in the first place in the queue. Will be shown right after the current notification disappears. | immediate | Similar to next, but also it will hide currently displayed notification. -## 静态方法 -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +## Properties +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### `NotifierComponents.Notifications` Currently, there are 2 components out of the box. If none of them fits your needs, then you can easily create your [Custom Component]. @@ -213,14 +213,14 @@ Currently, there are 2 components out of the box. If none of them fits your need | componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes | componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes -## 遗留问题 +## Known Issues -- [ ] translucentStatusBar状态栏透明在HarmonyOS不支持,useRNScreensOverlay,rnScreensOverlayViewStyle两个属性依赖于react-native-screens，暂未适配harmonyOS +- [ ] translucentStatusBar状态栏透明在HarmonyOS不支持,useRNScreensOverlay,rnScreensOverlayViewStyle两个Properties依赖于react-native-screens，暂未适配harmonyOS -## 其他 +## Others -- omitGlobalMethodsHookup源库属性未生效 问题：[issues#102](https://github.com/seniv/react-native-notifier/issues/102) -## 开源协议 +- omitGlobalMethodsHookup源库Properties未生效 问题：[issues#102](https://github.com/seniv/react-native-notifier/issues/102) +## License -本项目基于 [The MIT License (MIT)](https://github.com/seniv/react-native-notifier/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/seniv/react-native-notifier/blob/main/LICENSE). \ No newline at end of file diff --git a/en/react-native-parsed-text.md b/en/react-native-parsed-text.md index d5e76114..6b036e75 100644 --- a/en/react-native-parsed-text.md +++ b/en/react-native-parsed-text.md @@ -1,6 +1,6 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-parsed-text

@@ -15,10 +15,9 @@

-> [!TIP] [Github 地址](https://github.com/taskrabbit/react-native-parsed-text) +> [!TIP] [GitHub address](https://github.com/taskrabbit/react-native-parsed-text) - -## 安装与使用 +## Installation and Usage @@ -36,13 +35,13 @@ yarn add react-native-parsed-text@0.0.22 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import {Tester, Filter} from '@rnoh/testerino'; -import React from 'react'; +import { Tester, Filter } from "@rnoh/testerino"; +import React from "react"; import { SafeAreaView, ScrollView, @@ -53,158 +52,166 @@ import { View, Button, Alert, - Linking -} from 'react-native'; -import ParsedText from 'react-native-parsed-text'; + Linking, +} from "react-native"; +import ParsedText from "react-native-parsed-text"; -export function TestNativeParsedText({ filter }: { filter: Filter }){ - - const handleUrlPress=(url, matchIndex /*: number*/)=>{ +export function TestNativeParsedText({ filter }: { filter: Filter }) { + const handleUrlPress = (url, matchIndex /*: number*/) => { Linking.openURL(url); - } + }; - const handlePhonePress=(phone, matchIndex /*: number*/)=> { + const handlePhonePress = (phone, matchIndex /*: number*/) => { Alert.alert(`${phone} has been pressed!`); - } + }; - const handleNamePress=(name, matchIndex /*: number*/)=> { + const handleNamePress = (name, matchIndex /*: number*/) => { Alert.alert(`Hello ${name}`); - } + }; - const handleEmailPress=(email, matchIndex /*: number*/)=> { + const handleEmailPress = (email, matchIndex /*: number*/) => { Alert.alert(`send email to ${email}`); - } - const handleIDPress=(name, matchIndex /*: number*/)=> { + }; + const handleIDPress = (name, matchIndex /*: number*/) => { Alert.alert(`Hello ${name}`); - } - const renderText=(matchingString, matches)=> { + }; + const renderText = (matchingString, matches) => { let pattern = /\[(@[^:]+):([^\]]+)\]/i; let match = matchingString.match(pattern); return `^^${match[0]}^^`; - } - - return ( - - - - - Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. - But you can also do more with this package, for example Bob will change style and David too. username like [@^^:^^] has been replaced. - And the magic number is 42! - #react #react-native - - - - - ); - + }; + + return ( + + + + + Hello this is an example of the ParsedText, links like + http://www.google.com or http://www.facebook.com are clickable and + phone number 444-555-6666 can call too. But you can also do more + with this package, for example Bob will change style and David too. + username like [@^^:^^] has been replaced. And the magic number is + 42! #react #react-native + + + + + ); } const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", }, - idnumber:{ - color: 'yellow' + idnumber: { + color: "yellow", }, url: { - color: 'red', - textDecorationLine: 'underline', + color: "red", + textDecorationLine: "underline", }, email: { - textDecorationLine: 'underline', + textDecorationLine: "underline", }, text: { - color: 'black', + color: "black", fontSize: 15, }, phone: { - color: 'blue', - textDecorationLine: 'underline', + color: "blue", + textDecorationLine: "underline", }, name: { - color: 'red', + color: "red", }, username: { - color: 'green', - fontWeight: 'bold' + color: "green", + fontWeight: "bold", }, magicNumber: { fontSize: 42, - color: 'pink', + color: "pink", }, hashTag: { - fontStyle: 'italic', - color:'green', - fontSize:42 + fontStyle: "italic", + color: "green", + fontSize: 42, }, - }); ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -在下述版本验证通过: +This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; 2. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：HYM-W5821 3.0.0.25; -## 属性 +## Properties -ParsedText组件接收所有[React Native Text](https://reactnative.dev/docs/text.html)组件的Props +ParsedText 组件接收所有[React Native Text](https://reactnative.dev/docs/text.html)组件的 Props -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| parse | Array of parsed text. | array | yes | IOS/Android | yes | -| renderText | Function called to change the displayed children. | function | yes | IOS/Android | yes | -| childrenProps | Properties to pass to the children elements generated by react-native-parsed-text. | object | no | IOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ---------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| parse | Array of parsed text. | array | yes | IOS/Android | yes | +| renderText | Function called to change the displayed children. | function | yes | IOS/Android | yes | +| childrenProps | Properties to pass to the children elements generated by react-native-parsed-text. | object | no | IOS/Android | yes | eg: parse: Array of parsed text. -* to use the predefined type: `{type: 'url'}、{type: 'phone'} or {type: 'email'}`. -* to use your own `RegExp`: `{pattern: /something/}` -* to change the style of the matched text your own `RegExp`: `{type: 'phone',style:styles.phoneStyle}` -* to add the onPress event(one of Text Props，and others are supported) of the matched text:`{type: 'url',onPress:this.handlePress}`. -* to add the onLongPress event(one of Text Props，and others are supported) of your own `RegExp` matched text:`{pattern: /something/,onLongPress:this.handleLongPress}`. -* to limit how many matches are found of your own `RegExp` matched text:`{pattern: /something/,nonExhaustiveModeMaxMatchCount:number}`. + +- to use the predefined type: `{type: 'url'}、{type: 'phone'} or {type: 'email'}`. +- to use your own `RegExp`: `{pattern: /something/}` +- to change the style of the matched text your own `RegExp`: `{type: 'phone',style:styles.phoneStyle}` +- to add the onPress event(one of Text Props，and others are supported) of the matched text:`{type: 'url',onPress:this.handlePress}`. +- to add the onLongPress event(one of Text Props，and others are supported) of your own `RegExp` matched text:`{pattern: /something/,onLongPress:this.handleLongPress}`. +- to limit how many matches are found of your own `RegExp` matched text:`{pattern: /something/,nonExhaustiveModeMaxMatchCount:number}`. renderText: Function called to change the displayed children. -Your str is ```'Mention [@michel:5455345]'``` where 5455345 is ID of this user and @michel the value to display on interface. -Your pattern for ID & username extraction : ```/\[(@[^:]+):([^\]]+)\]/i``` +Your str is `'Mention [@michel:5455345]'` where 5455345 is ID of this user and @michel the value to display on interface. +Your pattern for ID & username extraction : `/\[(@[^:]+):([^\]]+)\]/i` Your renderText method : + ``` renderText(matchingString, matches) { // matches => ["[@michel:5455345]", "@michel", "5455345"] @@ -213,14 +220,15 @@ renderText(matchingString, matches) { return `^^${match[1]}^^`; } ``` -Displayed text will be : ```Mention ^^@michel^^``` -## 遗留问题 +Displayed text will be : `Mention ^^@michel^^` + +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [TTHE MIT License (MIT)](https://github.com/taskrabbit/react-native-parsed-text/blob/master/LICENSE.txt) ，请自由地享受和参与开源。 +This project is licensed under [TTHE MIT License (MIT)](https://github.com/taskrabbit/react-native-parsed-text/blob/master/LICENSE.txt). - \ No newline at end of file + diff --git a/en/react-native-phone-number-input.md b/en/react-native-phone-number-input.md index 42f777fa..0af04544 100644 --- a/en/react-native-phone-number-input.md +++ b/en/react-native-phone-number-input.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-phone-number-input

@@ -12,9 +12,9 @@

-> [!TIP] [Github 地址](https://github.com/garganurag893/react-native-phone-number-input) +> [!TIP] [GitHub address](https://github.com/garganurag893/react-native-phone-number-input) -## 安装与使用 +## Installation and Usage @@ -32,9 +32,9 @@ yarn add react-native-phone-number-input@2.1.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React, { useState, useRef } from "react"; @@ -152,19 +152,19 @@ const styles = StyleSheet.create({ }); ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; -## 属性 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | @@ -192,11 +192,11 @@ const styles = StyleSheet.create({ | filterProps | filter the props | CountryFilterProps | no | Android iOS | yes | | countryPickerProps | the countryPicker Props | any | no | Android iOS | yes | -## 静态方法 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | @@ -205,12 +205,12 @@ const styles = StyleSheet.create({ | getNumberAfterPossiblyEliminatingZero | get the initial value and generated number. | () => {number: string , formattedNumber: string } | no | Android iOS | yes | | isValidNumber | Verifying whether a number is valid | (number: string)=>boolean | no | Android iOS | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -- 在 HarmonyOS NEXT 上，withDarkTheme 只能让国家选择器的主题色更改，无法更改键盘的颜色。因为 iOS 提供给开发者设置键盘深浅模式的选项，一旦开发者设置错误会导致输入法键盘和应用出现颜色错层，在 HarmonyOS NEXT 上输入法键盘做了自适应应用颜色模式的能力，故不需要再提供该属性。 +- 在 HarmonyOS NEXT 上，withDarkTheme 只能让国家选择器的主题色更改，无法更改键盘的颜色。因为 iOS 提供给开发者设置键盘深浅模式的选项，一旦开发者设置错误会导致输入法键盘和应用出现颜色错层，在 HarmonyOS NEXT 上输入法键盘做了自适应应用颜色模式的能力，故不需要再提供该Properties。 -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/garganurag893/react-native-phone-number-input/blob/master/LICENSE.md) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/garganurag893/react-native-phone-number-input/blob/master/LICENSE.md). diff --git a/en/react-native-reanimated-bottom-sheet.md b/en/react-native-reanimated-bottom-sheet.md index d80ed103..5e1939d2 100644 --- a/en/react-native-reanimated-bottom-sheet.md +++ b/en/react-native-reanimated-bottom-sheet.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

reanimated-bottom-sheet

@@ -14,13 +14,13 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-reanimated-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/releases)，并下载适用版本的 tgz 包 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-library/react-native-reanimated-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/releases)，并下载适用版本的 tgz 包 -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -38,25 +38,25 @@ yarn add @react-native-oh-tpl/reanimated-bottom-sheet@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```jsx import React from "react"; -import { View, Button, Text,Dimensions } from "react-native"; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { View, Button, Text, Dimensions } from "react-native"; +import { GestureHandlerRootView } from "react-native-gesture-handler"; import BottomSheet from "reanimated-bottom-sheet"; - export default function () { - const WINDOW_HEIGHT = Dimensions.get('window').height; + const WINDOW_HEIGHT = Dimensions.get("window").height; const sheetRef = React.useRef(null); const renderContent = () => ( + }} + > this is content ); @@ -65,21 +65,23 @@ export default function () { + }} + > title - ) + ); return ( - + - + height: WINDOW_HEIGHT, + backgroundColor: "papayawhip", + alignItems: "center", + justifyContent: "center", + }} + > + - - - - {`${this.state.isRecognizing}`} - - - - - - - - - - - - ); + }); + } catch (e) { + console.error(e); } + }; + + render() { + return ( + + + {`${this.state.started}`} + + + + {`${this.state.recognized}`} + + + + {`${this.state.error}`} + + + + {this.state.results.map((result, index) => { + return ( + + {result} + + ); + })} + + + + {this.state.partialResults.map((result, index) => { + return ( + + {result} + + ); + })} + + + + {` ${this.state.end}`} + + + + {`${this.state.isAvailable}`} + + + + + {`${this.state.isRecognizing}`} + + + + + + + + + + + + ); + } } const styles = StyleSheet.create({ - button: { - width: 50, - height: 50, - }, - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - action: { - textAlign: 'center', - color: '#0000FF', - marginVertical: 5, - fontWeight: 'bold', - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, - stat: { - textAlign: 'center', - color: '#B0171F', - marginBottom: 1, - }, - baseArea: { - width: '100%', - height: 30, - borderRadius: 4, - borderColor: '#000000', - marginTop: 6, - backgroundColor: '#FFFFFF', - flexDirection: 'row', - alignItems: 'center', - paddingLeft: 8, - paddingRight: 8, - marginBottom: 20, - }, + button: { + width: 50, + height: 50, + }, + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", + }, + welcome: { + fontSize: 20, + textAlign: "center", + margin: 10, + }, + action: { + textAlign: "center", + color: "#0000FF", + marginVertical: 5, + fontWeight: "bold", + }, + instructions: { + textAlign: "center", + color: "#333333", + marginBottom: 5, + }, + stat: { + textAlign: "center", + color: "#B0171F", + marginBottom: 1, + }, + baseArea: { + width: "100%", + height: 30, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + marginBottom: 20, + }, }); export default VoiceTest; ``` -## 使用 Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +## 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 -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -380,18 +387,15 @@ export default VoiceTest; } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入（推荐） +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -400,22 +404,22 @@ export default VoiceTest; } ``` -点击右上角的 `sync` 按钮 +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] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNVoicePackage +### 3. Introducing RNVoicePackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -430,29 +434,30 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +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. -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) +### Permission Requirements -### 权限要求 -由于此库涉及语音识别会使用到系统录音功能，使用时需要配置对应的权限，权限需配置在entry/src目录下module.json5和entry/src/main/resources/base/element目录下string.json文件 +由于此库涉及语音识别会使用到系统录音功能，使用时需要配置对应的权限，权限需配置在 entry/src 目录下 module.json5 和 entry/src/main/resources/base/element 目录下 string.json 文件 打开 `module.json5`，添加： @@ -472,6 +477,7 @@ ohpm install + } ] ``` + 打开 `string.json`，添加权限申请原因： ```diff @@ -490,45 +496,46 @@ ohpm install ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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-voice/voice](https://github.com/react-native-voice/voice) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-----------------------------|-----------------------------------------------------------------------------------|-------------------|----------|----------|-------------------| -| Voice.isAvailable()| Checks whether a speech recognition service is available on the system. | Promise<0 \| 1> | no | Android, iOS | yes | -| Voice.start(locale) | Starts listening for speech for a specific locale. Returns null if no error occurs. | Promise | no | Android, iOS | yes | -| Voice.stop() | Stops listening for speech. Returns null if no error occurs. | Promise | no | Android, iOS | yes | -| Voice.cancel() | Cancels the speech recognition. Returns null if no error occurs. | Promise | no | Android, iOS | yes | -| Voice.destroy() | Destroys the current SpeechRecognizer instance. Returns null if no error occurs. | Promise | no | Android, iOS | yes | -| Voice.removeAllListeners() | Cleans/nullifies overridden Voice static methods. | void | no | Android, iOS | yes | -| Voice.isRecognizing() | Return if the SpeechRecognizer is recognizing. | Promise<0 \| 1> | no | Android, iOS | yes | -| Voice.getSpeechRecognitionServices() | Returns a list of the speech recognition engines available on the device. (Example: ['com.google.android.googlequicksearchbox'] if Google is the only one available.) | Promise | no | Android | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------------ | ----------------- | +| Voice.isAvailable() | Checks whether a speech recognition service is available on the system. | Promise<0 \| 1> | no | Android, iOS | yes | +| Voice.start(locale) | Starts listening for speech for a specific locale. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.stop() | Stops listening for speech. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.cancel() | Cancels the speech recognition. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.destroy() | Destroys the current SpeechRecognizer instance. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.removeAllListeners() | Cleans/nullifies overridden Voice static methods. | void | no | Android, iOS | yes | +| Voice.isRecognizing() | Return if the SpeechRecognizer is recognizing. | Promise<0 \| 1> | no | Android, iOS | yes | +| Voice.getSpeechRecognitionServices() | Returns a list of the speech recognition engines available on the device. (Example: ['com.google.android.googlequicksearchbox'] if Google is the only one available.) | Promise | no | Android | no | ## 事件回调 -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!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. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------- | ------------------------------------------------------ | :------- | -------- | ------------ | ----------------- | +| `Voice.onSpeechStart(event)` | Invoked when .start() is called without error. | function | no | Android, iOS | yes | +| `Voice.onSpeechRecognized(event)` | Invoked when speech is recognized. | function | no | Android, iOS | yes | +| `Voice.onSpeechEnd(event)` | Invoked when SpeechRecognizer stops recognition. | function | no | Android, iOS | yes | +| `Voice.onSpeechError(event)` | Invoked when an error occurs. | function | no | Android, iOS | yes | +| `Voice.onSpeechResults(event)` | Invoked when SpeechRecognizer is finished recognizing. | function | no | Android, iOS | yes | +| `Voice.onSpeechPartialResults(event)` | Invoked when any results are computed. | function | no | Android, iOS | yes | +| `Voice.onSpeechVolumeChanged(event)` | Invoked when pitch that is recognized changed. | function | no | Android | no | -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | :------- |--------| ---------------------------------------------- |-----------------| -| `Voice.onSpeechStart(event)` | Invoked when .start() is called without error. | function | no | Android, iOS | yes | -| `Voice.onSpeechRecognized(event)` | Invoked when speech is recognized. | function | no | Android, iOS | yes | -| `Voice.onSpeechEnd(event)` | Invoked when SpeechRecognizer stops recognition. | function | no | Android, iOS | yes | -| `Voice.onSpeechError(event)` | Invoked when an error occurs. | function | no | Android, iOS | yes | -| `Voice.onSpeechResults(event)` | Invoked when SpeechRecognizer is finished recognizing. | function | no | Android, iOS | yes | -| `Voice.onSpeechPartialResults(event)` | Invoked when any results are computed. | function | no | Android, iOS | yes | -| `Voice.onSpeechVolumeChanged(event)` | Invoked when pitch that is recognized changed. | function | no | Android | no | +## Known Issues -## 遗留问题 +- [ ] 原库支持在线和离线模式，HarmonyOS 侧暂只支持离线 问题: [issue#2](https://github.com/react-native-oh-library/voice/issues/2) +- [ ] 原库支持多种区域和语言，HarmonyOS 侧暂只支持中文 问题: [issue#3](https://github.com/react-native-oh-library/voice/issues/3) -- [ ] 原库支持在线和离线模式，HarmonyOS侧暂只支持离线 问题: [issue#2](https://github.com/react-native-oh-library/voice/issues/2) -- [ ] 原库支持多种区域和语言，HarmonyOS侧暂只支持中文 问题: [issue#3](https://github.com/react-native-oh-library/voice/issues/3) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/react-native-voice/voice/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-voice/voice/blob/master/LICENSE). diff --git a/en/react-native-walkthrough-tooltip.md b/en/react-native-walkthrough-tooltip.md index 8a31923c..0294676f 100644 --- a/en/react-native-walkthrough-tooltip.md +++ b/en/react-native-walkthrough-tooltip.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-walkthrough-tooltip

@@ -13,11 +13,11 @@

+> [!TIP] [GitHub address](https://github.com/jasongaare/react-native-walkthrough-tooltip) ->[!TIP] [Github 地址](https://github.com/jasongaare/react-native-walkthrough-tooltip) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: #### **npm** @@ -30,7 +30,8 @@ npm install react-native-walkthrough-tooltip@1.6.0 ```bash yarn add react-native-walkthrough-tooltip@1.6.0 ``` -下面的代码展示了这个库的基本使用场景： + +The following code shows the basic use scenario of the repository: ```js import React, { useState } from "react"; @@ -53,46 +54,48 @@ export const TestTooltip = ({ text, style }) => { }; ``` -## 约束与限制 -### 兼容性 +## Constraints + +### Compatibility -本文档内容基于以下版本验证通过: +This document is verified based on the following versions: 1. RNOH: 0.72.5; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +### Properties -### 属性 -[!TIP]"Platform"列表示该属性在原三方库上支持的平台。 +[!TIP]The **Platform** column indicates the platform where the properties are supported in the original third-party library. -[!TIP]"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +[!TIP]"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该 Properties；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果 +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | -| accessible | Set this to false if you do not want the root touchable element to be accessible. [See docs on accessible here](https://reactnative.dev/docs/accessibility#accessibility-properties) | bool| No | All |Yes | -| allowChildInteraction |By default, the user can touch and interact with the child element. When this prop is false, the user cannot interact with the child element while the tooltip is visible. | bool | No | All | Yes | -| arrowSize |The dimensions of the arrow on the bubble pointing to the highlighted element | Size | No |All | Yes -| backgroundColor |Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop | string | No |All | Yes -| childContentSpacing | The distance between the tooltip-rendered child and the arrow pointing to it | number | No |All | Yes -| closeOnChildInteraction | When child interaction is allowed, this prop determines if onClose should be called when the user interacts with the child element. Default is true (usually means the tooltip will dismiss once the user touches the element highlighted) | bool | No |All | Yes -| closeOnContentInteraction |this prop determines if onClose should be called when the user interacts with the content element. Default is true (usually means the tooltip will dismiss once the user touches the content element) | bool |No | All | Yes -| content | This is the view displayed in the tooltip popover bubble | function/Element |Yes | All | Yes -| displayInsets | The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your content accordingly | object |No | All | Yes -| disableShadow | When true, tooltips will not appear elevated. Disabling shadows will remove the warning: RCTView has a shadow set but cannot calculate shadow efficiently on IOS devices. | bool |No | All | Yes -| isVisible | When true, tooltip is displayed | bool |Yes | All | Yes -| onClose | Callback fired when the user taps the tooltip background overlay | function |Yes | All | Yes -| placement | Where to position the tooltip - options: top, bottom, left, right, center. Default is top for tooltips rendered with children Default is center for tooltips rendered without children.NOTE: center is only available with a childless placement, and the content will be centered within the bounds defined by the displayInsets. | string |Yes | All | Yes -| showChildInTooltip | Set this to false if you do NOT want to display the child alongside the tooltip when the tooltip is visible | bool |No | All | Yes -| supportedOrientations |This prop allows you to control the supported orientations the tooltip modal can be displayed. It correlates directly with [the prop for React Native's Modal component](https://reactnative.dev/docs/modal#supportedorientations) (has no effect if useReactNativeModal is false) | bool |No | iOS | No -| topAdjustment | Value which provides additional vertical offest for the child element displayed in a tooltip. Commonly set to: Platform.OS === 'android' ? -StatusBar.currentHeight : 0 due to an issue with React Native's measure function on Android| number |No | All | Yes -| horizontalAdjustment |Value which provides additional horizontal offest for the child element displayed in a tooltip. This is useful for adjusting the horizontal positioning of a highlighted child element if needed | number |No | All | Yes -| useInteractionManager | Set this to true if you want the tooltip to wait to become visible until the callback for InteractionManager.runAfterInteractions is executed. Can be useful if you need to wait for navigation transitions to complete, etc.[ See docs on InteractionManager here](https://reactnative.dev/docs/interactionmanager) | bool |No | All | Yes -| useReactNativeModal | By default, this library uses a component from React Native. If you need to disable this, and simply render an absolutely positioned full-screen view, set useReactNativeModal={false}. This is especially useful if you desire to render a Tooltip while you have a different Modal rendered. | bool |No | All | Yes -## 遗留问题 - -- [ ] supportedOrientations在HarmonyOS不支持 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/jasongaare/react-native-walkthrough-tooltip/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +| accessible | Set this to false if you do not want the root touchable element to be accessible. [See docs on accessible here](https://reactnative.dev/docs/accessibility#accessibility-properties) | bool| No | All |Yes | +| allowChildInteraction |By default, the user can touch and interact with the child element. When this prop is false, the user cannot interact with the child element while the tooltip is visible. | bool | No | All | Yes | +| arrowSize |The dimensions of the arrow on the bubble pointing to the highlighted element | Size | No |All | Yes +| backgroundColor |Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop | string | No |All | Yes +| childContentSpacing | The distance between the tooltip-rendered child and the arrow pointing to it | number | No |All | Yes +| closeOnChildInteraction | When child interaction is allowed, this prop determines if onClose should be called when the user interacts with the child element. Default is true (usually means the tooltip will dismiss once the user touches the element highlighted) | bool | No |All | Yes +| closeOnContentInteraction |this prop determines if onClose should be called when the user interacts with the content element. Default is true (usually means the tooltip will dismiss once the user touches the content element) | bool |No | All | Yes +| content | This is the view displayed in the tooltip popover bubble | function/Element |Yes | All | Yes +| displayInsets | The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your content accordingly | object |No | All | Yes +| disableShadow | When true, tooltips will not appear elevated. Disabling shadows will remove the warning: RCTView has a shadow set but cannot calculate shadow efficiently on IOS devices. | bool |No | All | Yes +| isVisible | When true, tooltip is displayed | bool |Yes | All | Yes +| onClose | Callback fired when the user taps the tooltip background overlay | function |Yes | All | Yes +| placement | Where to position the tooltip - options: top, bottom, left, right, center. Default is top for tooltips rendered with children Default is center for tooltips rendered without children.NOTE: center is only available with a childless placement, and the content will be centered within the bounds defined by the displayInsets. | string |Yes | All | Yes +| showChildInTooltip | Set this to false if you do NOT want to display the child alongside the tooltip when the tooltip is visible | bool |No | All | Yes +| supportedOrientations |This prop allows you to control the supported orientations the tooltip modal can be displayed. It correlates directly with [the prop for React Native's Modal component](https://reactnative.dev/docs/modal#supportedorientations) (has no effect if useReactNativeModal is false) | bool |No | iOS | No +| topAdjustment | Value which provides additional vertical offest for the child element displayed in a tooltip. Commonly set to: Platform.OS === 'android' ? -StatusBar.currentHeight : 0 due to an issue with React Native's measure function on Android| number |No | All | Yes +| horizontalAdjustment |Value which provides additional horizontal offest for the child element displayed in a tooltip. This is useful for adjusting the horizontal positioning of a highlighted child element if needed | number |No | All | Yes +| useInteractionManager | Set this to true if you want the tooltip to wait to become visible until the callback for InteractionManager.runAfterInteractions is executed. Can be useful if you need to wait for navigation transitions to complete, etc.[ See docs on InteractionManager here](https://reactnative.dev/docs/interactionmanager) | bool |No | All | Yes +| useReactNativeModal | By default, this library uses a component from React Native. If you need to disable this, and simply render an absolutely positioned full-screen view, set useReactNativeModal={false}. This is especially useful if you desire to render a Tooltip while you have a different Modal rendered. | bool |No | All | Yes + +## Known Issues + +- [ ] supportedOrientations 在 HarmonyOS 不支持 + +## Others + +## License + +This project is licensed under [The MIT License (MIT)](https://github.com/jasongaare/react-native-walkthrough-tooltip/blob/master/LICENSE). diff --git a/en/react-navigation-bottom-sheet.md b/en/react-navigation-bottom-sheet.md index 5202d304..b0b1ab77 100644 --- a/en/react-navigation-bottom-sheet.md +++ b/en/react-navigation-bottom-sheet.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

@th3rdwave/react-navigation-bottom-sheet

@@ -12,11 +12,11 @@

-> [!TIP] [Github 地址](https://github.com/th3rdwave/react-navigation-bottom-sheet) +> [!TIP] [GitHub address](https://github.com/th3rdwave/react-navigation-bottom-sheet) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -34,7 +34,7 @@ yarn add @th3rdwave/react-navigation-bottom-sheet@0.3.2 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: > [!TIP] 本示例依赖 react-native-gesture-handler 库，参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入。 @@ -199,73 +199,71 @@ const styles = StyleSheet.create({ }); ``` + ## Link 本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。 如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)进行引入 -## 约束与限制 - -### 兼容性 +## Constraints +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.29; SDK: HarmonyOS-NEXT-DB6 5.0.0.61 (API Version 12 Beta6); IDE: DevEco Studio 5.0.3.706; ROM: 3.0.0.61; -## 属性 -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +## Properties -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. ### Navigation options -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| snapPoints | Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string. | Array | YES | ALL | YES | -| backgroundStyle | View style to be applied to the background component. | ViewStyle | NO | ALL | YES | -| index | Initial snap index. You also could provide -1 to initiate bottom sheet in closed state. | number | NO | ALL | YES | -| detached | Defines whether the bottom sheet is attached to the bottom or no. | boolean | NO | ALL | YES | -| overDragResistanceFactor | Defines how violently sheet has to be stopped while over dragging. | number | NO | ALL | YES | -| enableOverDrag | Enable over drag for the sheet. | boolean | NO | ALL | YES | -| enablePanDownToClose | Enable pan down gesture to close the sheet. | boolean | NO |ALL| YES | -| enableHandlePanningGesture | Enable handle panning gesture interaction. | boolean | NO |ALL| YES | -| enableContentPanningGesture | Enable content panning gesture interaction. | boolean | NO |ALL| YES | -| enableDynamicSizing | Enable dynamic sizing for content view and scrollable content size. | boolean | NO | ALL | YES | -| animateOnMount | This will initially mount the sheet closed and when it's mounted and calculated the layout, it will snap to initial snap point index. | boolean | NO | ALL | YES | -| style | View style to be applied at the sheet container, it also could be an AnimatedStyle. This is helpful to add shadow to the sheet. | ViewStyle | NO | ALL | YES | -| handleStyle | View style to be applied to the handle component. | ViewStyle | NO | ALL | YES | -| handleIndicatorStyle | View style to be applied to the handle indicator component. | ViewStyle | NO | ALL | YES | -| handleHeight | Handle height helps to calculate the internal container and sheet layouts. If handleComponent is provided, the library internally will calculate its layout, unless handleHeight is provided too.| number | NO | ALL | YES | -| contentHeight | Content height helps dynamic snap points calculation.| number | NO | ALL | YES | -| topInset | Top inset to be added to the bottom sheet container, usually it comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.| number | NO | ALL | YES | -| bottomInset |Bottom inset to be added to the bottom sheet container.| number | NO | ALL | YES | -| maxDynamicContentSize |Max dynamic content size height to limit the bottom sheet height from exceeding a provided size.| number | NO | ALL | YES | -| keyboardBehavior |Defines the keyboard appearance behavior.| 'extend' or 'fillParent' or 'interactive' | NO |NO| NO | -| keyboardBlurBehavior |Defines the keyboard blur behavior.| 'none' or 'restore' | NO | NO | NO | -| animationConfigs |Animation configs, this could be created by:|function | NO | ALL | YES | -| handleComponent |Component to be placed as a sheet handle.|React.FC\ | NO | ALL | YES | -| backdropComponent |Component to be placed as a sheet backdrop, by default is set to null, however the library also provide a default implementation BottomSheetBackdrop of a backdrop but you will need to provide it manually.|React.FC\ | NO | ALL | YES | -| backgroundComponent |Component to be placed as a sheet background.|React.FC\ | NO | ALL | YES | -| footerComponent |Component to be placed as a sheet footer.|React.FC\ | NO | ALL | YES | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | -------- | -------- | ----------------- | +| snapPoints | Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string. | Array | YES | ALL | YES | +| backgroundStyle | View style to be applied to the background component. | ViewStyle | NO | ALL | YES | +| index | Initial snap index. You also could provide -1 to initiate bottom sheet in closed state. | number | NO | ALL | YES | +| detached | Defines whether the bottom sheet is attached to the bottom or no. | boolean | NO | ALL | YES | +| overDragResistanceFactor | Defines how violently sheet has to be stopped while over dragging. | number | NO | ALL | YES | +| enableOverDrag | Enable over drag for the sheet. | boolean | NO | ALL | YES | +| enablePanDownToClose | Enable pan down gesture to close the sheet. | boolean | NO | ALL | YES | +| enableHandlePanningGesture | Enable handle panning gesture interaction. | boolean | NO | ALL | YES | +| enableContentPanningGesture | Enable content panning gesture interaction. | boolean | NO | ALL | YES | +| enableDynamicSizing | Enable dynamic sizing for content view and scrollable content size. | boolean | NO | ALL | YES | +| animateOnMount | This will initially mount the sheet closed and when it's mounted and calculated the layout, it will snap to initial snap point index. | boolean | NO | ALL | YES | +| style | View style to be applied at the sheet container, it also could be an AnimatedStyle. This is helpful to add shadow to the sheet. | ViewStyle | NO | ALL | YES | +| handleStyle | View style to be applied to the handle component. | ViewStyle | NO | ALL | YES | +| handleIndicatorStyle | View style to be applied to the handle indicator component. | ViewStyle | NO | ALL | YES | +| handleHeight | Handle height helps to calculate the internal container and sheet layouts. If handleComponent is provided, the library internally will calculate its layout, unless handleHeight is provided too. | number | NO | ALL | YES | +| contentHeight | Content height helps dynamic snap points calculation. | number | NO | ALL | YES | +| topInset | Top inset to be added to the bottom sheet container, usually it comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea. | number | NO | ALL | YES | +| bottomInset | Bottom inset to be added to the bottom sheet container. | number | NO | ALL | YES | +| maxDynamicContentSize | Max dynamic content size height to limit the bottom sheet height from exceeding a provided size. | number | NO | ALL | YES | +| keyboardBehavior | Defines the keyboard appearance behavior. | 'extend' or 'fillParent' or 'interactive' | NO | NO | NO | +| keyboardBlurBehavior | Defines the keyboard blur behavior. | 'none' or 'restore' | NO | NO | NO | +| animationConfigs | Animation configs, this could be created by: | function | NO | ALL | YES | +| handleComponent | Component to be placed as a sheet handle. | React.FC\ | NO | ALL | YES | +| backdropComponent | Component to be placed as a sheet backdrop, by default is set to null, however the library also provide a default implementation BottomSheetBackdrop of a backdrop but you will need to provide it manually. | React.FC\ | NO | ALL | YES | +| backgroundComponent | Component to be placed as a sheet background. | React.FC\ | NO | ALL | YES | +| footerComponent | Component to be placed as a sheet footer. | React.FC\ | NO | ALL | YES | ### Navigation helpers -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| snapTo | Snaps the current sheet to index. | (index: number) => void | NO | ALL | YES | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------ | --------------------------------- | ----------------------- | -------- | -------- | ----------------- | +| snapTo | Snaps the current sheet to index. | (index: number) => void | NO | ALL | YES | -## 遗留问题 +## Known Issues -## 其他 -- keyboardBehavior属性暂不支持，与iOS表现一致。[issue#24](https://github.com/th3rdwave/react-navigation-bottom-sheet/issues/24) -- keyboardBlurBehavior属性暂不支持，与iOS表现一致。[issue#25](https://github.com/th3rdwave/react-navigation-bottom-sheet/issues/25) +## Others +- keyboardBehaviorProperties 暂不支持，与 iOS 表现一致。[issue#24](https://github.com/th3rdwave/react-navigation-bottom-sheet/issues/24) +- keyboardBlurBehaviorProperties 暂不支持，与 iOS 表现一致。[issue#25](https://github.com/th3rdwave/react-navigation-bottom-sheet/issues/25) -## 开源协议 +## License -本项目基于 [The MIT License (MIT )](https://github.com/th3rdwave/react-navigation-bottom-sheet/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT )](https://github.com/th3rdwave/react-navigation-bottom-sheet/blob/main/LICENSE). diff --git a/en/react-navigation.md b/en/react-navigation.md index 8a30e65e..03990120 100644 --- a/en/react-navigation.md +++ b/en/react-navigation.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-navigation

@@ -12,33 +12,30 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation) - +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-navigation) ## Packages -| 序号 | 原库名 | 原库基线版本 | HarmonyOSReleases | 文档链接（相对路径） | -|----|-------------------------------------------------------------------------------------------------------------------------------------------|--------|--------------------------------------------------------------------------------------------------------------------|--------------------------------------------------| -| 1 | [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.20 | - | [链接](/zh-cn/react-navigation-bottom-tabs.md) | -| 2 | [@react-navigation/core](https://github.com/react-navigation/react-navigation/tree/6.x/packages/core) | 6.4.16 | - | [链接](/zh-cn/react-navigation-core.md) | -| 3 | [@react-navigation/devtools](https://github.com/react-navigation/react-navigation/tree/6.x/packages/devtools) | 6.0.26 | - | [链接](/zh-cn/react-navigation-devtools.md) | -| 4 | [@react-navigation/drawer](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/drawer) | 6.7.1 | [@react-native-oh-tpl/drawer](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-drawer.md) | -| 5 | [@react-navigation/elements](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements) | 1.3.21 | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) | -| 6 | [@react-navigation/material-bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-bottom-tabs) | 6.2.28 | - | [链接](/zh-cn/react-navigation-material-bottom-tabs.md) | -| 7 | [@react-navigation/material-top-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-top-tabs) | 6.6.13 | - | [链接](/zh-cn/react-navigation-material-top-tabs.md) | -| 8 | [@react-navigation/native-stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | 6.9.26 | [@react-native-oh-tpl/native-stack](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-native-stack.md) | -| 9 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.17 | - | [链接](/zh-cn/react-navigation-native.md) | -| 10 | [@react-navigation/routers](https://github.com/react-navigation/react-navigation/tree/6.x/packages/routers) | 6.1.9 | - | [链接](/zh-cn/react-navigation-routers.md) | -| 11 | [@react-navigation/stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) | 6.4.0 | [@react-native-oh-tpl/stack](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-stack.md) | -| 12 | [react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/react-native-tab-view) | 3.5.2 | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) | -| 13 | [flipper-plugin-react-navigation](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) | 1.3.32 | - | [链接](/zh-cn/flipper-plugin-react-navigation.md) | +| 序号 | 原库名 | 原库基线版本 | HarmonyOSReleases | 文档链接（相对路径） | +| ---- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | +| 1 | [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.20 | - | [链接](/zh-cn/react-navigation-bottom-tabs.md) | +| 2 | [@react-navigation/core](https://github.com/react-navigation/react-navigation/tree/6.x/packages/core) | 6.4.16 | - | [链接](/zh-cn/react-navigation-core.md) | +| 3 | [@react-navigation/devtools](https://github.com/react-navigation/react-navigation/tree/6.x/packages/devtools) | 6.0.26 | - | [链接](/zh-cn/react-navigation-devtools.md) | +| 4 | [@react-navigation/drawer](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/drawer) | 6.7.1 | [@react-native-oh-tpl/drawer](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-drawer.md) | +| 5 | [@react-navigation/elements](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements) | 1.3.21 | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) | +| 6 | [@react-navigation/material-bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-bottom-tabs) | 6.2.28 | - | [链接](/zh-cn/react-navigation-material-bottom-tabs.md) | +| 7 | [@react-navigation/material-top-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-top-tabs) | 6.6.13 | - | [链接](/zh-cn/react-navigation-material-top-tabs.md) | +| 8 | [@react-navigation/native-stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | 6.9.26 | [@react-native-oh-tpl/native-stack](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-native-stack.md) | +| 9 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.17 | - | [链接](/zh-cn/react-navigation-native.md) | +| 10 | [@react-navigation/routers](https://github.com/react-navigation/react-navigation/tree/6.x/packages/routers) | 6.1.9 | - | [链接](/zh-cn/react-navigation-routers.md) | +| 11 | [@react-navigation/stack](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) | 6.4.0 | [@react-native-oh-tpl/stack](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-stack.md) | +| 12 | [react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/react-native-tab-view) | 3.5.2 | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) | +| 13 | [flipper-plugin-react-navigation](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) | 1.3.32 | - | [链接](/zh-cn/flipper-plugin-react-navigation.md) | ## 依赖关系 ![image](/img/react-navigation-dependency.png) +## License - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/core/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/core/LICENSE). diff --git a/en/reassure.md b/en/reassure.md index 5a0b0ddd..922551c8 100644 --- a/en/reassure.md +++ b/en/reassure.md @@ -1,6 +1,4 @@ - - -> 模板版本：v0.2.2 +> Template version: v0.2.2

reassure

@@ -15,9 +13,9 @@

-> [!TIP] [Github 地址](https://github.com/callstack/reassure) +> [!TIP] [GitHub address](https://github.com/callstack/reassure) -## 安装与使用 +## Installation and Usage @@ -35,15 +33,15 @@ yarn add reassure@1.0.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. 文件名称结尾必须包含`.perf-test.`，比如：MeasureFunction.perf-test.tsx ```js -import {measureFunction} from 'reassure'; -import {test} from '@jest/globals'; +import { measureFunction } from "reassure"; +import { test } from "@jest/globals"; function fib(n: number): number { if (n <= 1) { @@ -53,30 +51,29 @@ function fib(n: number): number { return fib(n - 1) + fib(n - 2); } -test('MeasureFunction runs 10', async () => { - await measureFunction(() => fib(20), {runs: 10}); +test("MeasureFunction runs 10", async () => { + await measureFunction(() => fib(20), { runs: 10 }); }); -test('MeasureFunction runs 20', async () => { - await measureFunction(() => fib(30), {runs: 20}); +test("MeasureFunction runs 20", async () => { + await measureFunction(() => fib(30), { runs: 20 }); }); -test('MeasureFunction warmupRuns 10', async () => { - await measureFunction(() => fib(30), {warmupRuns: 10}); +test("MeasureFunction warmupRuns 10", async () => { + await measureFunction(() => fib(30), { warmupRuns: 10 }); }); -test('MeasureFunction warmupRuns 20', async () => { - await measureFunction(() => fib(30), {warmupRuns: 20}); +test("MeasureFunction warmupRuns 20", async () => { + await measureFunction(() => fib(30), { warmupRuns: 20 }); }); -test('MeasureFunction writeFile false', async () => { - await measureFunction(() => fib(30), {writeFile: false}); +test("MeasureFunction writeFile false", async () => { + await measureFunction(() => fib(30), { writeFile: false }); }); -test('MeasureFunction writeFile true', async () => { - await measureFunction(() => fib(30), {writeFile: true}); +test("MeasureFunction writeFile true", async () => { + await measureFunction(() => fib(30), { writeFile: true }); }); - ``` ## 基础配置 @@ -86,8 +83,8 @@ test('MeasureFunction writeFile true', async () => { ```js /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { - preset: 'react-native', - setupFilesAfterEnv: ['./jest-setup.js'], + preset: "react-native", + setupFilesAfterEnv: ["./jest-setup.js"], }; ``` @@ -95,10 +92,9 @@ module.exports = { ```js /* eslint-disable no-undef */ -import {configure} from 'reassure'; - -configure({testingLibrary: 'react-native'}); +import { configure } from "reassure"; +configure({ testingLibrary: "react-native" }); ``` ### 安装 jest @@ -109,7 +105,7 @@ configure({testingLibrary: 'react-native'}); npm install --save-dev jest@29.2.1 ``` -### 安装 babel-jest +### 安装 babel-jest 如已安装 babel-jest，可忽略 @@ -131,53 +127,53 @@ npx reassure 性能报告默认在当前工程根目录的`.reassure`文件夹中 -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25 (API Version 12 Canary4); IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | -| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| measureRenders | rendering the passed screen inside a `React.Profiler` component, measuring its performance and writing results to the output file | async function measureRenders(
ui: React.ReactElement,
options?: MeasureRendersOptions,
): Promise { | no | all | yes | -| measureFunction | Allows you to wrap any synchronous function, measure its performance and write results to the output file | async function measureFunction(
fn: () => void,
options?: MeasureFunctionOptions,
): Promise { | no | all | yes | -| resetToDefaults | Reset current config to the original `defaultConfig` object | Function | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| measureRenders | rendering the passed screen inside a `React.Profiler` component, measuring its performance and writing results to the output file | async function measureRenders(
ui: React.ReactElement,
options?: MeasureRendersOptions,
): Promise { | no | all | yes | +| measureFunction | Allows you to wrap any synchronous function, measure its performance and write results to the output file | async function measureFunction(
fn: () => void,
options?: MeasureFunctionOptions,
): Promise { | no | all | yes | +| resetToDefaults | Reset current config to the original `defaultConfig` object | Function | no | all | yes | **MeasureRendersOptions** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------- | ------------------------------------------------------------ | --------------------------------------------------- | -------- | -------- | ----------------- | -| runs | number of runs per series for the particular test | number | no | all | yes | -| warmupRuns | number of additional warmup runs that will be done and discarded before the actual runs | number | no | all | yes | -| wrapper | React component, such as a Provider, which the ui will be wrapped with | React.ComponentType<{children: React.ReactElement}> | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -------- | -------- | ----------------- | +| runs | number of runs per series for the particular test | number | no | all | yes | +| warmupRuns | number of additional warmup runs that will be done and discarded before the actual runs | number | no | all | yes | +| wrapper | React component, such as a Provider, which the ui will be wrapped with | React.ComponentType<{children: React.ReactElement}> | no | all | yes | | scenario | a custom async function, which defines user interaction within the ui by utilized RNTL functions | (screen: any) => Promise | no | all | yes | -| writeFile | should write output to file | boolean | no | all | yes | +| writeFile | should write output to file | boolean | no | all | yes | **MeasureFunctionOptions** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | -| runs | number of runs per series for the particular test | number | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------- | --------------------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| runs | number of runs per series for the particular test | number | no | all | yes | | warmupRuns | number of additional warmup runs that will be done and discarded before the actual runs | number | no | all | yes | -| writeFile | should write output to file | boolean | no | all | yes | +| writeFile | should write output to file | boolean | no | all | yes | **configure** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ------------------------------------------------------------ | -------------- | -------- | -------- | ----------------- | -| runs | number of runs per series for the particular test | number | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | --------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- | +| runs | number of runs per series for the particular test | number | no | all | yes | | warmupRuns | number of additional warmup runs that will be done and discarded before the actual runs | number | no | all | yes | -| outputFile | should write output to file | boolean | no | all | yes | -| verbose | make Reassure log more, e.g. for debugging purposes | boolean | no | all | yes | -| testingLibrary | where to look for `render` and `cleanup` functions | TestingLibrary | no | all | yes | +| outputFile | should write output to file | boolean | no | all | yes | +| verbose | make Reassure log more, e.g. for debugging purposes | boolean | no | all | yes | +| testingLibrary | where to look for `render` and `cleanup` functions | TestingLibrary | no | all | yes | **dangerReassure** @@ -186,10 +182,10 @@ npx reassure | inputFilePath | Enter the path to the file | number | no | all | yes | | debug | Enable the debug mode. | number | no | all | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/callstack/reassure/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/callstack/reassure/blob/main/LICENSE). diff --git a/en/rn-emoji-keyboard.md b/en/rn-emoji-keyboard.md index 1067d4c4..70564bc7 100644 --- a/en/rn-emoji-keyboard.md +++ b/en/rn-emoji-keyboard.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

rn-emoji-keyboard

@@ -12,15 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/rn-emoji-keyboard) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/rn-emoji-keyboard) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/rn-emoji-keyboard Releases](https://github.com/react-native-oh-library/rn-emoji-keyboard/releases)，并下载适用版本的 tgz 包。 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/rn-emoji-keyboard Releases](https://github.com/react-native-oh-library/rn-emoji-keyboard/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -38,11 +38,12 @@ yarn add @react-native-oh-tpl/rn-emoji-keyboard@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. + +> [!TIP] 本示例依赖@react-native-async-storage/async-storage 库，参照[@react-native-async-storage/async-storage 文档](/zh-cn/react-native-async-storage-async-storage.md)进行引入 -> [!TIP] 本示例依赖@react-native-async-storage/async-storage库，参照[@react-native-async-storage/async-storage文档](/zh-cn/react-native-async-storage-async-storage.md)进行引入 ```ts import React from "react"; import { StyleSheet, Button, Text } from "react-native"; @@ -139,20 +140,21 @@ const styles = StyleSheet.create({ }); ``` -## 约束与限制 +## 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. -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/rn-emoji-keyboard Releases](https://github.com/react-native-oh-library/rn-emoji-keyboard/releases) -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/rn-emoji-keyboard Releases](https://github.com/react-native-oh-library/rn-emoji-keyboard/releases) +## Properties -## 属性 详细请查看 [rn-emoji-keyboard 的文档介绍](https://github.com/TheWidlarzGroup/rn-emoji-keyboard) -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | -------- | ----------- | ----------------- | @@ -215,39 +217,39 @@ const styles = StyleSheet.create({ ### Full list of EmojisByCategory type -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----- | ----------- | ------------- | -------- | ----------- | ----------------- | -| title | EmojisByCategory title | CategoryTypes | yes | iOS/Android | yes | -| data | EmojisByCategory emoji data | JsonEmoji[] | yes | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----- | --------------------------- | ------------- | -------- | ----------- | ----------------- | +| title | EmojisByCategory title | CategoryTypes | yes | iOS/Android | yes | +| data | EmojisByCategory emoji data | JsonEmoji[] | yes | iOS/Android | yes | ### Full list of CategoryTypes type -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----- | ----------- | ------------- | -------- | ----------- | ----------------- | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | | `CategoryTypes` | CategoryTypes type | "search" \| "smileys_emotion" \| "people_body" \| "animals_nature" \| "food_drink" \| "travel_places" \| "activities" \| "objects" \| "symbols" \| "flags" \| "recently_used" | no | iOS/Android | yes | ### Full list of JsonEmoji type -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | ----------- | -------- | -------- | ----------- | ----------------- | -| emoji | JsonEmoji emoji | string | yes | iOS/Android | yes | -| name | JsonEmoji name | string | yes | iOS/Android | yes | -| v | JsonEmoji version | string | yes | iOS/Android | yes | -| toneEnabled | JsonEmoji toneEnabled | boolean | yes | iOS/Android | yes | -| keywords | JsonEmoji keywords | string[] | no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | --------------------- | -------- | -------- | ----------- | ----------------- | +| emoji | JsonEmoji emoji | string | yes | iOS/Android | yes | +| name | JsonEmoji name | string | yes | iOS/Android | yes | +| v | JsonEmoji version | string | yes | iOS/Android | yes | +| toneEnabled | JsonEmoji toneEnabled | boolean | yes | iOS/Android | yes | +| keywords | JsonEmoji keywords | string[] | no | iOS/Android | yes | ### Full list of EmojiType type -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | ----------- | -------- | -------- | ----------- | ----------------- | -| emoji | EmojiType emoji | string | yes | iOS/Android | yes | -| name | EmojiType name | string | yes | iOS/Android | yes | -| slug | EmojiType slug | string | yes | iOS/Android | yes | -| unicode_version | EmojiType version | string | yes | iOS/Android | yes | -| toneEnabled | EmojiType toneEnabled | boolean | yes | iOS/Android | yes | -| alreadySelected | EmojiType alreadySelected | boolean | no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------- | ------- | -------- | ----------- | ----------------- | +| emoji | EmojiType emoji | string | yes | iOS/Android | yes | +| name | EmojiType name | string | yes | iOS/Android | yes | +| slug | EmojiType slug | string | yes | iOS/Android | yes | +| unicode_version | EmojiType version | string | yes | iOS/Android | yes | +| toneEnabled | EmojiType toneEnabled | boolean | yes | iOS/Android | yes | +| alreadySelected | EmojiType alreadySelected | boolean | no | iOS/Android | yes | -## 静态方法 +## Properties ### useRecentPicksPersistence @@ -266,13 +268,13 @@ Async storage? - sure. Backend as store - no problem. Choose how you want to han | `initialization` | This property is used at the very beginning to restore previous state. | Function | yes | iOS/Android | yes | | `onStateChange` | This property is used every time when user selects emoji and keyboard has enabled enableRecentlyUsed props | Function | yes | iOS/Android | yes | -## 遗留问题 +## Known Issues - [x] rn-emoji-keyboard 的键盘弹出后回弹默认高度表情键盘无法点击: [issue#1](https://github.com/react-native-oh-library/rn-emoji-keyboard/issues/1) - [ ] rn-emoji-keyboard 展开旋钮动画卡顿: [issue#2](https://github.com/react-native-oh-library/rn-emoji-keyboard/issues/2) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/TheWidlarzGroup/rn-emoji-keyboard/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/TheWidlarzGroup/rn-emoji-keyboard/blob/master/LICENSE). -- Gitee