diff --git a/en/baronha-ting.md b/en/baronha-ting.md
index 723d429434597467fcf3397c520eb7d54b9843ce..9f5003a6a90141431939dfbfea4c9bb603072da2 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](/en/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](/en/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/galio-framework.md b/en/galio-framework.md
index a5ef49b605bcc12252511598e3d2bff4234d26f3..b1656bf9ff37ceee156dd39551478bb7fc23c3ca 100644
--- a/en/galio-framework.md
+++ b/en/galio-framework.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
galio-framework
@@ -12,12 +12,9 @@
+> [!TIP] [Github address](https://github.com/galio-org/galio)
-
-
-> [!TIP] [Github 地址](https://github.com/galio-org/galio)
-
-## 安装与使用
+## Installation and Usage
@@ -35,109 +32,109 @@ yarn add galio-framework@0.8.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 { Card, Block, theme } from 'galio-framework';
-import React, { useState } from 'react';
-import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Card, Block, theme } from "galio-framework";
+import React, { useState } from "react";
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
const CardDemo = () => {
- return (
-
-
- )
+ return (
+
+
+ );
};
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- },
- accordion: {
- borderWidth: 1,
- borderColor: '#ccc',
- borderRadius: 5,
- overflow: 'hidden',
- shadowRadius: 10
- },
- listStyle: {
- borderTopWidth: 10,
- borderTopColor: 'red',
- },
- headerStyle: {
- backgroundColor: '#5E72E4',
- padding: 10,
- },
- contentStyle: {
- paddingVertical: 10,
- paddingHorizontal: 20,
- fontWeight: 'bold'
+ container: {
+ flex: 1,
+ backgroundColor: "#fff",
+ },
+ accordion: {
+ borderWidth: 1,
+ borderColor: "#ccc",
+ borderRadius: 5,
+ overflow: "hidden",
+ shadowRadius: 10,
+ },
+ listStyle: {
+ borderTopWidth: 10,
+ borderTopColor: "red",
+ },
+ headerStyle: {
+ backgroundColor: "#5E72E4",
+ padding: 10,
+ },
+ contentStyle: {
+ paddingVertical: 10,
+ paddingHorizontal: 20,
+ fontWeight: "bold",
+ },
+ inputArea: {
+ width: "100%",
+ height: "15%",
+ borderWidth: 2,
+ borderColor: "#000000",
+ marginTop: 8,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "white",
+ },
+ baseText: {
+ width: "100%",
+ height: "100%",
+ fontWeight: "bold",
+ textAlign: "center",
+ fontSize: 16,
+ },
+ shadow: {
+ shadowColor: "red",
+ shadowOffset: {
+ width: 10,
+ height: 3,
},
- inputArea: {
- width: '100%',
- height: '15%',
- borderWidth: 2,
- borderColor: '#000000',
- marginTop: 8,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: "white"
- },
- baseText: {
- width: '100%',
- height: '100%',
- fontWeight: 'bold',
- textAlign: 'center',
- fontSize: 16,
- },
- shadow: {
- shadowColor: "red",
- shadowOffset: {
- width: 10,
- height: 3,
- },
- },
- viewShadow: {
- elevation: 1.5,
- shadowColor: "#FF9C09",
- shadowOffset: { width: 0, height: 0 },
- shadowOpacity: 1,
- shadowRadius: 1.5,
- },
- cardImageRadius: {
- borderRadius: 30,
- opacity:0.5
- },
- imageBlockStyle: {
- borderColor: 'blue',
- borderWidth: 5,
- borderBlockColor: 'yellow'
- },
- footerStyle: {
- color: 'yellow',
- backgroundColor: '#FF7167',
- fontSize: 10,
- fontWeight: 'bold',
- borderRadius:10
- }
+ },
+ viewShadow: {
+ elevation: 1.5,
+ shadowColor: "#FF9C09",
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 1,
+ shadowRadius: 1.5,
+ },
+ cardImageRadius: {
+ borderRadius: 30,
+ opacity: 0.5,
+ },
+ imageBlockStyle: {
+ borderColor: "blue",
+ borderWidth: 5,
+ borderBlockColor: "yellow",
+ },
+ footerStyle: {
+ color: "yellow",
+ backgroundColor: "#FF7167",
+ fontSize: 10,
+ fontWeight: "bold",
+ borderRadius: 10,
+ },
});
export default CardDemo;
@@ -145,43 +142,43 @@ export default CardDemo;
## Link
-本库依赖react-native-vector-icons，如已在鸿蒙工程中引入过该库，则无需再次引入。
+The HarmonyOS implementation of this library depends on the native code from react-native-vector-icons. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[react-native-vector-icons 文档](/zh-cn/react-native-vector-icons.md)进行引入
+If it is not included, follow the guide provided in [react-native-vector-icons](/en/react-native-vector-icons.md) to add it to your project.
-## 约束与限制
+## 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.29;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## Properties
-详情请见[galio](https://galio.io/docs/#/components)
+For details, see[galio](https://galio.io/docs/#/components)
-> [!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.
### [Accordion](https://galio.io/docs/#/components/accordion?id=accordion)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :--------------: | :----------------------------------------------------------: | :-------: | :------: | :---------: | :---------------: |
-| style | Styling the Block which encapsulates the whole FlatList used for rendering the elements. | object | no | iOS/Android | Yes |
-| dataArray | Array of objects with the following keys: title, content, icon: { name, family, size, color, style} | array | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :--------------: | :--------------------------------------------------------------------------------------------------------------: | :-------: | :------: | :---------: | :---------------: |
+| style | Styling the Block which encapsulates the whole FlatList used for rendering the elements. | object | no | iOS/Android | Yes |
+| dataArray | Array of objects with the following keys: title, content, icon: { name, family, size, color, style} | array | no | iOS/Android | Yes |
| opened | Index number representing which of the elements of your array should be opened when the component first renders. | number | no | iOS/Android | Yes |
-| listStyle | FlatList style prop. | object | no | iOS/Android | Yes |
-| icon | Icon for the un-expanded piece of content | component | no | iOS/Android | Yes |
-| expandedIcon | Icon used when the content is expanded. | component | no | iOS/Android | Yes |
-| headerStyle | Object styling the header of the Accordion. | object | no | iOS/Android | Yes |
-| contentStyle | Object styling the content section of the Accordion. | object | no | iOS/Android | Yes |
-| onAccordionClose | Function called when the user closes one of the Accordion's items. | function | no | iOS/Android | Yes |
-| onAccordionOpen | Function called when the user expands one of the Accordion's items. | function | no | iOS/Android | Yes |
+| listStyle | FlatList style prop. | object | no | iOS/Android | Yes |
+| icon | Icon for the un-expanded piece of content | component | no | iOS/Android | Yes |
+| expandedIcon | Icon used when the content is expanded. | component | no | iOS/Android | Yes |
+| headerStyle | Object styling the header of the Accordion. | object | no | iOS/Android | Yes |
+| contentStyle | Object styling the content section of the Accordion. | object | no | iOS/Android | Yes |
+| onAccordionClose | Function called when the user closes one of the Accordion's items. | function | no | iOS/Android | Yes |
+| onAccordionOpen | Function called when the user expands one of the Accordion's items. | function | no | iOS/Android | Yes |
-### [Block](https://github.com/galio-org/galio/blob/master/LICENSE.md)
+### [Block](https://github.com/galio-org/galio/blob/master/LICENSE.md)
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :---------: | :------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: |
@@ -204,73 +201,73 @@ export default CardDemo;
### [Button](https://galio.io/docs/#/components/button?id=button)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :---------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: |
-| capitalize | Transforms the first character in a capital letter | boolean | no | iOS/Android | Yes |
-| color | your options are: 'primary', 'theme', 'warning', 'succes', 'transparent' or your own color | string | no | iOS/Android | Yes |
-| disabled | Disables the button | boolean | no | iOS/Android | Yes |
-| icon | pick whatever icon you want from Expo's icons | boolean, string | no | iOS/Android | Yes |
-| iconColor | sets the icon's color | boolean, string | no | iOS/Android | Yes |
-| iconFamily | pick whatever icon family suits the icon you chose from Expo's icons | number | no | iOS/Android | Yes |
-| iconSize | sets the icon's size | boolean | no | iOS/Android | Yes |
-| loading | Uses the for the loading effect | boolean | no | iOS/Android | Yes |
-| loadingSize | your options are: 'small', 'large' | boolean | no | iOS/Android | Yes |
-| lowercase | makes all letters lowercase | boolean | no | iOS/Android | Yes |
-| onlyIcon | adds specific styling for using only an icon in your button | boolean | no | iOS/Android | Yes |
-| opacity | changes the button's opacity | boolean | no | iOS/Android | Yes |
-| radius | changes the button's radius | string | no | No | No |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :---------: | :--------------------------------------------------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: |
+| capitalize | Transforms the first character in a capital letter | boolean | no | iOS/Android | Yes |
+| color | your options are: 'primary', 'theme', 'warning', 'succes', 'transparent' or your own color | string | no | iOS/Android | Yes |
+| disabled | Disables the button | boolean | no | iOS/Android | Yes |
+| icon | pick whatever icon you want from Expo's icons | boolean, string | no | iOS/Android | Yes |
+| iconColor | sets the icon's color | boolean, string | no | iOS/Android | Yes |
+| iconFamily | pick whatever icon family suits the icon you chose from Expo's icons | number | no | iOS/Android | Yes |
+| iconSize | sets the icon's size | boolean | no | iOS/Android | Yes |
+| loading | Uses the for the loading effect | boolean | no | iOS/Android | Yes |
+| loadingSize | your options are: 'small', 'large' | boolean | no | iOS/Android | Yes |
+| lowercase | makes all letters lowercase | boolean | no | iOS/Android | Yes |
+| onlyIcon | adds specific styling for using only an icon in your button | boolean | no | iOS/Android | Yes |
+| opacity | changes the button's opacity | boolean | no | iOS/Android | Yes |
+| radius | changes the button's radius | string | no | No | No |
| shadowColor | the default shadowColor is based on the button's color but you can also write a specific shadowColor | string | no | iOS/Android | Yes |
-| shadowColor | removes shadow | boolean | no | iOS/Android | Yes |
-| size | your options are: 'large', 'small' | number | no | iOS/Android | Yes |
-| uppercase | makes all letters uppercase | boolean | no | iOS/Android | Yes |
+| shadowColor | removes shadow | boolean | no | iOS/Android | Yes |
+| size | your options are: 'large', 'small' | number | no | iOS/Android | Yes |
+| uppercase | makes all letters uppercase | boolean | no | iOS/Android | Yes |
### [Card](https://galio.io/docs/#/components/card?id=card)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-------------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: |
-| card | adding the necessary styles | boolean | no | iOS/Android | Yes |
-| shadow | adding the necessary styles for shadows | boolean | no | iOS/Android | Yes |
-| borderless | adding the card's border | boolean | no | iOS/Android | Yes |
-| image | write your relative path or URL to the image | string | no | iOS/Android | Yes |
-| imageBlockStyle | styles for the Block wrapping the Image | string | no | iOS/Android | Yes |
-| imageStyle | styles for the Image | object | no | iOS/Android | Yes |
-| avatar | write your relative path or URL to the avatar's image | string | no | iOS/Android | Yes |
-| location | where is this coming from? write the location of the author | string | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-------------: | :----------------------------------------------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: |
+| card | adding the necessary styles | boolean | no | iOS/Android | Yes |
+| shadow | adding the necessary styles for shadows | boolean | no | iOS/Android | Yes |
+| borderless | adding the card's border | boolean | no | iOS/Android | Yes |
+| image | write your relative path or URL to the image | string | no | iOS/Android | Yes |
+| imageBlockStyle | styles for the Block wrapping the Image | string | no | iOS/Android | Yes |
+| imageStyle | styles for the Image | object | no | iOS/Android | Yes |
+| avatar | write your relative path or URL to the avatar's image | string | no | iOS/Android | Yes |
+| location | where is this coming from? write the location of the author | string | no | iOS/Android | Yes |
| locationColor | the default locationColor is based on themes.COLORS.MUTED, but you can also write your own color | boolean, string | no | iOS/Android | Yes |
-| title | write your main card's title | string | no | iOS/Android | Yes |
-| titleColor | change your title's color | string | no | iOS/Android | Yes |
-| caption | write your main card's title | string | no | iOS/Android | Yes |
-| captionColor | change your caption's color | string | no | iOS/Android | Yes |
-| footerStyle | styles for the block wrapping the whole author's section | object | no | iOS/Android | Yes |
+| title | write your main card's title | string | no | iOS/Android | Yes |
+| titleColor | change your title's color | string | no | iOS/Android | Yes |
+| caption | write your main card's title | string | no | iOS/Android | Yes |
+| captionColor | change your caption's color | string | no | iOS/Android | Yes |
+| footerStyle | styles for the block wrapping the whole author's section | object | no | iOS/Android | Yes |
### [Checkbox](https://galio.io/docs/#/components/checkbox?id=checkbox)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: |
-| checkboxStyle | By sending an object you can style the checkbox's color, size and more | any | no | iOS/Android | Yes |
-| disabled | This disables the possibility of the checkbox being used. | boolean | no | iOS/Android | Yes |
-| flexDirection | Maybe you need the checkbox to be on top of an image? You can do that with this prop. | oneOf(['row', 'row-reverse', 'column', 'column-reverse']), string | no | iOS/Android | Yes |
-| iconColor | This prop changes the icon color. | string | no | iOS/Android | Yes |
-| iconName | This prop changes the icon. | string | no | iOS/Android | Yes |
-| iconSize | This prop changes the size of the icon. | number | no | iOS/Android | Yes |
-| iconFamily | In case you need an icon from a different package, this prop helps you change the icon package. | string | no | iOS/Android | Yes |
-| image | This allows you to place an image instead of text. | string | no | iOS/Android | Yes |
-| imageStyle | Style the way your image looks here！ | any | no | iOS/Android | Yes |
-| initialValue | Should the initial state of your checkbox be false or true? | boolean | no | iOS/Android | Yes |
-| label | The text next to your checkbox. | string | no | iOS/Android | Yes |
-| labelStyle | Style your checkbox's text | any | no | iOS/Android | Yes |
-| onChange | This prop take an arrow function and everytime the user presses the checkbox the function is called. | function | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------: | :--------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------: | :------: | :---------: | :---------------: |
+| checkboxStyle | By sending an object you can style the checkbox's color, size and more | any | no | iOS/Android | Yes |
+| disabled | This disables the possibility of the checkbox being used. | boolean | no | iOS/Android | Yes |
+| flexDirection | Maybe you need the checkbox to be on top of an image? You can do that with this prop. | oneOf(['row', 'row-reverse', 'column', 'column-reverse']), string | no | iOS/Android | Yes |
+| iconColor | This prop changes the icon color. | string | no | iOS/Android | Yes |
+| iconName | This prop changes the icon. | string | no | iOS/Android | Yes |
+| iconSize | This prop changes the size of the icon. | number | no | iOS/Android | Yes |
+| iconFamily | In case you need an icon from a different package, this prop helps you change the icon package. | string | no | iOS/Android | Yes |
+| image | This allows you to place an image instead of text. | string | no | iOS/Android | Yes |
+| imageStyle | Style the way your image looks here！ | any | no | iOS/Android | Yes |
+| initialValue | Should the initial state of your checkbox be false or true? | boolean | no | iOS/Android | Yes |
+| label | The text next to your checkbox. | string | no | iOS/Android | Yes |
+| labelStyle | Style your checkbox's text | any | no | iOS/Android | Yes |
+| onChange | This prop take an arrow function and everytime the user presses the checkbox the function is called. | function | no | iOS/Android | Yes |
### [Deck Swiper](https://galio.io/docs/#/components/deckswiper?id=deck-swiper)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------: | :-------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: |
| style | Styling the Block which encapsulates the components used for swiping. | object | no | iOS/Android | Yes |
-| components | An array of components used for building the deck. | array | no | iOS/Android | Yes |
-| onSwipeRight | Function called when the user swipes right. | function | no | iOS/Android | Yes |
-| onSwipeLeft | Function called when the user swipes left. | function | no | iOS/Android | Yes |
-| focusedElementStyle | Styling for the first element of the deck. | object | no | iOS/Android | Yes |
-| nextElementStyle | Styling for the elements underneath the first element of the deck. | object | no | iOS/Android | Yes |
+| components | An array of components used for building the deck. | array | no | iOS/Android | Yes |
+| onSwipeRight | Function called when the user swipes right. | function | no | iOS/Android | Yes |
+| onSwipeLeft | Function called when the user swipes left. | function | no | iOS/Android | Yes |
+| focusedElementStyle | Styling for the first element of the deck. | object | no | iOS/Android | Yes |
+| nextElementStyle | Styling for the elements underneath the first element of the deck. | object | no | iOS/Android | Yes |
### [Icon](https://galio.io/docs/#/components/icon?id=icon)
@@ -283,55 +280,55 @@ export default CardDemo;
### [Input](https://galio.io/docs/#/components/input?id=input)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :------------------: | :----------------------------------------------------------: | :-----: | :------: | :---------: | :---------------: |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: | :---------: | :---------------: |
| type | this is basically the TextInput's keyboardType prop and it has the next options: 'default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad'. | string | no | iOS/Android | Yes |
-| password | Tells the input that this is going to be a password input | boolean | no | iOS/Android | Yes |
-| placeholderTextColor | Sets the placeholder's text color | string | no | iOS/Android | Yes |
-| label | Sets the label of the input | string | no | iOS/Android | Yes |
-| bgColor | Sets the Input's backgroundColor | string | no | iOS/Android | Yes |
-| rounded | Sets the corners to be rounded | boolean | no | iOS/Android | Yes |
-| borderless | Sets the Input's borderWidth to 0 | boolean | no | iOS/Android | Yes |
-| viewPass | Adds the functionality of pressing a button in order to see your password's letters | boolean | no | iOS/Android | Yes |
-| icon | Choose your Icon's name from Expo's icon list | string | no | iOS/Android | Yes |
-| iconColor | Changes the Icon's color | string | no | iOS/Android | Yes |
-| family | Choose your Icon's family from the same list | string | no | iOS/Android | Yes |
-| color | Sets the Input's text color. | string | no | iOS/Android | Yes |
-| help | Sets a helper line for more information regarding your input. | string | no | iOS/Android | Yes |
-| left | Sets the Icon to the left of the Input. | boolean | no | iOS/Android | Yes |
-| right | Sets the Icon to the right of the Input. | boolean | no | iOS/Android | Yes |
-| topHelp | Sets the helper line above the input. | boolean | no | iOS/Android | Yes |
-| bottomHelp | Sets the helper line below the input. | boolean | no | iOS/Android | Yes |
+| password | Tells the input that this is going to be a password input | boolean | no | iOS/Android | Yes |
+| placeholderTextColor | Sets the placeholder's text color | string | no | iOS/Android | Yes |
+| label | Sets the label of the input | string | no | iOS/Android | Yes |
+| bgColor | Sets the Input's backgroundColor | string | no | iOS/Android | Yes |
+| rounded | Sets the corners to be rounded | boolean | no | iOS/Android | Yes |
+| borderless | Sets the Input's borderWidth to 0 | boolean | no | iOS/Android | Yes |
+| viewPass | Adds the functionality of pressing a button in order to see your password's letters | boolean | no | iOS/Android | Yes |
+| icon | Choose your Icon's name from Expo's icon list | string | no | iOS/Android | Yes |
+| iconColor | Changes the Icon's color | string | no | iOS/Android | Yes |
+| family | Choose your Icon's family from the same list | string | no | iOS/Android | Yes |
+| color | Sets the Input's text color. | string | no | iOS/Android | Yes |
+| help | Sets a helper line for more information regarding your input. | string | no | iOS/Android | Yes |
+| left | Sets the Icon to the left of the Input. | boolean | no | iOS/Android | Yes |
+| right | Sets the Icon to the right of the Input. | boolean | no | iOS/Android | Yes |
+| topHelp | Sets the helper line above the input. | boolean | no | iOS/Android | Yes |
+| bottomHelp | Sets the helper line below the input. | boolean | no | iOS/Android | Yes |
### [NavBar](https://galio.io/docs/#/components/navbar?id=navbar)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------: | :----------------------------------------------------------: | :----------: | :------: | :---------: | :---------------: |
-| back | Adds a back button for your navBar. | boolean | no | iOS/Android | Yes |
-| transparent | Sets the backgroundColor and borderColor to 'transparent' | boolean | no | iOS/Android | Yes |
-| title | Title of the NavBar | node, string | no | iOS/Android | Yes |
-| titleStyle | Sets the styling for the title | object | no | iOS/Android | Yes |
-| left | Left side of the NavBar | node | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------: | :-----------------------------------------------------------: | :----------: | :------: | :---------: | :---------------: |
+| back | Adds a back button for your navBar. | boolean | no | iOS/Android | Yes |
+| transparent | Sets the backgroundColor and borderColor to 'transparent' | boolean | no | iOS/Android | Yes |
+| title | Title of the NavBar | node, string | no | iOS/Android | Yes |
+| titleStyle | Sets the styling for the title | object | no | iOS/Android | Yes |
+| left | Left side of the NavBar | node | no | iOS/Android | Yes |
| leftStyle | Sets the styling for the View wrapping the left side element. | object | no | iOS/Android | Yes |
-| leftIconColor | Sets the color of the left side's icon. | string | no | iOS/Android | Yes |
-| onLeftPress | Function for the left side of the navbar | function | no | iOS/Android | Yes |
-| right | Right side of the NavBar | node | no | iOS/Android | Yes |
+| leftIconColor | Sets the color of the left side's icon. | string | no | iOS/Android | Yes |
+| onLeftPress | Function for the left side of the navbar | function | no | iOS/Android | Yes |
+| right | Right side of the NavBar | node | no | iOS/Android | Yes |
| rightStyle | Sets the styling for the View wrapping the left side element. | object | no | iOS/Android | Yes |
### [Radio](https://galio.io/docs/#/components/radio?id=radio)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-------------: | :---------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: |
-| color | color. | string | no | iOS/Android | Yes |
-| containerStyle | Container Style | any | no | iOS/Android | Yes |
-| radioOuterStyle | Title of the NavBar | any | no | iOS/Android | Yes |
-| radioInnerStyle | Sets the styling for the title | any | no | iOS/Android | Yes |
-| disabled | Prohibited Use | boolean | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-------------: | :---------------------------------------: | :-------------------------------------------------------------------: | :------: | :---------: | :---------------: |
+| color | color. | string | no | iOS/Android | Yes |
+| containerStyle | Container Style | any | no | iOS/Android | Yes |
+| radioOuterStyle | Title of the NavBar | any | no | iOS/Android | Yes |
+| radioInnerStyle | Sets the styling for the title | any | no | iOS/Android | Yes |
+| disabled | Prohibited Use | boolean | no | iOS/Android | Yes |
| flexDirection | Determines the direction of the main axis | oneOfType(['row', 'row-reverse', 'column', 'column-reverse']), string | no | iOS/Android | Yes |
-| initialValue | Initial Value | boolean | no | iOS/Android | Yes |
-| label | Label | string | no | iOS/Android | Yes |
-| labelStyle | Label Styles | any | no | iOS/Android | Yes |
-| onChange | Change when radio is seleted | function | no | iOS/Android | Yes |
+| initialValue | Initial Value | boolean | no | iOS/Android | Yes |
+| label | Label | string | no | iOS/Android | Yes |
+| labelStyle | Label Styles | any | no | iOS/Android | Yes |
+| onChange | Change when radio is seleted | function | no | iOS/Android | Yes |
### [Text](https://galio.io/docs/#/components/text?id=text)
@@ -351,58 +348,57 @@ export default CardDemo;
### [Toast Notification](https://galio.io/docs/#/components/toastnotification?id=toast-notification)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :---------------: | :----------------------------------------------------------: | :---------: | :------: | :---------: | :---------------: |
-| style | Styling the Block which encapsulate | object | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :---------------: | :--------------------------------------------------------------------------------------------------: | :---------: | :------: | :---------: | :---------------: |
+| style | Styling the Block which encapsulate | object | no | iOS/Android | Yes |
| children | The content of your toast notification. You can even just write a text or create your own component. | node/string | no | iOS/Android | Yes |
-| isShow | Toggle between the toast being shown or not. | bool | no | iOS/Android | Yes |
-| positionIndicator | one of: 'top', 'center', 'bottom' | string | no | iOS/Android | Yes |
-| positionOffset | Whether to use positioning | number | no | iOS/Android | Yes |
-| fadeInDuration | The number of ms for the fade in animation. | number | no | iOS/Android | Yes |
-| fadeOutDuration | The number of ms for the fade out animation. | number | no | iOS/Android | Yes |
-| color | one of: 'primary', 'theme', 'info', 'warning', 'success' | string | no | iOS/Android | Yes |
-| round | Maybe you want a rounded toast notification? | boolean | no | iOS/Android | Yes |
-| textStyle | Style object for the children prop used as a string. | object | no | iOS/Android | Yes |
+| isShow | Toggle between the toast being shown or not. | bool | no | iOS/Android | Yes |
+| positionIndicator | one of: 'top', 'center', 'bottom' | string | no | iOS/Android | Yes |
+| positionOffset | Whether to use positioning | number | no | iOS/Android | Yes |
+| fadeInDuration | The number of ms for the fade in animation. | number | no | iOS/Android | Yes |
+| fadeOutDuration | The number of ms for the fade out animation. | number | no | iOS/Android | Yes |
+| color | one of: 'primary', 'theme', 'info', 'warning', 'success' | string | no | iOS/Android | Yes |
+| round | Maybe you want a rounded toast notification? | boolean | no | iOS/Android | Yes |
+| textStyle | Style object for the children prop used as a string. | object | no | iOS/Android | Yes |
### [Slider](https://galio.io/docs/#/components/slider?id=slider)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :---------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: |
-| activeColor | This sets the active color of your slider. | string | no | iOS/Android | Yes |
-| value | The initial value at which the thumb of the slider is positioned | number | no | iOS/Android | Yes |
-| disabled | This prop makes the slider unusable to the user. | boolean | no | iOS/Android | Yes |
-| minimumValue | Sets the minimum value for the Slider. | number | no | iOS/Android | Yes |
-| maximumValue | Sets the maximum value for the Slider. | number | no | iOS/Android | Yes |
-| trackStyle | By passing an object you can style the track of the Slider. | any | no | iOS/Android | Yes |
-| thumbStyle | By passing an object you can style the thumb of the Slider. | any | no | iOS/Android | Yes |
-| step | This is a stepper. It sets fixed values for the thumb. | number | no | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :---------------: | :----------------------------------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: |
+| activeColor | This sets the active color of your slider. | string | no | iOS/Android | Yes |
+| value | The initial value at which the thumb of the slider is positioned | number | no | iOS/Android | Yes |
+| disabled | This prop makes the slider unusable to the user. | boolean | no | iOS/Android | Yes |
+| minimumValue | Sets the minimum value for the Slider. | number | no | iOS/Android | Yes |
+| maximumValue | Sets the maximum value for the Slider. | number | no | iOS/Android | Yes |
+| trackStyle | By passing an object you can style the track of the Slider. | any | no | iOS/Android | Yes |
+| thumbStyle | By passing an object you can style the thumb of the Slider. | any | no | iOS/Android | Yes |
+| step | This is a stepper. It sets fixed values for the thumb. | number | no | iOS/Android | Yes |
| onSlidingComplete | By passing an arrow function you can decide what is going to happen when the Sliding is complete | function | no | iOS/Android | Yes |
-| onSlidingStart | By passing an arrow function you can decide what is going to happen when the Sliding starts | function | no | iOS/Android | Yes |
-| onValueChange | By passing an arrow function you can decide what is going to happen when the Sliding is moving. | function | no | iOS/Android | Yes |
+| onSlidingStart | By passing an arrow function you can decide what is going to happen when the Sliding starts | function | no | iOS/Android | Yes |
+| onValueChange | By passing an arrow function you can decide what is going to happen when the Sliding is moving. | function | no | iOS/Android | Yes |
### [Switch](https://galio.io/docs/#/components/switch?id=switch)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------------: | :------------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------: | :------------------------------------------: | :----------------------------------------------------------------------------: | :------: | :---------: | :---------------: |
| color | Switch Color | oneOfType(['primary', 'theme', 'error', 'warning', 'success', 'info']), string | no | No | No |
-| disabled | Whether the switch is disabled | boolean | no | iOS/Android | Yes |
-| initialValue | Initial value | boolean | no | iOS/Android | Yes |
-| trackColor | track Color | object | no | iOS/Android | Yes |
-| ios_backgroundColor | ios background color | string | no | iOS/Android | Yes |
-| onChange | Events that occur when the switch is changed | function | yes | iOS/Android | Yes |
+| disabled | Whether the switch is disabled | boolean | no | iOS/Android | Yes |
+| initialValue | Initial value | boolean | no | iOS/Android | Yes |
+| trackColor | track Color | object | no | iOS/Android | Yes |
+| ios_backgroundColor | ios background color | string | no | iOS/Android | Yes |
+| onChange | Events that occur when the switch is changed | function | yes | iOS/Android | Yes |
### [GalioTheme](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=galiotheme-usage)
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :---: | :----------------------------------------------------------: | :----: | :------: | :---------: | :---------------: |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :---: | :----------------------------------------------------------------------------------------------------------------: | :----: | :------: | :---------: | :---------------: |
| color | Theme color, [COLORS reference table](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=colors-reference-table) | Object | no | iOS/Android | Yes |
-| size | Set Font Size, [SIZES reference table](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=sizes-reference-table) | Object | no | iOS/Android | Yes |
-
-## 遗留问题
+| size | Set Font Size, [SIZES reference table](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=sizes-reference-table) | Object | no | iOS/Android | Yes |
-## 其他
+## Known Issues
-## 开源协议
+## Others
-本项目基于 [The MIT License(MIT)](https://github.com/galio-org/galio/blob/master/LICENSE.md)，请自由地享受和参与开源。
+## License
+This project is licensed under [The MIT License(MIT)](https://github.com/galio-org/galio/blob/master/LICENSE.md).
diff --git a/en/klarna-platform-colors.md b/en/klarna-platform-colors.md
index ad4f4497fa65083870d76f21bcce79259f2af6bb..db3fd75f95c1e04cc79fbfdc38044642752a9a0f 100644
--- a/en/klarna-platform-colors.md
+++ b/en/klarna-platform-colors.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
@klarna/platform-colors
@@ -13,15 +13,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/platform-colors)
+> [!TIP] [Github address](https://github.com/react-native-oh-library/platform-colors)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/platform-colors Releases](https://github.com/react-native-oh-library/platform-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/platform-colors Releases](https://github.com/react-native-oh-library/platform-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 (#).
@@ -37,13 +37,13 @@ npm install @react-native-oh-tpl/platform-colors@file:#
yarn add @react-native-oh-tpl/platform-colors@file:#
```
-生成资源文件：
+Generate resource files:
```bash
npx @react-native-oh-tpl/platform-colors
```
-> [!TIP] 第一次运行该命令时，它将提示您要为哪些平台生成文件，确定后将在工程根目录创建具有以下格式的文件：
+> [!TIP] The first time you run the command it will prompt you which platforms you want to generate files for which will create a file with the following format:
```js
// platform-colors.config.js
@@ -74,9 +74,9 @@ module.exports = {
};
```
-现在检查你的 android, ios 和 harmony 文件夹。您应该在每个平台上都有您的颜色定义。
+Now go ahead and inspect your android, ios and web folders. You should have your color definitions on each platform.
-当您需要修改颜色资源时，只需更改`colors`配置，然后再次执行以下命令即可生成最新的颜色资源
+You need to re-run the command after each change to the config to update the generated files.
```bash
npx @react-native-oh-tpl/platform-colors
@@ -84,9 +84,9 @@ npx @react-native-oh-tpl/platform-colors
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
```ts
import React from "react";
@@ -171,17 +171,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](/en/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
{
@@ -192,18 +192,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": {
@@ -212,22 +209,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNPlatformColorsPackage
+### 3. Introducing RNPlatformColorsPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -241,36 +238,36 @@ 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/platform-colors Releases](https://github.com/react-native-oh-library/platform-colors/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/platform-colors Releases](https://github.com/react-native-oh-library/platform-colors/releases)
-## 属性
+## Properties
-### platform-colors.config.js 配置文件属性
+### platform-colors.config.js configuration files Properties
-> 详情见 [@klarna/platform-colors 文档](https://github.com/klarna-incubator/platform-colors)
+> details [@klarna/platform-colors documentation](https://github.com/klarna-incubator/platform-colors)
-> [!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 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | ----------- | ----------------- |
@@ -284,9 +281,9 @@ 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.
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---------------- | ------------------------------------ | -------- | -------- | ----------- | ----------------- |
@@ -313,10 +310,10 @@ resolveColor(color: ColorValue): Promise;
| ----- | -------------------------------------------------------------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- |
| color | Color value obtained through the PlatformColor interface.
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，如已在鸿蒙工程中引入过该库，则无需再次引入。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg](/en/react-native-svg-capi.md) to add it to your project.
+## 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 ` `. This prop is common used as: ` `. This prop is common used as: `
react-countdown-circle-timer
@@ -13,10 +12,9 @@
+> [!TIP] [ GitHub address](https://github.com/vydimitrov/react-countdown-circle-timer)
-> [!TIP] [Github 地址](https://github.com/vydimitrov/react-countdown-circle-timer)
-
-## 安装与使用
+## Installation and Usage
@@ -34,22 +32,21 @@ yarn add react-native-countdown-circle-timer@3.2.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, { useState } from 'react'
-import { View, StyleSheet, Button, Text, ScrollView } from 'react-native';
-import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'
+import React, { useState } from "react";
+import { View, StyleSheet, Button, Text, ScrollView } from "react-native";
+import { CountdownCircleTimer } from "react-native-countdown-circle-timer";
+export function SwitchDemo() {
+ const [isPlaying, setIsPlaying] = useState(true);
+ const [count, setCount] = useState(15);
-export function SwitchDemo(){
- const [isPlaying, setIsPlaying] = useState(true)
- const [count, setCount] = useState(15)
-
- return(
-
+ return (
+
{
- console.log('Counter is ', count)
- console.log('Remaining time is ', remainingTime)
+ console.log("Counter is ", count);
+ console.log("Remaining time is ", remainingTime);
}}
onComplete={() => ({ shouldRepeat: true })}
>
{({ remainingTime }) => remainingTime}
- setIsPlaying((prev) => !prev)} title={'Toggle Playing'}>
- setCount((prev) => (prev += 5))} title={'Count'}>
+ setIsPlaying((prev) => !prev)}
+ title={"Toggle Playing"}
+ >
+ setCount((prev) => (prev += 5))}
+ title={"Count"}
+ >
- )
- }
- const styles = StyleSheet.create({
- container: {
- alignItems: "center",
- justifyContent: "center",
- backgroundColor:"#fff",
-
- }
- });
+ );
+}
+const styles = StyleSheet.create({
+ container: {
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#fff",
+ },
+});
```
+
## Link
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-svg-capi.md#link) to add it to your project.
-## 约束与限制
+## 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.29;
-## 属性
-
-> [!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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :----------------: | :----------------------------------------------------------: | :-----------------: | :------: | :---------: | :---------------: |
-| colors | colors prop is either:(Single valid color in any format or URL to a gradient;Array of colors in HEX format. At least 2 colors should be provided) | `string & string[]` | No | Android/iOS | Yes |
-| colorsTime | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when colors is an array of HEX colors | number[] | No | Android/iOS | Yes |
-| isPlaying | Play or pause animation | boolean | No | Android/iOS | Yes |
-| initialRemainingTime | Set the initial remaining time if it is different than the duration | number | No | Android/iOS | Yes |
-| updateInterval | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame | number | No | Android/iOS | Yes |
-| size | Width and height of the SVG element | number | No | Android/iOS | Yes |
-| strokeWidth | Path stroke width | number | No | Android/iOS | Yes |
-| trailStrokeWidth | Trail stroke width | number | No | Android/iOS | Yes |
-| strokeLinecap | Path stroke line cap | `round 、 square 、 butt` | No | Android/iOS | Yes |
-| rotation | Progress path rotation direction| `clockwise 、 counterclockwise` | No | Android/iOS | Yes |
-| isGrowing | Indicated if the progress path should be growing instead of shrinking | boolean | No | Android/iOS | Yes |
-| trailColor | Circle trail color - takes any valid color format| string | No | Android/iOS | Yes |
-| isSmoothColorTransition |Indicates if the colors should smoothly transition to the next color | boolean | No | Android/iOS | Yes |
-| children | Render function to customize the time/content in the center of the circle | function | No | Android/iOS |Yes
-| onComplete | On animation complete event handler | function | No | Android/iOS | Yes |
-| onUpdate | On remaining time update event handler | function | No | Android/iOS | Yes |
+> [!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 |
+| :---------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------: | :------: | :---------: | :---------------: |
+| colors | colors prop is either:(Single valid color in any format or URL to a gradient;Array of colors in HEX format. At least 2 colors should be provided) | `string & string[]` | No | Android/iOS | Yes |
+| colorsTime | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when colors is an array of HEX colors | number[] | No | Android/iOS | Yes |
+| isPlaying | Play or pause animation | boolean | No | Android/iOS | Yes |
+| initialRemainingTime | Set the initial remaining time if it is different than the duration | number | No | Android/iOS | Yes |
+| updateInterval | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame | number | No | Android/iOS | Yes |
+| size | Width and height of the SVG element | number | No | Android/iOS | Yes |
+| strokeWidth | Path stroke width | number | No | Android/iOS | Yes |
+| trailStrokeWidth | Trail stroke width | number | No | Android/iOS | Yes |
+| strokeLinecap | Path stroke line cap | `round 、 square 、 butt` | No | Android/iOS | Yes |
+| rotation | Progress path rotation direction | `clockwise 、 counterclockwise` | No | Android/iOS | Yes |
+| isGrowing | Indicated if the progress path should be growing instead of shrinking | boolean | No | Android/iOS | Yes |
+| trailColor | Circle trail color - takes any valid color format | string | No | Android/iOS | Yes |
+| isSmoothColorTransition | Indicates if the colors should smoothly transition to the next color | boolean | No | Android/iOS | Yes |
+| children | Render function to customize the time/content in the center of the circle | function | No | Android/iOS | Yes |
+| onComplete | On animation complete event handler | function | No | Android/iOS | Yes |
+| onUpdate | On remaining time update event handler | function | No | Android/iOS | Yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/vydimitrov/react-countdown-circle-timer/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/vydimitrov/react-countdown-circle-timer/blob/master/LICENSE).
diff --git a/en/react-native-audio-recorder-player.md b/en/react-native-audio-recorder-player.md
index 50fb1e137b7fb8b7f0ef1f874f5ce7adba1bf034..d4b49c16518732eeb018f151d841643b51e715d8 100644
--- a/en/react-native-audio-recorder-player.md
+++ b/en/react-native-audio-recorder-player.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-audio-recorder-player
@@ -12,15 +12,15 @@
-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-audio-recorder-player)
+> [!tip] [ GitHub address](https://github.com/react-native-oh-library/react-native-audio-recorder-player)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/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-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/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**
@@ -34,9 +34,9 @@ npm install @react-native-oh-tpl/react-native-audio-recorder-player@file:#
yarn add @react-native-oh-tpl/react-native-audio-recorder-player@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 AudioRecorderPlayer, {
@@ -510,13 +510,14 @@ class Page extends Component {
export default Page;
```
+
## 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.json5` 添加 overrides 字段
+### Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
```json
{
@@ -526,18 +527,16 @@ export default Page;
}
}
```
-### 引入原生端代码
-目前有两种方法：
+### 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": {
@@ -546,21 +545,23 @@ export default Page;
"@react-native-oh-tpl/react-native-audio-recorder-player": "file:../../node_modules/@react-native-oh-tpl/react-native-audio-recorder-player/harmony/audio_recorder_player.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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 配置 CMakeLists 和引入 RNAudioRecorderPlayerPackage
+### Configuring CMakeLists and Introducing RNAudioRecorderPlayerPackage
-打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
```diff
project(rnapp)
@@ -597,7 +598,8 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_audio_recorder_player)
# 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"
@@ -615,9 +617,10 @@ std::vector> PackageProvider::getPackages(Package::Cont
};
}
```
-### 在 ArkTs 侧引入 react-native-audio-recorder-player Package
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+### Introducing react-native-audio-recorder-player Package to ArkTS
+
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
+ import {RNAudioRecorderPlayerPackage} from '@react-native-oh-tpl/react-native-audio-recorder-player/ts';
@@ -629,36 +632,38 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
];
}
```
-### 运行
-点击右上角的 `sync` 按钮
+### Running
-或者在终端执行：
+Click the `sync` button in the upper right corner.
+
+Alternatively, run the following instruction on the terminal:
```bash
cd entry
ohpm install
```
-然后编译、运行即可。
-## 约束与限制
+Then build and run the code.
+
+## Constraints
-### 兼容性
+### Compatibility
-要使用此库，需要使用正确的 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-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases)
-### 权限要求
+### Permission Requirements
-#### 在 entry 目录下的module.json5中添加权限
+#### Include applicable permissions in the module.json5 file within the entry directory.
-打开 `entry/src/main/module.json5`，添加：
+Open the `entry/src/main/module.json5` file and add the following code:
```diff
...
"requestPermissions": [
-+ {"name": "ohos.permission.INTERNET"},//网络播放音频需添加
++ {"name": "ohos.permission.INTERNET"},
+ {
+ "name": "ohos.permission.MICROPHONE",
+ "reason": "$string:Access_Create_Audio",
@@ -672,9 +677,10 @@ ohpm install
]
]
```
-#### 在 entry 目录下添加申请权限的原因
-打开 `entry/src/main/resources/base/element/string.json`，添加：
+#### Apply the reasons for applicable permission in the entry directory.
+
+Open the `entry/src/main/resources/base/element/string.json` file and add the following code:
```diff
...
@@ -687,36 +693,37 @@ ohpm install
]
}
```
+
## API
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
-| `mmss` | Convert milliseconds to minute:second string | function(milliseconds:number): string | No | Android，iOS | yes |
-| `mmssss` | Convert milliseconds to minute:second:milliseconds string | function(milliseconds:number): string | No | Android，iOS | yes |
-| `setSubscriptionDuration` | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms| function(seconds:float):void | No | Android，iOS | yes |
-| `addRecordBackListener` |Get callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder). | function(callBack:(value:RecordBackType)=>void): void | No | Android，iOS | yes |
-| `removeRecordBackListener` |Removes recordBack listener. | function(): void | No | Android，iOS | yes |
-| `addPlayBackListener` | Get callback from native module. Will receive duration, currentPosition. | function(callBack:(value: PlayBackType)=>void): void | No | Android，iOS | yes |
-| `removePlayBackListener` | Removes playback listener. | function(): void | No | Android，iOS | yes |
-| `startRecorder` |Start recording. Not passing uri will save audio in default location. | function(uri?:string,audioSets?: AudioSet,meteringEnabled?: boolean): Promise< string > | No | Android，iOS | yes |
-| `pauseRecorder` | Pause recording. | function() : Promise< string > | No | Android，iOS | yes |
-| `resumeRecorder` | Resume recording. | function() : Promise< string > | No | Android，iOS | yes |
-| `stopRecorder` | Stop recording. | function() : Promise< string > | No | Android，iOS | yes |
-| `startPlayer` | Start playing. Not passing the param will play audio in default location. | function(uri?:string,httpHeaders?:Record) : Promise< string > | No | Android，iOS | yes |
-| `stopPlayer` | Stop playing. | function() : Promise< string > | No | Android，iOS | yes |
-| `pausePlayer` | Pause playing. | function() : Promise< string > | No | Android，iOS | yes |
-| `resumePlayer` | Resume playing. | function() : Promise< string > | No | Android，iOS | yes |
-| `seekToPlayer` | Seek audio. | function(milliseconds:number) : Promise< string > | No | Android，iOS | yes |
-| `setVolume` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). | function(volume:float) : Promise< string > | No | Android，iOS | yes |
-
-## 遗留问题
-
-## 其他
-
-## 开源协议
-
-本项目基于 [The MIT License (MIT)](https://github.com/hyochan/react-native-audio-recorder-player/blob/main/LICENSE) ，请自由地享受和参与开源。
+> [!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 |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | -------- | ------------ | ----------------- |
+| `mmss` | Convert milliseconds to minute:second string | function(milliseconds:number): string | No | Android，iOS | yes |
+| `mmssss` | Convert milliseconds to minute:second:milliseconds string | function(milliseconds:number): string | No | Android，iOS | yes |
+| `setSubscriptionDuration` | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms | function(seconds:float):void | No | Android，iOS | yes |
+| `addRecordBackListener` | Get callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder). | function(callBack:(value:RecordBackType)=>void): void | No | Android，iOS | yes |
+| `removeRecordBackListener` | Removes recordBack listener. | function(): void | No | Android，iOS | yes |
+| `addPlayBackListener` | Get callback from native module. Will receive duration, currentPosition. | function(callBack:(value: PlayBackType)=>void): void | No | Android，iOS | yes |
+| `removePlayBackListener` | Removes playback listener. | function(): void | No | Android，iOS | yes |
+| `startRecorder` | Start recording. Not passing uri will save audio in default location. | function(uri?:string,audioSets?: AudioSet,meteringEnabled?: boolean): Promise< string > | No | Android，iOS | yes |
+| `pauseRecorder` | Pause recording. | function() : Promise< string > | No | Android，iOS | yes |
+| `resumeRecorder` | Resume recording. | function() : Promise< string > | No | Android，iOS | yes |
+| `stopRecorder` | Stop recording. | function() : Promise< string > | No | Android，iOS | yes |
+| `startPlayer` | Start playing. Not passing the param will play audio in default location. | function(uri?:string,httpHeaders?:Record) : Promise< string > | No | Android，iOS | yes |
+| `stopPlayer` | Stop playing. | function() : Promise< string > | No | Android，iOS | yes |
+| `pausePlayer` | Pause playing. | function() : Promise< string > | No | Android，iOS | yes |
+| `resumePlayer` | Resume playing. | function() : Promise< string > | No | Android，iOS | yes |
+| `seekToPlayer` | Seek audio. | function(milliseconds:number) : Promise< string > | No | Android，iOS | yes |
+| `setVolume` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). | function(volume:float) : Promise< string > | No | Android，iOS | yes |
+
+## Known Issues
+
+## Others
+
+## License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/hyochan/react-native-audio-recorder-player/blob/main/LICENSE).
diff --git a/en/react-native-autoLink.md b/en/react-native-autoLink.md
index c9617a1910c3e8eb7005cab346bd0a3d70a6d3bc..01aa60089697cc602623af6846c21594e0984816 100644
--- a/en/react-native-autoLink.md
+++ b/en/react-native-autoLink.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-autolink
@@ -12,10 +12,9 @@
+> [!TIP] [GitHub address](https://github.com/joshswan/react-native-autolink)
-> [!TIP] [Github 地址](https://github.com/joshswan/react-native-autolink)
-
-## 安装与使用
+## Installation and Usage
@@ -33,109 +32,107 @@ yarn add react-native-autolink@4.2.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 from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import Autolink from 'react-native-autolink';
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Autolink from "react-native-autolink";
const AutolinkDemo = () => {
- return (
-
-
- Here is a demo of react-native-autolink:
-
-
- )
+ return (
+
+ Here is a demo of react-native-autolink:
+
+ );
};
const styles = StyleSheet.create({
- container: {
- flex: 1,
- padding: 20,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#f0f0f0',
- },
- text: {
- fontSize: 18,
- marginBottom: 10,
- },
- autolink: {
- fontSize: 16,
- lineHeight: 24,
- },
- link: {
- color: 'blue',
- textDecorationLine: 'underline',
- },
- customLink: {
- color: 'red',
- textDecorationLine: 'underline',
- },
- customText: {
- color: 'red',
- }
+ container: {
+ flex: 1,
+ padding: 20,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#f0f0f0",
+ },
+ text: {
+ fontSize: 18,
+ marginBottom: 10,
+ },
+ autolink: {
+ fontSize: 16,
+ lineHeight: 24,
+ },
+ link: {
+ color: "blue",
+ textDecorationLine: "underline",
+ },
+ customLink: {
+ color: "red",
+ textDecorationLine: "underline",
+ },
+ customText: {
+ color: "red",
+ },
});
export default AutolinkDemo;
```
-## 约束与限制
+## 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.29;
2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
-
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!tip] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :----------------: | :----------------------------------------------------------: | :-----------------: | :------: | :---------: | :---------------: |
-| component | Override the component used as the output container. | React.ComponentType | No | Android/IOS | Yes |
-| email | Whether to link emails (`mailto:{email}`). | boolean | No | Android/IOS | Yes |
-| hashtag | Whether to link hashtags to supplied service. Possible values: `false` (disabled), `"facebook"`, `"instagram"`, `"twitter"`. | boolean or string | No | Android/IOS | Yes |
-| linkProps | Attributes applied to link Text components. | TextProps | No | Android/IOS | Yes |
-| linkStyle | Styles applied to link Text components. *Note:* Will be overriden if `style` supplied in [`linkProps`](https://github.com/joshswan/react-native-autolink#linkprops). | TextStyle | No | Android/IOS | Yes |
-| matchers | Array of custom matcher objects with optional press handlers, styling, and text/url extraction. | CustomMatcher[] | No | Android/IOS | Yes |
-| mention | Whether to link mentions/handles to supplied service. Possible values: `false` (disabled), `"instagram"`, `"soundcloud"`, `"twitter"`. | boolean or string | No | Android/IOS | Yes |
-| onPress | Override default link press behavior. Signature: `(url: string, match: Match) => void`. | function | No | Android/IOS | Yes |
-| onLongPress | Handle link long press events. Signature: `(url: string, match: Match) => void`. | function | No | Android/IOS | Yes |
-| phone | Whether to link phone numbers. Possible values: `false` (disabled), `true` (`tel:{number}`), `"sms"` or `"text"` (`sms:{number}`). | boolean or string | No | Android/IOS | Yes |
-| renderLink | Override default link rendering behavior. Signature: `(text: string, match: Match, index: number) => React.ReactNode`. | function | No | Android/IOS | Yes |
-| renderText | Override default text rendering behavior. Signature: `(text: string, index: number) => React.ReactNode`. | function | No | Android/IOS | Yes |
-| showAlert | Whether to display an alert before leaving the app (for privacy or accidental clicks). | boolean | No | Android/IOS | Yes |
-| stripPrefix | Whether to strip protocol from URL link text (e.g. `https://github.com` -> `github.com`). | boolean | No | Android/IOS | Yes |
-| stripTrailingSlash | Whether to strip trailing slashes from URL link text (e.g. `github.com/` -> `github.com`). | boolean | No | Android/IOS | Yes |
-| text | The string to parse for links. | string | Yes | Android/IOS | Yes |
-| textProps | Attributes applied to non-link Text components. | TextProps | No | Android/IOS | Yes |
-| truncate | Maximum length of URL link text. Possible values: `0` (disabled), `1+` (maximum length). | number | No | Android/IOS | Yes |
-| truncateChars | Characters to replace truncated URL link text segments with (e.g. `github.com/../repo`) | string | No | Android/IOS | Yes |
-| truncateLocation | Override truncation location. Possible values: `"smart"`, `"end"`, `"middle"`. | string | No | Android/IOS | Yes |
-| url | Whether to link URLs. Possible values: `false` (disabled), `true`, `UrlConfig` (see below). | boolean or object | No | Android/IOS | Yes |
-| useNativeSchemes | Whether to use native app schemes (e.g. `twitter://`) rather than web URLs when linking to services for hashtag and mention links. | boolean | No | Android/IOS | Yes |
-
-## 遗留问题
-
-## 其他
-
-## 开源协议
-
-本项目基于 [The MIT License](https://github.com/joshswan/react-native-autolink/blob/master/LICENSE) ，请自由地享受和参与开源。
+## Properties
+
+> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------: | :------: | :---------: | :---------------: |
+| component | Override the component used as the output container. | React.ComponentType | No | Android/IOS | Yes |
+| email | Whether to link emails (`mailto:{email}`). | boolean | No | Android/IOS | Yes |
+| hashtag | Whether to link hashtags to supplied service. Possible values: `false` (disabled), `"facebook"`, `"instagram"`, `"twitter"`. | boolean or string | No | Android/IOS | Yes |
+| linkProps | Attributes applied to link Text components. | TextProps | No | Android/IOS | Yes |
+| linkStyle | Styles applied to link Text components. _Note:_ Will be overriden if `style` supplied in [`linkProps`](https://github.com/joshswan/react-native-autolink#linkprops). | TextStyle | No | Android/IOS | Yes |
+| matchers | Array of custom matcher objects with optional press handlers, styling, and text/url extraction. | CustomMatcher[] | No | Android/IOS | Yes |
+| mention | Whether to link mentions/handles to supplied service. Possible values: `false` (disabled), `"instagram"`, `"soundcloud"`, `"twitter"`. | boolean or string | No | Android/IOS | Yes |
+| onPress | Override default link press behavior. Signature: `(url: string, match: Match) => void`. | function | No | Android/IOS | Yes |
+| onLongPress | Handle link long press events. Signature: `(url: string, match: Match) => void`. | function | No | Android/IOS | Yes |
+| phone | Whether to link phone numbers. Possible values: `false` (disabled), `true` (`tel:{number}`), `"sms"` or `"text"` (`sms:{number}`). | boolean or string | No | Android/IOS | Yes |
+| renderLink | Override default link rendering behavior. Signature: `(text: string, match: Match, index: number) => React.ReactNode`. | function | No | Android/IOS | Yes |
+| renderText | Override default text rendering behavior. Signature: `(text: string, index: number) => React.ReactNode`. | function | No | Android/IOS | Yes |
+| showAlert | Whether to display an alert before leaving the app (for privacy or accidental clicks). | boolean | No | Android/IOS | Yes |
+| stripPrefix | Whether to strip protocol from URL link text (e.g. `https://github.com` -> `github.com`). | boolean | No | Android/IOS | Yes |
+| stripTrailingSlash | Whether to strip trailing slashes from URL link text (e.g. `github.com/` -> `github.com`). | boolean | No | Android/IOS | Yes |
+| text | The string to parse for links. | string | Yes | Android/IOS | Yes |
+| textProps | Attributes applied to non-link Text components. | TextProps | No | Android/IOS | Yes |
+| truncate | Maximum length of URL link text. Possible values: `0` (disabled), `1+` (maximum length). | number | No | Android/IOS | Yes |
+| truncateChars | Characters to replace truncated URL link text segments with (e.g. `github.com/../repo`) | string | No | Android/IOS | Yes |
+| truncateLocation | Override truncation location. Possible values: `"smart"`, `"end"`, `"middle"`. | string | No | Android/IOS | Yes |
+| url | Whether to link URLs. Possible values: `false` (disabled), `true`, `UrlConfig` (see below). | boolean or object | No | Android/IOS | Yes |
+| useNativeSchemes | Whether to use native app schemes (e.g. `twitter://`) rather than web URLs when linking to services for hashtag and mention links. | boolean | No | Android/IOS | Yes |
+
+## Known Issues
+
+## Others
+
+## License
+
+This project is licensed under [The MIT License](https://github.com/joshswan/react-native-autolink/blob/master/LICENSE).
diff --git a/en/react-native-autocomplete-input.md b/en/react-native-autocomplete-input.md
index 793a420863972b649ba67b5df651aee7c44633ae..5dbf5b40a0d9f2530f049b3143c7dd2b2a2f74e3 100644
--- a/en/react-native-autocomplete-input.md
+++ b/en/react-native-autocomplete-input.md
@@ -1,5 +1,6 @@
-> 模板版本：v0.2.2
+
+> Template version: v0.2.2
react-native-autocomplete-input
@@ -14,12 +15,13 @@
+> [!TIP] [ GitHub address](https://github.com/byteburgers/react-native-autocomplete-input)
-> [!TIP] [Github 地址](https://github.com/byteburgers/react-native-autocomplete-input)
+## Installation and Usage
-## 安装与使用
-进入到工程目录并输入以下命令：
+
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -35,152 +37,163 @@ yarn add react-native-autocomplete-input@5.4.0
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```js
-import React, { Component } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity} from 'react-native';
-import AutocompleteInput from 'react-native-autocomplete-input';
-
+import React, { Component } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import AutocompleteInput from "react-native-autocomplete-input";
const styles = StyleSheet.create({
- containerStyle: {
- borderColor: "#e0494e",
- borderWidth: 5,
- borderRadius: 15,
- width: '100%'
- },
- inputContainerStyle: {
- borderWidth: 3,
- borderColor: "green",
-
- },
- listContainerStyle: {
- backgroundColor: "yellow"
- },
- itemText: {
- paddingTop: 10,
- paddingBottom: 10,
-
- },
-
+ containerStyle: {
+ borderColor: "#e0494e",
+ borderWidth: 5,
+ borderRadius: 15,
+ width: "100%",
+ },
+ inputContainerStyle: {
+ borderWidth: 3,
+ borderColor: "green",
+ },
+ listContainerStyle: {
+ backgroundColor: "yellow",
+ },
+ itemText: {
+ paddingTop: 10,
+ paddingBottom: 10,
+ },
});
interface AutocompleteItem {
- id: number;
- value: string;
+ id: number;
+ value: string;
}
-const testArray: AutocompleteItem[] = [{ id: 1, value: 'Aabbbbbbb' }, { id: 2, value: 'BBFFFFF' }, { id: 3, value: 'ccccccbbb' }]
+const testArray: AutocompleteItem[] = [
+ { id: 1, value: "Aabbbbbbb" },
+ { id: 2, value: "BBFFFFF" },
+ { id: 3, value: "ccccccbbb" },
+];
function filterData(query: string): AutocompleteItem[] {
- if (query) {
- const filteredItems = testArray.filter(item => item.value.toLowerCase().includes(query.toLowerCase()));
- return filteredItems;
- } else {
- return [];
- }
+ if (query) {
+ const filteredItems = testArray.filter((item) =>
+ item.value.toLowerCase().includes(query.toLowerCase())
+ );
+ return filteredItems;
+ } else {
+ return [];
+ }
}
function compare(selectName: string, value: string): boolean {
- return selectName === value;
+ return selectName === value;
}
class App extends Component {
- state = {
- query: '',
- isVisible: true,
- selectName: ''
- };
-
- render() {
- const { query, isVisible } = this.state;
- const data = filterData(query);
- return (
-
- {
-
- if (text.trim() !== this.state.selectName.trim()) {
- this.setState({
- isVisible: false,
- selectName: text
- });
- } else {
- this.setState({
- isVisible: false,
- selectName: text
- });
- }
- this.setState({ query: text});
- console.log("--------onChangeText--++++isVisible:" + isVisible)
- }}
-
- onShowResults={() => { console.log("--------+++++++++ onShowResults "); }}
-
- hideResults={isVisible}
-
- flatListProps={{
- keyExtractor: (_, idx) => String(idx),
- keyboardShouldPersistTaps: 'always',
- renderItem: ({ item }) => {
- return (
- {
- this.setState({ query: item.value, isVisible: true, selectName: item.value });
- console.log("--------onPress--++++isVisible:" + isVisible)
- }}>
- {item.value}
-
- )
- },
- }}
- />
-
- );
- }
+ state = {
+ query: "",
+ isVisible: true,
+ selectName: "",
+ };
+
+ render() {
+ const { query, isVisible } = this.state;
+ const data = filterData(query);
+ return (
+
+ {
+ if (text.trim() !== this.state.selectName.trim()) {
+ this.setState({
+ isVisible: false,
+ selectName: text,
+ });
+ } else {
+ this.setState({
+ isVisible: false,
+ selectName: text,
+ });
+ }
+ this.setState({ query: text });
+ console.log("--------onChangeText--++++isVisible:" + isVisible);
+ }}
+ onShowResults={() => {
+ console.log("--------+++++++++ onShowResults ");
+ }}
+ hideResults={isVisible}
+ flatListProps={{
+ keyExtractor: (_, idx) => String(idx),
+ keyboardShouldPersistTaps: "always",
+ renderItem: ({ item }) => {
+ return (
+ {
+ this.setState({
+ query: item.value,
+ isVisible: true,
+ selectName: item.value,
+ });
+ console.log("--------onPress--++++isVisible:" + isVisible);
+ }}
+ >
+ {item.value}
+
+ );
+ },
+ }}
+ />
+
+ );
+ }
}
-
-
export default App;
```
-## 约束与限制
-### 兼容性
+## Constraints
-本文档内容基于以下版本验证通过：
+### Compatibility
-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;
+This document is verified based on the following versions:
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
-## 属性
-> [!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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- |
-| containerStyle | These styles will be applied to the container which surrounds the autocomplete component. | style | no | Android/iOS | yes |
-| hideResults | Set to `true` to hide the suggestion list. | bool | no | Android/iOS | yes |
+> [!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 |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| containerStyle | These styles will be applied to the container which surrounds the autocomplete component. | style | no | Android/iOS | yes |
+| hideResults | Set to `true` to hide the suggestion list. | bool | no | Android/iOS | yes |
| data | An array with suggestion items to be rendered in `renderItem({ item, i })`. Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. | array | no | Android/iOS | yes |
-| inputContainerStyle | These styles will be applied to the container which surrounds the textInput component. | style | no | Android/iOS | yes |
-| listContainerStyle | These styles will be applied to the container which surrounds the result list. | style | no | Android/iOS | yes |
-| onShowResults | will be called when the autocomplete suggestions appear or disappear. | function | no | Android/iOS | yes |
-| renderTextInput | render custom TextInput. All props passed to this function. | function | no | Android/iOS | yes |
-| flatListProps | custom props to FlatList. | object | no | Android/iOS | yes |
-| renderResultList | render custom result list. Can be used to replace FlatList. All props passed to this function. | function | no | Android/iOS | yes |
+| inputContainerStyle | These styles will be applied to the container which surrounds the textInput component. | style | no | Android/iOS | yes |
+| listContainerStyle | These styles will be applied to the container which surrounds the result list. | style | no | Android/iOS | yes |
+| onShowResults | will be called when the autocomplete suggestions appear or disappear. | function | no | Android/iOS | yes |
+| renderTextInput | render custom TextInput. All props passed to this function. | function | no | Android/iOS | yes |
+| flatListProps | custom props to FlatList. | object | no | Android/iOS | yes |
+| renderResultList | render custom result list. Can be used to replace FlatList. All props passed to this function. | function | no | Android/iOS | yes |
+
+## Known Issues
-## 遗留问题
+## Others
-## 其他
+## License
-## 开源协议
+This project is licensed under [The MIT License (MIT)](https://github.com/byteburgers/react-native-autocomplete-input/blob/main/LICENSE).
-本项目基于 [The MIT License (MIT)](https://github.com/byteburgers/react-native-autocomplete-input/blob/main/LICENSE) ，请自由地享受和参与开源。
-
\ No newline at end of file
+
diff --git a/en/react-native-awesome-gallery.md b/en/react-native-awesome-gallery.md
index 5ac5a65b53c94f138b015daddb9c055f70e83085..59aca600d9b1c953a813948a77883bf924532472 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';
@@ -66,25 +66,25 @@ export default function App() {
## Link
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@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)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md) to add it to your project.
-## 约束与限制
+## 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 42e9b6ab05f0801d63e1156c32ea14069eb4ed39..8d90583f6281a867c218351c428f5d482b80f46a 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](/en/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](/en/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，用以实现延迟任务回调接口。
@@ -277,12 +274,10 @@ import { workScheduler } from "@kit.BackgroundTasksKit";
import RNBackgroundFetchExtensionAbility from "@react-native-oh-tpl/react-native-background-fetch/src/main/ets/WorkSchedulerExtension/WorkSchedulerExtension";
export default class MyWorkSchedulerExtensionAbility extends RNBackgroundFetchExtensionAbility {
- // 延迟任务开始回调
onWorkStart(workInfo: workScheduler.WorkInfo) {
super.onWorkStart(workInfo);
}
- // 延迟任务结束回调
onWorkStop(workInfo: workScheduler.WorkInfo) {
super.onWorkStop(workInfo);
}
@@ -305,34 +300,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 +417,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-barcode-builder.md b/en/react-native-barcode-builder.md
index a2e8b37a11b5227e4372b4363e1c9c0ca704b697..7be6793d33c8775119aeae2ef402d80e2ec81b76 100644
--- a/en/react-native-barcode-builder.md
+++ b/en/react-native-barcode-builder.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-barcode-builder
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-barcode-builder)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-barcode-builder)
-## 安装与使用
+## Installation and Usage
-1、请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/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-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/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-barcode-builder@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 } from "react";
@@ -76,27 +76,27 @@ export const BarcodeBuilderExample = () => {
## Link
-本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg docs](/en/react-native-svg-capi.md) to add it to your project.
-## 约束与限制
+## 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-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder)
-## 属性
+## Properties
### Barcode
-> [!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.
-该库为 UI 组件库，通过配置属性标签，实现对应的功能。
+该库为 UI 组件库，通过配置 Properties 标签，实现对应的功能。
| Name | Type | Description | Required | Platform | HarmonyOS Support |
| ---------- | -------- | ------------------------------------------------------------------------------------------------ | -------- | ----------- | ----------------- |
@@ -110,6 +110,6 @@ export const BarcodeBuilderExample = () => {
| background | string | Background color of the barcode. | no | iOS/Android | yes |
| onError | function | Handler for invalid barcode of selected format. | no | iOS/Android | yes |
-## 开源协议
+## License
-本项目基于 [The Apache License (Apache)](https://github.com/wonsikin/react-native-barcode-builder/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The Apache License (Apache)](https://github.com/wonsikin/react-native-barcode-builder/blob/master/LICENSE).
diff --git a/en/react-native-bars.md b/en/react-native-bars.md
index d18c204337cbb70cfff3cfd112e935571868362a..b08e784194aded7163e357b89c8ba1c423000fd5 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
-
+
+ close dark-content/ open 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](/en/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](/en/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 fa99ff26513fc1067ad56e5bab34e63dccdf68bf..72162f1f6dcb2d6c2d1d591da6c561d09f935157 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';
@@ -139,14 +137,14 @@ export default function BleManagerDemo() {
}}>
- {
+ {
ReactNativeBleManager.retrieveServices(item.id, ['00001888-0000-1000-8000-00805F9B34FB'])
}}>
{
const list = await ReactNativeBleManager.getBondedPeripherals()
- console.log('返回已绑定的设备' + JSON.stringify(list))
+ console.log('returns bound devices' + JSON.stringify(list))
}}>
@@ -163,12 +161,12 @@ export default function BleManagerDemo() {
}}>
- {
+ {
ReactNativeBleManager.write(item.id, '00001888-0000-1000-8000-00805F9B34FB', '00001820-0000-1000-8000-00805F9B34FB', [1])
}}>
- {
+ {
ReactNativeBleManager.writeDescriptor(item.id, '00001888-0000-1000-8000-00805F9B34FB', '00001820-0000-1000-8000-00805F9B34FB', '00002902-0000-1000-8000-00805F9B34FB', [1])
}}>
@@ -226,7 +224,7 @@ export default function BleManagerDemo() {
{
ReactNativeBleManager.removeBond(item.id).then(() => {
- Alert.alert('此接口为系统接口，三方库无法调用')
+ Alert.alert('the interface is system interface and cannot be called by third-party libraries')
})
}}>
@@ -240,7 +238,7 @@ export default function BleManagerDemo() {
BleManager
-
+
{
@@ -429,17 +427,17 @@ const styles = StyleSheet.create({
});
```
-## 使用 Codegen
+## Use Codegen
-本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/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](/en/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
{
@@ -450,22 +448,19 @@ 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` 文件夹下。
+Open `entry/oh-package.json5` file and add the following dependencies:
-打开 `entry/oh-package.json5`，添加以下依赖
+> [!TIP] 因本库需要两台手机去进行对端扫描和连接，所以两台手机各装一个 har 包编译（`ble_managerGatt.har` 和 `ble_managerServers.har`）
->[!TIP] 因本库需要两台手机去进行对端扫描和连接，所以两台手机各装一个har包编译（`ble_managerGatt.har` 和 `ble_managerServers.har`）
-
-第一台手机：`ble_managerGatt.har`
+the first mobile phone: `ble_managerGatt.har`
```json
"dependencies": {
@@ -474,7 +469,7 @@ const styles = StyleSheet.create({
}
```
-第二台手机：`ble_managerServers.har`
+the second mobile phone: `ble_managerServers.har`
```json
"dependencies": {
@@ -483,22 +478,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 BlePackage
+### 3. Introducing BlePackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -513,98 +508,97 @@ 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-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases)
-### 权限要求
+### Permission Requirements
-- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在entry/src/main目录下module.json5文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。
+- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在 entry/src/main 目录下 module.json5 文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/en/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/en/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。
-- 此库部分功能与接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH。
+- 此库部分功能与接口需要 normal 权限：ohos.permission.ACCESS_BLUETOOTH。
## 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 | Required | Platform | HarmonyOS Support |
-| -------------------------------------------- | ------------------------------------------------------------ | -------- | ----------- | ----------------- |
-| start | Init the module. Returns a `Promise` object. Don’t call this multiple times. | No | IOS/Android | Yes |
-| scan | Scan for available peripherals | No | IOS/Android | Yes |
-| stopScan | Stop the scanning | No | IOS/Android | yes |
+| Name | Description | Required | Platform | HarmonyOS Support |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
+| start | Init the module. Returns a `Promise` object. Don’t call this multiple times. | No | IOS/Android | Yes |
+| scan | Scan for available peripherals | No | IOS/Android | Yes |
+| stopScan | Stop the scanning | No | IOS/Android | yes |
| connect | Attempts to connect to a peripheral. In many case if you can’t connect you have to scan for the peripheral before | No | IOS/Android | Yes |
-| disconnect | Disconnect from a peripheral | No | IOS/Android | Yes |
-| enableBluetooth | Create the ACTION_REQUEST_ENABLE to ask the user to activate the bluetooth | No | Android | Yes |
-| checkState | Force the module to check the state of the native BLE manager and trigger a BleManagerDidUpdateState event | No | IOS/Android | Yes |
-| readRSSI | Read the current value of the RSSI | No | IOS/Android | Yes |
-| createBond | Start the bonding (pairing) process with the remote device | No | Android | Yes |
-| retrieveServices | Retrieve the peripheral’s services and characteristics | No | IOS/Android | Yes |
-| startNotification | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
-| read | Read the current value of the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
-| write | Write with response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
-| readDescriptor | Read the current value of the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
-| writeDescriptor | Write a value to the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
-| requestMTU | Request an MTU size used for a given connection | No | Android | Yes |
-| getConnectedPeripherals | Return the connected peripherals | No | IOS/Android | Yes |
-| getBondedPeripherals | Return the bonded peripherals | No | IOS/Android | Yes |
-| getDiscoveredPeripherals | Return the discovered peripherals after a scan | No | IOS/Android | Yes |
-| removeBond | Remove a paired device | No | Android | No |
-| refreshCache | refreshes the peripheral’s services and characteristics cache Returns a `Promise` object. | No | Android | No |
-| requestConnectionPriority | Request a connection parameter update | No | Android | No |
-| startNotificationUseBuffer | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | Android | No |
-| removePeripheral | Removes a disconnected peripheral from the cached list | No | Android | Yes |
-| CompanionScan | Scan for companion devices | No | Android | No |
-| getAssociatedPeripherals | Retrive associated peripherals (from companion manager) | No | Android | No |
-| removeAssociatedPeripheral | Remove a associated peripheral | No | Android | No |
-| setName | Create the request to set the name of the bluetooth adapter | No | Android | No |
-| isScanning | Checks whether the scan is in progress and return `true` or `false` | No | IOS/Android | Yes |
-| writeWithoutResponse | Write without response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | No |
-| getMaximumWriteValueLengthForWithoutResponse | Return the maximum value length for WriteWithoutResponse | No | IOS | No |
-| getMaximumWriteValueLengthForWithResponse | Return the maximum value length for WriteWithResponse | No | IOS | No |
-| isPeripheralConnected | Check whether a specific peripheral is connected and return `true` or `false` | No | IOS | Yes |
-| supportsCompanion | Check if current device supports companion device manager | No | Android | No |
-| stopNotification | Stop the notification on the specified characteristic | No | IOS/Android | No |
-
-## 遗留问题
+| disconnect | Disconnect from a peripheral | No | IOS/Android | Yes |
+| enableBluetooth | Create the ACTION_REQUEST_ENABLE to ask the user to activate the bluetooth | No | Android | Yes |
+| checkState | Force the module to check the state of the native BLE manager and trigger a BleManagerDidUpdateState event | No | IOS/Android | Yes |
+| readRSSI | Read the current value of the RSSI | No | IOS/Android | Yes |
+| createBond | Start the bonding (pairing) process with the remote device | No | Android | Yes |
+| retrieveServices | Retrieve the peripheral’s services and characteristics | No | IOS/Android | Yes |
+| startNotification | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
+| read | Read the current value of the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
+| write | Write with response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
+| readDescriptor | Read the current value of the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
+| writeDescriptor | Write a value to the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes |
+| requestMTU | Request an MTU size used for a given connection | No | Android | Yes |
+| getConnectedPeripherals | Return the connected peripherals | No | IOS/Android | Yes |
+| getBondedPeripherals | Return the bonded peripherals | No | IOS/Android | Yes |
+| getDiscoveredPeripherals | Return the discovered peripherals after a scan | No | IOS/Android | Yes |
+| removeBond | Remove a paired device | No | Android | No |
+| refreshCache | refreshes the peripheral’s services and characteristics cache Returns a `Promise` object. | No | Android | No |
+| requestConnectionPriority | Request a connection parameter update | No | Android | No |
+| startNotificationUseBuffer | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | Android | No |
+| removePeripheral | Removes a disconnected peripheral from the cached list | No | Android | Yes |
+| CompanionScan | Scan for companion devices | No | Android | No |
+| getAssociatedPeripherals | Retrive associated peripherals (from companion manager) | No | Android | No |
+| removeAssociatedPeripheral | Remove a associated peripheral | No | Android | No |
+| setName | Create the request to set the name of the bluetooth adapter | No | Android | No |
+| isScanning | Checks whether the scan is in progress and return `true` or `false` | No | IOS/Android | Yes |
+| writeWithoutResponse | Write without response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | No |
+| getMaximumWriteValueLengthForWithoutResponse | Return the maximum value length for WriteWithoutResponse | No | IOS | No |
+| getMaximumWriteValueLengthForWithResponse | Return the maximum value length for WriteWithResponse | No | IOS | No |
+| isPeripheralConnected | Check whether a specific peripheral is connected and return `true` or `false` | No | IOS | Yes |
+| supportsCompanion | Check if current device supports companion device manager | No | Android | No |
+| stopNotification | Stop the notification on the specified characteristic | No | IOS/Android | No |
+
+## Known Issues
- [ ] refreshCache 用于清理和刷新蓝牙设备缓存的一部分 [issue#3](https://github.com/react-native-oh-library/react-native-ble-manager/issues/3)
- [ ] requestConnectionPriority 用于请求蓝牙连接优先级 [issue#4](https://github.com/react-native-oh-library/react-native-ble-manager/issues/4)
- [ ] startNotificationUseBuffer 用来启动一个带缓冲区的通知服务 [issue#6](https://github.com/react-native-oh-library/react-native-ble-manager/issues/6)
- [ ] CompanionScan 扫描配套设备[issue#5](https://github.com/react-native-oh-library/react-native-ble-manager/issues/5)
- [ ] getAssociatedPeripherals 检索相关外围设备（从配套管理器） [issue#7](https://github.com/react-native-oh-library/react-native-ble-manager/issues/7)
-- [ ] removeAssociatedPeripheral 移除相关外围设备 [issue#8](https://github.com/react-native-oh-library/react-native-ble-manager/issues/8)
-- [ ] setName 创建设置蓝牙适配器名称 [issue#9](https://github.com/react-native-oh-library/react-native-ble-manager/issues/9)
+- [ ] removeAssociatedPeripheral 移除相关外围设备 [issue#8](https://github.com/react-native-oh-library/react-native-ble-manager/issues/8)
+- [ ] setName 创建设置蓝牙适配器名称 [issue#9](https://github.com/react-native-oh-library/react-native-ble-manager/issues/9)
- [ ] supportsCompanion 检查当前设备是否支持配套设备管理器 [issue#10](https://github.com/react-native-oh-library/react-native-ble-manager/issues/10)
- [ ] stopNotification 停止指定特征的通知 [issue#11](https://github.com/react-native-oh-library/react-native-ble-manager/issues/11)
- [ ] writeWithoutResponse 写入不响应指定特性 [issue#12](https://github.com/react-native-oh-library/react-native-ble-manager/issues/12)
- [ ] removeBond 删除已配对的设备 [issue#13](https://github.com/react-native-oh-library/react-native-ble-manager/issues/13)
- [ ] getMaximumWriteValueLengthForWithoutResponse 用于获取在不带响应的情况下可以写入的最大数据长度 [issue#14](https://github.com/react-native-oh-library/react-native-ble-manager/issues/14)
-- [ ] getMaximumWriteValueLengthForWithResponse 它用于获取在带有响应的情况下可以写入的最大数据长度 [issue#15](https://github.com/react-native-oh-library/react-native-ble-manager/issues/15)
+- [ ] getMaximumWriteValueLengthForWithResponse 它用于获取在带有响应的情况下可以写入的最大数据长度 [issue#15](https://github.com/react-native-oh-library/react-native-ble-manager/issues/15)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于[The MIT License (MIT)](https://github.com/innoveit/react-native-ble-manager/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under[The MIT License (MIT)](https://github.com/innoveit/react-native-ble-manager/blob/master/LICENSE).
-
diff --git a/en/react-native-compass-heading.md b/en/react-native-compass-heading.md
index 5d3ed3772bb9112b8310b298d905013852b3713b..7be12877277e6258a2a6102740ec0643f701a470 100644
--- a/en/react-native-compass-heading.md
+++ b/en/react-native-compass-heading.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-compass-heading
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-compass-heading)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-compass-heading)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-compass-heading Releases](https://github.com/react-native-oh-library/react-native-compass-heading/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-compass-heading Releases](https://github.com/react-native-oh-library/react-native-compass-heading/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-compass-heading@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";
@@ -97,17 +97,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](/en/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
{
@@ -118,18 +118,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": {
@@ -138,22 +135,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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNCompassHeadingPackage
+### 3. Introducing RNCompassHeadingPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -167,32 +164,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-compass-heading Releases](https://github.com/react-native-oh-library/react-native-compass-heading/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-compass-heading Releases](https://github.com/react-native-oh-library/react-native-compass-heading/releases)
-## 静态方法
+## Static Methods
-> [!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 |
| ----- | ------------- | ----------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -206,10 +203,10 @@ ohpm install
| degree_update_rate | compass refresh frequency | number | yes | Android/iOS | yes |
| callback | compass callback | ({heading: number;accuracy: number;}) => void | yes | Android/iOS | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/firofame/react-native-compass-heading/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/firofame/react-native-compass-heading/blob/master/LICENSE).
diff --git a/en/react-native-confetti-cannon.md b/en/react-native-confetti-cannon.md
index 46c82e195d3cd6d33be5f50ea43dce5647464291..51e549e0b4b3c2e1d262ce185e1c1a01ed0311b9 100644
--- a/en/react-native-confetti-cannon.md
+++ b/en/react-native-confetti-cannon.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-confetti-cannon
@@ -13,11 +13,11 @@
-> [!TIP] [Github 地址](https://github.com/VincentCATILLON/react-native-confetti-cannon)
+> [!TIP] [ GitHub address](https://github.com/VincentCATILLON/react-native-confetti-cannon)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -35,84 +35,79 @@ yarn add react-native-confetti-cannon@1.5.2
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
#### Using a Component
```js
-import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import ConfettiCannon from 'react-native-confetti-cannon';
+import * as React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import ConfettiCannon from "react-native-confetti-cannon";
export default function ConfettiCannonExample() {
-
return (
-
-
+
- )
+ );
}
```
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.27; OH SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio: 5.0.3.400; ROM: 3.0.0.25;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-
-## 属性
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-> [!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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| count | items count to display | number | yes | iOS,Android,Web | yes |
-| origin | animation position origin | {x: number, y: number} | yes | iOS,Android,Web | yes |
-| explosionSpeed | explosion duration (ms) from origin to top | number | no | iOS,Android,Web | yes |
-| fallSpeed | fall duration (ms) from top to bottom | number | no | iOS,Android,Web | yes |
-| fadeOut | make the confettis disappear at the end | boolean | no | iOS,Android,Web | yes |
-| colors | give your own colors to the confettis | string[] | no | iOS,Android,Web | yes |
-| autoStart | auto start the animation | boolean | no | iOS,Android,Web | yes |
-| autoStartDelay | delay to wait before triggering animation | number | no | iOS,Android,Web | yes |
+> [!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 |
+| -------------- | ------------------------------------------ | ---------------------- | -------- | --------------- | ----------------- |
+| count | items count to display | number | yes | iOS,Android,Web | yes |
+| origin | animation position origin | {x: number, y: number} | yes | iOS,Android,Web | yes |
+| explosionSpeed | explosion duration (ms) from origin to top | number | no | iOS,Android,Web | yes |
+| fallSpeed | fall duration (ms) from top to bottom | number | no | iOS,Android,Web | yes |
+| fadeOut | make the confettis disappear at the end | boolean | no | iOS,Android,Web | yes |
+| colors | give your own colors to the confettis | string[] | no | iOS,Android,Web | yes |
+| autoStart | auto start the animation | boolean | no | iOS,Android,Web | yes |
+| autoStartDelay | delay to wait before triggering animation | number | no | iOS,Android,Web | 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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| onAnimationStart | callback triggered at animation start | Function | no | iOS,Android,Web | yes |
-| onAnimationResume | callback triggered at animation resume | Function | no | iOS,Android,Web | yes |
-| onAnimationStop | callback triggered at animation stop | Function | no | iOS,Android,Web | yes |
-| onAnimationEnd | callback triggered at animation end | Function | no | iOS,Android,Web | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | -------------------------------------- | -------- | -------- | --------------- | ----------------- |
+| onAnimationStart | callback triggered at animation start | Function | no | iOS,Android,Web | yes |
+| onAnimationResume | callback triggered at animation resume | Function | no | iOS,Android,Web | yes |
+| onAnimationStop | callback triggered at animation stop | Function | no | iOS,Android,Web | yes |
+| onAnimationEnd | callback triggered at animation end | Function | no | iOS,Android,Web | yes |
-## 静态方法
+## Static Methods
-> [!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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| start | start the animation programmatically | Function | no | iOS,Android,Web | yes |
-| resume | resume the animation programmatically | Function | no | iOS,Android,Web | yes |
-| stop | stop the animation programmatically | Function | no | iOS,Android,Web | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------- | -------- | -------- | --------------- | ----------------- |
+| start | start the animation programmatically | Function | no | iOS,Android,Web | yes |
+| resume | resume the animation programmatically | Function | no | iOS,Android,Web | yes |
+| stop | stop the animation programmatically | Function | no | iOS,Android,Web | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/VincentCATILLON/react-native-confetti-cannon/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/VincentCATILLON/react-native-confetti-cannon/blob/master/LICENSE).
diff --git a/en/react-native-copilot.md b/en/react-native-copilot.md
index 742e38f8c6705d7d1ec41872b4e7bd9e44271734..82dc3a83122bb254ff456a85d884ef4d688b69d4 100644
--- a/en/react-native-copilot.md
+++ b/en/react-native-copilot.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-copilot
@@ -13,12 +13,13 @@
+> [!TIP] [ GitHub address](https://github.com/mohebifar/react-native-copilot)
-> [!TIP] [Github 地址](https://github.com/mohebifar/react-native-copilot)
+## Installation and Usage
-## 安装与使用
-进入到工程目录并输入以下命令：
+
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -34,7 +35,7 @@ yarn add react-native-copilot@3.3.2
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```js
import React, { useEffect, useState } from "react";
@@ -93,7 +94,7 @@ function App() {
name="secondText"
>
-
+
+
-
+
+
+
+
+
+
+
);
@@ -145,8 +160,8 @@ const styles = StyleSheet.create({
imageView: {
width: 50,
height: 50,
- justifyContent: 'space-evenly',
- alignItems: 'center'
+ justifyContent: "space-evenly",
+ alignItems: "center",
},
container: {
flex: 1,
@@ -179,7 +194,7 @@ const styles = StyleSheet.create({
},
row: {
flexDirection: "row",
- alignItems: 'center',
+ alignItems: "center",
justifyContent: "space-between",
},
tabItem: {
@@ -198,26 +213,28 @@ const styles = StyleSheet.create({
},
});
```
+
## Link
-本库在HarmonyOS NEXT侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在HarmonyOS NEXT工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-svg-capi.md#link) to add it to your project.
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
-## 属性
-详细请查看 [react-native-copilot](https://github.com/mohebifar/react-native-copilot/blob/master/README.md) 的文档介绍
+## Properties
+
+For details, see [react-native-copilot](https://github.com/mohebifar/react-native-copilot/blob/master/README.md) 的文档介绍
-> [!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 |
| --------------- | --------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -229,10 +246,10 @@ RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400
| useCopilot | Use Prompt Style | function | no | Android/iOS | yes |
| walkthroughable | Wrappable Components | function | no | Android/iOS | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/mohebifar/react-native-copilot/blob/master/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/mohebifar/react-native-copilot/blob/master/LICENSE).
diff --git a/en/react-native-default-preference.md b/en/react-native-default-preference.md
index 2ea3ed322ab742f7cc4d06595518c3c3dd2c1c91..125ceab49adb095ab75534cd0842c2c1fca817e7 100644
--- a/en/react-native-default-preference.md
+++ b/en/react-native-default-preference.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-default-preference
@@ -12,18 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-default-preference)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-default-preference)
+## 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-default-preference Releases](https://github.com/react-native-oh-library/react-native-default-preference/releases).
-## 安装与使用
+Go to the project directory and execute the following instruction:
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-default-preference Releases](https://github.com/react-native-oh-library/react-native-default-preference/releases)，并下载适用版本的 tgz 包。
-
-
-进入到工程目录并输入以下命令：
-
-> [!TIP] # 处替换为 tgz 包的路径
+> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#).
@@ -41,47 +38,57 @@ yarn add @react-native-oh-tpl/react-native-default-preference@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";
import { Text, View } from "react-native";
-import DefaultPreference from 'react-native-default-preference';
+import DefaultPreference from "react-native-default-preference";
const App = () => {
- const handleSetItem = useCallback((key: string, value: string) => {
- RNDefaultPreference.set(key, value)
- }, []);
-
- const handleGetItem = useCallback((key: string) => {
- RNDefaultPreference?.get(key).then(res => {
- console.log(res)
- });
- }, []);
+ const handleSetItem = useCallback((key: string, value: string) => {
+ RNDefaultPreference.set(key, value);
+ }, []);
+
+ const handleGetItem = useCallback((key: string) => {
+ RNDefaultPreference?.get(key).then((res) => {
+ console.log(res);
+ });
+ }, []);
return (
-
- { handleSetItem('key1', 'value1') }} title={'Add item using setItem'}>
- { handleGetItem('key1') }} title={'Add item using setItem'}>
-
+
+ {
+ handleSetItem("key1", "value1");
+ }}
+ title={"Add item using setItem"}
+ >
+ {
+ handleGetItem("key1");
+ }}
+ title={"Add item using setItem"}
+ >
+
);
};
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](/en/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
{
@@ -92,18 +99,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": {
@@ -112,23 +116,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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
+### 3. Introducing RNDefaultPreferencePackage to ArkTS
-### 3.在 ArkTs 侧引入 RNDefaultPreferencePackage
-
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -143,53 +146,51 @@ 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 配套的版本信息：
+Check the release version information in the release address of the third-party library:
[@react-native-oh-tpl/react-native-default-preference Releases](https://github.com/react-native-oh-library/react-native-default-preference/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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| get | Take out key-value pairs | function | yes | Android、iOS | yes |
-| set | Set key-value pairs | function | yes | Android、iOS | yes |
-| clear | Clear key-value pairs | function | yes | Android、iOS | yes |
-| getMultiple | Take out multiple key-value pairs | function | yes | Android、iOS | yes |
-| setMultiple | Set multiple key-value pairs | function | yes | Android、iOS | yes |
-| clearMultiple | Clear multiple key-value pairs | function | yes | Android、iOS | yes |
-| getAll | Take out all key-value pairs | function | no | Android、iOS | yes |
-| clearAll | Clear all key-value pairs | function | no | Android、iOS | yes |
-| getName | Gets the name of the Preferences instance. | function | no | Android、iOS | yes |
-| setName | Sets the name of the Preferences instance. | function | yes | Android、iOS | yes |
+> [!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 |
+| ------------- | ------------------------------------------ | -------- | -------- | ------------ | ----------------- |
+| get | Take out key-value pairs | function | yes | Android、iOS | yes |
+| set | Set key-value pairs | function | yes | Android、iOS | yes |
+| clear | Clear key-value pairs | function | yes | Android、iOS | yes |
+| getMultiple | Take out multiple key-value pairs | function | yes | Android、iOS | yes |
+| setMultiple | Set multiple key-value pairs | function | yes | Android、iOS | yes |
+| clearMultiple | Clear multiple key-value pairs | function | yes | Android、iOS | yes |
+| getAll | Take out all key-value pairs | function | no | Android、iOS | yes |
+| clearAll | Clear all key-value pairs | function | no | Android、iOS | yes |
+| getName | Gets the name of the Preferences instance. | function | no | Android、iOS | yes |
+| setName | Sets the name of the Preferences instance. | function | yes | Android、iOS | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/kevinresol/react-native-default-preference/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/kevinresol/react-native-default-preference/blob/master/LICENSE).
diff --git a/en/react-native-dismiss-keyboard.md b/en/react-native-dismiss-keyboard.md
index c52d90c74ac82abf9d5362b5a648c5dea37f6ff7..9d580cbd66710365643987b7fff542e4fa22223e 100644
--- a/en/react-native-dismiss-keyboard.md
+++ b/en/react-native-dismiss-keyboard.md
@@ -1,5 +1,6 @@
-> 模板版本：v0.2.0
+
+> Template version: v0.2.0
react-native-dismiss-keyboard
@@ -13,13 +14,11 @@
-> [!TIP] [Github 地址](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard)
-
+> [!TIP] [GitHub address](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard)
-## 安装与使用
-
-进入到工程目录并输入以下命令：
+## Installation and Usage
+Go to the project directory and execute the following instruction:
@@ -37,126 +36,126 @@ yarn add react-native-dismiss-keyboard@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.
```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
- AppRegistry,
- StyleSheet,
- TextInput,
- View,
- Text,
- Keyboard
-} from 'react-native';
+ AppRegistry,
+ StyleSheet,
+ TextInput,
+ View,
+ Text,
+ Keyboard,
+} from "react-native";
export default class ReactNativeDismissKeyboardExample extends Component {
-
- keyboardDidShowListener = null;
- keyboardDidHideListener = null;
- state = { KeyboardShown: false };
-
- constructor(props) {
- super(props);
- this.keyboardDidShowListener = null;
- this.keyboardDidHideListener = null;
- this.state = { KeyboardShown: false };
- }
-
- //键盘弹出事件响应
- keyboardDidShowHandler(event) {
- this.setState({ KeyboardShown: true });
- console.log(event.endCoordinates.height);
- }
-
- //键盘隐藏事件响应
- keyboardDidHideHandler(event) {
- this.setState({ KeyboardShown: false });
- }
-
- //强制隐藏键盘
- dissmissKeyboard() {
- Keyboard.dismiss();
- console.log("输入框当前焦点状态：" + this.refs.bottomInput.isFocused());
- }
-
- render() {
- return (
-
-
-
- 收起键盘
-
-
-
- )
- }
+ keyboardDidShowListener = null;
+ keyboardDidHideListener = null;
+ state = { KeyboardShown: false };
+
+ constructor(props) {
+ super(props);
+ this.keyboardDidShowListener = null;
+ this.keyboardDidHideListener = null;
+ this.state = { KeyboardShown: false };
+ }
+
+ keyboardDidShowHandler(event) {
+ this.setState({ KeyboardShown: true });
+ console.log(event.endCoordinates.height);
+ }
+
+ keyboardDidHideHandler(event) {
+ this.setState({ KeyboardShown: false });
+ }
+
+ dissmissKeyboard() {
+ Keyboard.dismiss();
+ console.log("the current focus state of the input box" + this.refs.bottomInput.isFocused());
+ }
+
+ render() {
+ return (
+
+
+
+ close keyboard
+
+
+
+ );
+ }
}
const styles = StyleSheet.create({
- container: {
- flex: 1,
- paddingTop: 15,
- backgroundColor: '#ffffff'
- },
- flexDirection: {
- flexDirection: 'row'
- },
- inputHeight: {
- height: 35,
- alignItems: 'center'
- },
- textInputStyle: {
- flex: 1,
- height: 35,
- fontSize: 18,
- borderWidth: 1,
- borderColor: '#4CAF50',
- borderRadius: 8,
- marginRight: 8
- },
- buttonStyle: {
- fontSize: 20,
- color: 'white',
- width: 100,
- textAlign: 'center',
- backgroundColor: '#4CA300'
- },
+ container: {
+ flex: 1,
+ paddingTop: 15,
+ backgroundColor: "#ffffff",
+ },
+ flexDirection: {
+ flexDirection: "row",
+ },
+ inputHeight: {
+ height: 35,
+ alignItems: "center",
+ },
+ textInputStyle: {
+ flex: 1,
+ height: 35,
+ fontSize: 18,
+ borderWidth: 1,
+ borderColor: "#4CAF50",
+ borderRadius: 8,
+ marginRight: 8,
+ },
+ buttonStyle: {
+ fontSize: 20,
+ color: "white",
+ width: 100,
+ textAlign: "center",
+ backgroundColor: "#4CA300",
+ },
});
```
-## 约束与限制
-### 兼容性
+## Constraints
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 电脑ROM。
+### 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.
+
+This document is verified based on the following versions:
1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## Properties
+
+> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+| Prop | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| `addListener` | Register a JavaScript function that listens to handle native keyboard notification events. | function | no | All | yes |
+| `dismiss` | Retract the pop-up keyboard and make the current text box lose focus. | function | no | All | yes |
+| `scheduleLayoutAnimation` | Used to synchronize changes in the size or position of a TextInput (or other keyboard attachment view) with keyboard movements. | function | no | All | yes |
+| `isVisible` | Whether the keyboard is currently displayed. | function | no | All | yes |
+| `metrics` | If a soft keyboard is displayed, return the size of the soft keyboard. | function | no | All | yes |
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+## Known Issues
-| Prop | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ----- | -------- | -------- | -------- | -------- |
-| `addListener` | Register a JavaScript function that listens to handle native keyboard notification events. | function | no | All | yes |
-| `dismiss` | Retract the pop-up keyboard and make the current text box lose focus. | function | no | All | yes |
-| `scheduleLayoutAnimation` |Used to synchronize changes in the size or position of a TextInput (or other keyboard attachment view) with keyboard movements.| function | no | All | yes |
-| `isVisible` | Whether the keyboard is currently displayed.| function | no | All | yes |
-| `metrics` | If a soft keyboard is displayed, return the size of the soft keyboard.| function | no | All | yes |
+## Others
-## 遗留问题
+## License
-## 其他
+This project is licensed under [The MIT License (MIT)](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard/blob/master/LICENSE).
-## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard/blob/master/LICENSE) ，请自由地享受和参与开源。
-
\ No newline at end of file
+
diff --git a/en/react-native-email-link.md b/en/react-native-email-link.md
index 499b18c5b76d1b8378a2779762ea62797bcc05bb..030b73f14b0c9a63919a38bb27b66751c1197dbc 100644
--- a/en/react-native-email-link.md
+++ b/en/react-native-email-link.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-email-link
@@ -12,15 +12,15 @@
-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-email-link)
+> [!tip] [GitHub address](https://github.com/react-native-oh-library/react-native-email-link)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-email-link Releases](https://github.com/react-native-oh-library/react-native-email-link/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-email-link Releases](https://github.com/react-native-oh-library/react-native-email-link/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-email-link@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 } from "react";
@@ -60,7 +60,7 @@ import {
export function EmailLinkExample() {
const [emailClients, setEmailClients] = useState(
- "点击getEmailClients按钮获取邮箱信息"
+ "click button getEmailClients to get email information"
);
return (
@@ -147,17 +147,17 @@ const styles = StyleSheet.create({
});
```
-## 使用 Codegen
+## Use Codegen
-本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/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](/en/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.json` 添加 overrides 字段
+### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
```json
{
@@ -168,18 +168,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": {
@@ -188,22 +185,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNEmailLinkPackage
+### 3. Introducing RNEmailLinkPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -217,32 +214,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-email-link Releases](https://github.com/react-native-oh-library/react-native-email-link/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-email-link Releases](https://github.com/react-native-oh-library/react-native-email-link/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 |
| ----------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
@@ -250,7 +247,7 @@ ohpm install
| `openComposer` | Used to open a new email authoring interface that allows users to create emails directly from the app. | function | No | All | yes |
| `getEmailClients` | Get a list of all supported mail client applications installed on the device. | function | No | All | yes |
-**openInbox 方法参数**
+**openInbox method parameters**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
| `title` | Text for the top of the ActionSheet or Intent | string | no | All | no |
@@ -260,7 +257,7 @@ ohpm install
| `defaultEmailLabel` | Text for first button of the ActionSheet | function | no | iOS | no |
| `newTask` | If true, the email Intent will be started in a new Android task. Else, the Intent will be launched in the current task | boolean | no | Android | no |
-**openComposer 方法参数**
+**openComposer method parameters**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
| `app` | App to open the composer with| string | no | All | yes |
@@ -276,14 +273,14 @@ ohpm install
| `body` | Email's body | string | no | All | yes |
| `encodeBody` | Apply encodeURIComponent to the email's body | boolean | no | All | yes |
-## 遗留问题
+## Known Issues
-- [ ] 目前只支持 harmonyOS 系统自带邮箱，本库支持邮箱均未适配harmonyOS Next。[issues#5](https://github.com/react-native-oh-library/react-native-email-link/issues/5)
+- [ ] 目前只支持 harmonyOS 系统自带邮箱，本库支持邮箱均未适配 harmonyOS Next。[issues#5](https://github.com/react-native-oh-library/react-native-email-link/issues/5)
-## 其他
+## Others
-- title、message、cancelLabel、 removeText、defaultEmailLabel、newTask属性暂不支持，与iOS表现一致。[issue#141](https://github.com/tschoffelen/react-native-email-link/issues/141)。
+- title、message、cancelLabel、 removeText、defaultEmailLabel、newTaskProperties 暂不支持，与 iOS 表现一致。[issue#141](https://github.com/tschoffelen/react-native-email-link/issues/141)。
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/tschoffelen/react-native-email-link/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/tschoffelen/react-native-email-link/blob/master/LICENSE).
diff --git a/en/react-native-error-boundary.md b/en/react-native-error-boundary.md
index d613bff8b71893492bdf8c9e09c9fa3b4fe2f93a..02f03b83eab778911912c3f7a73d21c2645dbd02 100644
--- a/en/react-native-error-boundary.md
+++ b/en/react-native-error-boundary.md
@@ -1,6 +1,6 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-error-boundary
@@ -15,11 +15,11 @@
-> [!TIP] [Github 地址](https://github.com/carloscuesta/react-native-error-boundary)
+> [!TIP] [ GitHub address](https://github.com/carloscuesta/react-native-error-boundary)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -37,92 +37,95 @@ yarn add react-native-error-boundary@1.2.4
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
```ts
-import React, { PropsWithChildren, useState } from 'react';
-import { StyleSheet, Button } from 'react-native';
-import ErrorBoundary from 'react-native-error-boundary';
+import React, { PropsWithChildren, useState } from "react";
+import { StyleSheet, Button } from "react-native";
+import ErrorBoundary from "react-native-error-boundary";
export const ErrorBoundaryDefaultExample = () => {
- const [shouldThrow, setShouldThrow] = useState(false);
-
- return (
-
- {
- setShouldThrow(true);
- }}
- />
- {shouldThrow && (Content )}
-
- );
+ const [shouldThrow, setShouldThrow] = useState(false);
+
+ return (
+
+ {
+ setShouldThrow(true);
+ }}
+ />
+ {shouldThrow && Content }
+
+ );
};
function MaybeThrows({ children }: PropsWithChildren) {
- const valueToThrow = new Error("Throw a new exception");
- throw valueToThrow;
+ const valueToThrow = new Error("Throw a new exception");
+ throw valueToThrow;
}
const styles = StyleSheet.create({
- buttonContainer: {
- width: 80,
- height: 80,
- },
- box: {
- height: 100,
- width: 50,
- },
+ buttonContainer: {
+ width: 80,
+ height: 80,
+ },
+ box: {
+ height: 100,
+ width: 50,
+ },
});
```
-## 约束与限制
+## 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.400; ROM: 3.0.0.25;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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.
### ErrorBoundary
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------------- | ------------------------------- | -------------- | -------- | ----------- | ----------------- |
-| Children | Any children that can throw an error | React.Children | Yes | iOS/Android | Yes |
-| FallbackComponent | The fallback component that will be rendered after catching an error. By default the library comes with a built-in component. | React.Component | No | iOS/Android | Yes |
-| onError | A function to log the errors that happen in your application | Function | No | iOS/Android | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------- | -------- | ----------- | ----------------- |
+| Children | Any children that can throw an error | React.Children | Yes | iOS/Android | Yes |
+| FallbackComponent | The fallback component that will be rendered after catching an error. By default the library comes with a built-in component. | React.Component | No | iOS/Android | Yes |
+| onError | A function to log the errors that happen in your application | Function | No | iOS/Android | Yes |
#### FallbackComponent
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------------- | ------------------------------- | -------------- | -------- | ----------- | ----------------- |
-| error | The error object | Error | Yes | iOS/Android | Yes |
-| resetError | A function to reset the error state. You'll want to call this function to recover from the error state. | Function | Yes | iOS/Android | Yes |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| error | The error object | Error | Yes | iOS/Android | Yes |
+| resetError | A function to reset the error state. You'll want to call this function to recover from the error state. | Function | Yes | iOS/Android | Yes |
#### onError
+
```js
onError(error: Error, stackTrace: string): void
```
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------------- | ------------------------------- | -------------- | -------- | ----------- | ----------------- |
-| error | The error catched by the component | Error | Yes | iOS/Android | Yes |
-| stackTrace | The stacktrace of the error | string | Yes | iOS/Android | Yes |
-## 遗留问题
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ---------------------------------- | ------ | -------- | ----------- | ----------------- |
+| error | The error catched by the component | Error | Yes | iOS/Android | Yes |
+| stackTrace | The stacktrace of the error | string | Yes | iOS/Android | Yes |
+
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/carloscuesta/react-native-error-boundary/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/carloscuesta/react-native-error-boundary/blob/master/LICENSE).
diff --git a/en/react-native-fast-image.md b/en/react-native-fast-image.md
index a1b18b6c185e56e86f3e401163f674118dcc3006..bf186ec468bf81f90b2cae0c9337f0d1c0b1967b 100644
--- a/en/react-native-fast-image.md
+++ b/en/react-native-fast-image.md
@@ -1,6 +1,6 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-fast-image
@@ -14,15 +14,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-fast-image)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-fast-image)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-fast-image Releases](https://github.com/react-native-oh-library/react-native-fast-image/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-fast-image Releases](https://github.com/react-native-oh-library/react-native-fast-image/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,9 +40,9 @@ yarn add @react-native-oh-tpl/react-native-fast-image@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";
@@ -105,11 +105,11 @@ const styles = StyleSheet.create({
## 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
{
@@ -120,18 +120,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": {
@@ -140,22 +137,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](/en/link-source-code.md).
-### 3.配置 CMakeLists 和引入 FastImagePackage
+### 3. Configuring CMakeLists and Introducing FastImagePackage
-打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
```diff
project(rnapp)
@@ -193,7 +190,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"
@@ -212,9 +209,9 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4.在 ArkTs 侧引入 FastImagePackage
+### 4. Introducing FastImagePackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -228,69 +225,69 @@ 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
```
-然后编译、运行即可。
+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-fast-image Releases](https://github.com/react-native-oh-library/react-native-fast-image/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-fast-image Releases](https://github.com/react-native-oh-library/react-native-fast-image/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 | Required | Platform | HarmonyOS Support |
-| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
-| `source.uri` | Source for the remote image to load. | string | yes | All | yes |
-| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes |
-| `source.priority?` | loading url priority | enum | no | All | no |
-| `source.cache?` | setting loading url cache mode | enum | no | All | no |
-| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes |
-| `resizeMode?` | loading image for scale mode | enum | yes | All | yes |
-| `onLoadStart` | Called when the image starts to load. | function | yes | All | yes |
-| `onProgress` | Called when the image is loading. | function | yes | All | yes |
-| `onLoad` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes |
-| `onError` | Called on an image fetching error. | function | yes | All | yes |
-| `onLoadEnd` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes |
-| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
+| `source.uri` | Source for the remote image to load. | string | yes | All | yes |
+| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes |
+| `source.priority?` | loading url priority | enum | no | All | no |
+| `source.cache?` | setting loading url cache mode | enum | no | All | no |
+| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes |
+| `resizeMode?` | loading image for scale mode | enum | yes | All | yes |
+| `onLoadStart` | Called when the image starts to load. | function | yes | All | yes |
+| `onProgress` | Called when the image is loading. | function | yes | All | yes |
+| `onLoad` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes |
+| `onError` | Called on an image fetching error. | function | yes | All | yes |
+| `onLoadEnd` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes |
+| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | 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 |
-| ------------------------------------------------- | ------------------------------------------ | -------- | -------- | -------- | ----------------- |
-| `FastImage.preload` | Preload images to display later. e.g. | function | no | All | yes |
-| `FastImage.clearMemoryCache` | Clear all images from memory cache. | function | no | All | yes |
-| `FastImage.clearDiskCache` | Clear all images from disk cache. priority | function | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------------- | ------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| `FastImage.preload` | Preload images to display later. e.g. | function | no | All | yes |
+| `FastImage.clearMemoryCache` | Clear all images from memory cache. | function | no | All | yes |
+| `FastImage.clearDiskCache` | Clear all images from disk cache. priority | function | no | All | yes |
-## 遗留问题
+## Known Issues
-- [ ] 不支持属性 source.cache. [issue#57](https://github.com/react-native-oh-library/react-native-fast-image/issues/57)
-- [ ] 不支持属性 source.priority. [issue#56](https://github.com/react-native-oh-library/react-native-fast-image/issues/56)
+- [ ] 不支持 Properties source.cache. [issue#57](https://github.com/react-native-oh-library/react-native-fast-image/issues/57)
+- [ ] 不支持 Properties source.priority. [issue#56](https://github.com/react-native-oh-library/react-native-fast-image/issues/56)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/DylanVann/react-native-fast-image/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/DylanVann/react-native-fast-image/blob/main/LICENSE).
diff --git a/en/react-native-file-access.md b/en/react-native-file-access.md
index 4d29e0dd04c1491f7bccb6b7c08df2f5a5a46ed7..0e92082dfd389e2e6e3b1c80056df99002be8c94 100644
--- a/en/react-native-file-access.md
+++ b/en/react-native-file-access.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-file-access
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-access)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-file-access)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/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-access Releases](https://github.com/react-native-oh-library/react-native-file-access/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-file-access@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
> [!TIP] 以下 demo 中使用的是本地文件。
@@ -65,24 +65,20 @@ export function FileAccessDemo() {
const [concatBeyts, setConcatBeyts] = useState();
const [dirOrNot, setDirOrNot] = useState('');
- // 将内容写入文件
const wirteFile = () => {
FileSystem.writeFile(Dirs.DocumentDir + '/0801' + '/text1.txt', "DDDD", "utf8")
};
- // 读取文件的内容
const readFile = () => {
FileSystem.readFile(Dirs.DocumentDir + "/0801.txt").then((res) => {
setFileContent(res);
})
};
- // 删除文件
const unlink = () => {
FileSystem.unlink(Dirs.DocumentDir + '/0812.txt');
};
- // 创建一个新目录，返回创建目录的路径
const mkdir = () => {
FileSystem.mkdir(Dirs.DocumentDir + "/wxwx").then((res) => {
setMkdirParam(res);
@@ -91,17 +87,14 @@ export function FileAccessDemo() {
});
};
- // 移动文件
const mv = () => {
FileSystem.mv(Dirs.DocumentDir + "/text.txt", Dirs.DocumentDir + "/text1.txt");
};
- // 解压一个 zip 档案
const unzip = () => {
FileSystem.unzip(Dirs.DocumentDir + "/wxwx.zip", Dirs.DocumentDir);
};
- // 读取文件元数据
const stat = () => {
FileSystem.stat(Dirs.DocumentDir + "/text1.txt").then((res) => {
setStatInfo(JSON.stringify(res));
@@ -110,7 +103,6 @@ export function FileAccessDemo() {
})
};
- // 检查路径是否存在
const exists = () => {
FileSystem.exists(Dirs.DocumentDir + "/text1.txt").then((res) => {
setExists(res);
@@ -119,12 +111,10 @@ export function FileAccessDemo() {
});
};
- // 复制文件
const cp = async () => {
await FileSystem.cp(Dirs.DocumentDir + "/text1.txt", Dirs.DocumentDir + "/text4.txt")
};
- // 对文件内容进行哈希处理
const hash = () => {
FileSystem.hash(Dirs.DocumentDir + "/text1.txt", 'SHA-256').then((res) => {
setHashValue(res);
@@ -133,13 +123,11 @@ export function FileAccessDemo() {
});
};
- // 检查路径是否是目录
const isDir = async () => {
let res = await FileSystem.isDir(Dirs.DocumentDir + '/text1.txt');
setDirOrNot(res);
};
- // 列出目录中的文件
const ls = async () => {
await FileSystem.ls(Dirs.DocumentDir).then((res) => {
setLsList(res.join('、'));
@@ -148,7 +136,6 @@ export function FileAccessDemo() {
});
};
- // 检查设备可用空间
const df = async () => {
await FileSystem.df().then(res => {
setFreeSize(res?.internal_free);
@@ -156,7 +143,6 @@ export function FileAccessDemo() {
})
};
- // 读取目录中所有文件的元数据
const statDir = () => {
FileSystem.statDir(Dirs.DocumentDir).then(res => {
setStatDirInfo(res);
@@ -165,7 +151,6 @@ export function FileAccessDemo() {
});
};
- // 读取文件的一大块内容，从位于的字节开始offset，读取length字节
const readFileChunk = () => {
FileSystem.readFileChunk(Dirs.DocumentDir + "/text2.txt", 1, 1, 'utf8').then((res) => {
setReadFileChunkInfo(res);
@@ -174,12 +159,10 @@ export function FileAccessDemo() {
});
};
- // 将内容附加到文件
const appendFile = async () => {
await FileSystem.appendFile(Dirs.DocumentDir + "/text3.txt", "AAAAAA", 'utf8');
}
- // 将一个文件附加到另一个文件。返回写入的字节数
const concatFiles = async () => {
await FileSystem.concatFiles(Dirs.DocumentDir + "/text3.txt", Dirs.DocumentDir + "/text4.txt").then((res) => {
setConcatBeyts(res)
@@ -192,106 +175,106 @@ export function FileAccessDemo() {
FileAccess.wirteFile()
-
FileAccess.readFile()
-
- 读取的文件内容：{fileContent}
+ read the file contents: {fileContent}
FileAccess.unlink()
-
FileAccess.mkdir()
-
- 新目录路径：{mkdirParam}
+ new directory path: {mkdirParam}
FileAccess.mv()
-
FileAccess.stat()
-
- 文件信息：{statInfo}
+ file information: {statInfo}
FileAccess.exists()
-
- 文件是否存在：{isExists === '' ? '' : isExists ? '存在' : '不存在'}
+ does the file exist: {isExists === '' ? '' : isExists ? 'exist' : 'does not exist'}
FileAccess.cp()
-
FileAccess.isDir()
-
- 是否是目录：{dirOrNot === '' ? '' : dirOrNot ? '是' : '不是'}
+ is it a directory: {dirOrNot === '' ? '' : dirOrNot ? 'yes' : 'no'}
FileAccess.ls()
-
- 目录中的文件：{lsList}
+ files in the directory: {lsList}
FileAccess.df()
-
- 可用空间：{freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB
- 总空间：{totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB
+ available space: {freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB
+ total space: {totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB
FileAccess.hash()
-
- 哈希值：{hashValue}
+ hash value: {hashValue}
FileAccess.unzip()
-
FileAccess.statDir()
-
- 以下为目录下的文件信息：
+ the following is the file information in the directory
{statDirInfo.map((item, index) => ({JSON.stringify(item)} ))}
FileAccess.readFileChunk()
-
- 读取的部分文件内容：{readFileChunkInfo}
+ read part of the file content: {readFileChunkInfo}
FileAccess.appendFile()
-
FileAccess.concatFiles()
-
- 写入的字节数：{concatBeyts}
+ number of bytes written: {concatBeyts}
);
@@ -318,17 +301,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](/en/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 +322,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 +339,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](/en/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 +368,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,12 +421,12 @@ 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
- [ ] getAppGroupDir method (Get application directory permissions, iOS, Mac iOS only) This is a dependency problem. Currently, the Harmony side does not provide support. [issue#4](https://github.com/react-native-oh-library/react-native-file-access/issues/4)
-## 其他
+## 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 130d24290f6406179e4a1256b453fb8bc788d6d9..34a632afa17075a9b69be2a7928a14caf0e4dfcf 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,120 @@ 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 {
+ const res: any = await DocumentPicker.pick({
+ type: [DocumentPicker.types.allFiles],
+ });
+ 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](/en/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 +175,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 +192,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](/en/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 +221,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 48077a16be13afc36a4f4f68c34a4893faf75963..f3fd38d5a1ca1e682ffd11f553c31febef8f3c40 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).
-进入到工程目录并输入以下命令：
+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,958 +60,961 @@ export default function () {
| 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-graph.md b/en/react-native-graph.md
index d5264d4b5ab55ab197e488196b29932819578c59..5f2ff895afa2087695e0a2d3e968be230959addc 100644
--- a/en/react-native-graph.md
+++ b/en/react-native-graph.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-graph
@@ -12,150 +12,146 @@
-> [!TIP] [Github 地址](https://github.com/margelo/react-native-graph)
+> [!TIP] [ GitHub address](https://github.com/margelo/react-native-graph)
-## 安装与使用
+## Installation and Usage
-
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
#### **npm**
```bash
-npm install react-native-graph@1.1.0
+npm install react-natvie-graph@1.1.0
```
#### **yarn**
```bash
-yarn add react-native-graph@1.1.0
+yarn add react-natvie-graph@1.1.0
```
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```ts
-import React, { useState } from 'react'
-import { View, StyleSheet, Text, Button } from 'react-native'
-import { LineGraph } from 'react-native-graph'
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import React, { useState } from "react";
+import { View, StyleSheet, Text, Button } from "react-native";
+import { LineGraph } from "react-native-graph";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
interface GraphPoint {
- value: number
- date: Date
- }
+ value: number;
+ date: Date;
+}
interface GraphXRange {
- min: Date;
- max: Date;
+ min: Date;
+ max: Date;
}
interface GraphYRange {
- min: number;
- max: number;
+ min: number;
+ max: number;
}
interface GraphPathRange {
- x: GraphXRange;
- y: GraphYRange;
+ x: GraphXRange;
+ y: GraphYRange;
}
type GraphRange = Partial;
type Color = string | Float32Array | number | number[];
-export default function() {
- const generateRandomGraphData=(length: number): GraphPoint[]=>{
- return Array(length)
- .fill(0)
- .map((_, index) => ({
- date: new Date(
- new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index
- ),
- value: Math.random()*10,
- }))
- }
- const POINT_COUNT=50
- const POINTS = generateRandomGraphData(POINT_COUNT)
- const [points, setPoints] = useState(POINTS)
- const [isAnimated, setIsAnimated] = useState(true)
- const [enablePanGesture, setEnablePanGesture] = useState(false)
-
- const color='#dd4400'
-
-
- return (
-
-
+export default function () {
+ const generateRandomGraphData = (length: number): GraphPoint[] => {
+ return Array(length)
+ .fill(0)
+ .map((_, index) => ({
+ date: new Date(
+ new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index
+ ),
+ value: Math.random() * 10,
+ }));
+ };
+ const POINT_COUNT = 50;
+ const POINTS = generateRandomGraphData(POINT_COUNT);
+ const [points, setPoints] = useState(POINTS);
+ const [isAnimated, setIsAnimated] = useState(true);
+ const [enablePanGesture, setEnablePanGesture] = useState(false);
+
+ const color = "#dd4400";
+
+ return (
+
+
{`enablePanGesture value is ${enablePanGesture}`}
- setEnablePanGesture(!enablePanGesture)}
/>
- setEnablePanGesture(!enablePanGesture)} />
-
+
- )
-
+ );
}
const styles = StyleSheet.create({
-
- graph: {
- alignSelf: 'center',
- width: '100%',
- aspectRatio: 1.4,
- marginVertical: 20,
- },
-})
+ graph: {
+ alignSelf: "center",
+ width: "100%",
+ aspectRatio: 1.4,
+ marginVertical: 20,
+ },
+});
```
-## Link
-
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated , @react-native-oh-tpl/react-native-gesture-handler , @react-native-oh-tpl/react-native-skia 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
-
-如未引入请参照[@react-native-oh-tpl/react-native-reanimated文档](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler文档](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-skia文档](/zh-cn/react-native-skia.md)、进行引入
-## 约束与限制
-
-### 兼容性
-本文档内容基于以下版本验证通过：
-
-1. RNOH：0.72.28; SDK：HarmonyOS NEXT Developer Beta5 5.0.0.60; IDE：DevEco Studio 5.0.3.655; ROM：3.0.0.60
-
-2. RNOH：0.72.31; SDK：HarmonyOS NEXT Beta1 SDK 5.0.0.68; IDE：DevEco Studio 5.0.3.810; ROM：5.0.0.60
-
-## 属性
-
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+## Link
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------------------------- | ----------------------------------------------- | -------- | -------- | ----------- | ----------------- |
-| `animated` | Whether to animate between data changes | Boolean | yes | iOS/Android | yes |
-| `points` | All points to be marked in the graph. Coordinate system will adjust to scale automatically. | GraphPoint[] | yes | iOS/Android | yes |
-| `color`| Color of the graph line (path) | String | yes | iOS/Android | yes |
-| `enableFadeInMask` |Enable the Fade-In Gradient Effect at the beginning of the Graph| Boolean| no | iOS/Android | yes |
-| `lineThickness` |The width of the graph line (path)| Number | no | iOS/Android | yes |
-| `gradientFillColors` |(Optional) Colors for the fill gradient below the graph line| Color[] | no | iOS/Android | yes |
-| `range` |Range of the graph's x and y-axis. The range must be greaterthan the range given by the points| GraphRange | no | iOS/Android | yes |
-| `enablePanGesture`| Whether to enable the pan gesture.(animated Property must be true) | Boolean | no | iOS/Android | yes |
-| `horizontalPadding` | Horizontal padding applied to graph, so the pan gesture dot doesn't get cut off horizontally(animated Property must be true) | Number | no | iOS/Android | yes |
-| `verticalPadding`| Vertical padding applied to graph, so the pan gesture dot doesn't get cut off vertically(animated Property must be true) | Number | no | iOS/Android | yes |
-| `enableIndicator`| Enables an indicator which is displayed at the end of the graph(animated Property must be true) | Boolean | no | iOS/Android | yes |
-| `indicatorPulsating` | Let's the indicator pulsate(animated GraphEnableIndicator Property must be true) | Boolean | no | iOS/Android | yes |
-| `panGestureDelay`| Delay after which the pan gesture starts(animated enablePanGesture Property must be true)`}| Number | no | iOS/Android | yes |
-| `onPointSelected` | Called for each point while the user is scrubbing/panning through the graph(animated enablePanGesture Property must be true)| (point: GraphPoint) => void | no | iOS/Android | yes |
-| `onGestureStart` |Called once the user starts scrubbing/panning through the graph (animated enablePanGesture Property must be true)| () => void | no | iOS/Android | yes |
-| `onGestureEnd` |Called once the user stopped scrubbing/panning through the graph (animated enablePanGesture Property must be true)| () => void | no | iOS/Android | yes |
-| `SelectionDot`|The element that renders the selection dot(animated enablePanGesture Property must be true)| React.ComponentType\ \| null | no | iOS/Android | yes |
-| `TopAxisLabel` |The element that gets rendered above the Graph (usually the "max" point/value of the Graph)(animated Property must be true)| React.ReactElement \| null | no | iOS/Android | yes |
-| `BottomAxisLabel` |The element that gets rendered below the Graph (usually the "min" point/value of the Graph)(animated Property must be true)| React.ReactElement \| null | no | iOS/Android | yes |
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated , @react-native-oh-tpl/react-native-gesture-handler , @react-native-oh-tpl/react-native-skia. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
+If it is not included, follow the guide provided in[@react-native-oh-tpl/react-native-reanimated docs](/en/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler docs](/en/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-skia docs](/en/react-native-skia.md) to add it to your project.
+## Constraints
-## 遗留问题
+### Compatibility
-## 其他
-- react-native-graph 的animated属性 原库代码现在有问题 无论是false还是true，数据变化都是静态变化，没有动画效果，原库中有使用者提issue和PR，添加合入相应PR代码后才能动画正常[issue#111](https://github.com/margelo/react-native-graph/pull/111)
-## 开源协议
+This document is verified based on the following versions:
-本项目基于 [The MIT License (MIT)](https://github.com/margelo/react-native-graph/blob/main/LICENSE) ，请自由地享受和参与开源。
+1. RNOH：0.72.28; SDK：HarmonyOS NEXT Developer Beta5 5.0.0.60; IDE：DevEco Studio 5.0.3.655; ROM：3.0.0.60
+## Properties
+
+> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------- | ----------------- |
+| `animated` | Whether to animate between data changes | Boolean | yes | iOS/Android | yes |
+| `points` | All points to be marked in the graph. Coordinate system will adjust to scale automatically. | GraphPoint[] | yes | iOS/Android | yes |
+| `color` | Color of the graph line (path) | String | yes | iOS/Android | yes |
+| `enableFadeInMask` | Enable the Fade-In Gradient Effect at the beginning of the Graph | Boolean | no | iOS/Android | yes |
+| `lineThickness` | The width of the graph line (path) | Number | no | iOS/Android | yes |
+| `gradientFillColors` | (Optional) Colors for the fill gradient below the graph line | Color[] | no | iOS/Android | yes |
+| `range` | Range of the graph's x and y-axis. The range must be greaterthan the range given by the points | GraphRange | no | iOS/Android | yes |
+| `enablePanGesture` | Whether to enable the pan gesture.(animated Property must be true) | Boolean | no | iOS/Android | yes |
+| `horizontalPadding` | Horizontal padding applied to graph, so the pan gesture dot doesn't get cut off horizontally(animated Property must be true) | Number | no | iOS/Android | yes |
+| `verticalPadding` | Vertical padding applied to graph, so the pan gesture dot doesn't get cut off vertically(animated Property must be true) | Number | no | iOS/Android | yes |
+| `enableIndicator` | Enables an indicator which is displayed at the end of the graph(animated Property must be true) | Boolean | no | iOS/Android | yes |
+| `indicatorPulsating` | Let's the indicator pulsate(animated GraphEnableIndicator Property must be true) | Boolean | no | iOS/Android | yes |
+| `panGestureDelay` | Delay after which the pan gesture starts(animated enablePanGesture Property must be true)`} | Number | no | iOS/Android | yes |
+| `onPointSelected` | Called for each point while the user is scrubbing/panning through the graph(animated enablePanGesture Property must be true) | (point: GraphPoint) => void | no | iOS/Android | yes |
+| `onGestureStart` | Called once the user starts scrubbing/panning through the graph (animated enablePanGesture Property must be true) | () => void | no | iOS/Android | yes |
+| `onGestureEnd` | Called once the user stopped scrubbing/panning through the graph (animated enablePanGesture Property must be true) | () => void | no | iOS/Android | yes |
+| `SelectionDot` | The element that renders the selection dot(animated enablePanGesture Property must be true) | React.ComponentType\ \| null | no | iOS/Android | yes |
+| `TopAxisLabel` | The element that gets rendered above the Graph (usually the "max" point/value of the Graph)(animated Property must be true) | React.ReactElement \| null | no | iOS/Android | yes |
+| `BottomAxisLabel` | The element that gets rendered below the Graph (usually the "min" point/value of the Graph)(animated Property must be true) | React.ReactElement \| null | no | iOS/Android | yes |
+
+## Known Issues
+
+## Others
+
+## License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/margelo/react-native-graph/blob/main/LICENSE).
diff --git a/en/react-native-hyperlink.md b/en/react-native-hyperlink.md
index 52edab46b1435938d83b0010ca4f00f1933f869e..c1ccd99dab91c083458ba0bf2859c9c5cd91da8d 100644
--- a/en/react-native-hyperlink.md
+++ b/en/react-native-hyperlink.md
@@ -1,4 +1,4 @@
-模板版本：v0.2.2
+Template version: v0.2.2
react-native-hyperlink
@@ -13,11 +13,11 @@
-> [!TIP] [Github 地址](https://github.com/obipawan/react-native-hyperlink)
+> [!TIP] [ GitHub address](https://github.com/obipawan/react-native-hyperlink)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -33,7 +33,7 @@ npm install react-native-hyperlink@0.0.22
yarn add react-native-hyperlink@0.0.22
```
-使用时,还需在项目下的module.json5处配置querySchemes
+使用时,还需在项目下的 module.json5 处配置 querySchemes
```diff
{
@@ -46,9 +46,9 @@ yarn add react-native-hyperlink@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 React, { useState } from "react";
@@ -76,35 +76,35 @@ export default function App() {
}
```
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25 (API Version 12 Canary4); IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.29;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 |
-| --------------- | --------------------------------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- |
-| linkify | linkify-it object, for custom schema | object | no | all | yes |
-| linkStyle | highlight clickable text with styles | object | no | all | yes |
-| linkText | A string or a func to replace parsed text | string | function | no | all | yes |
-| onPress | Func to handle click over a clickable text with parsed text as arg | function | no | all | yes |
-| onLongPress | Func to handle long click over a clickable text with parsed text as arg | function | no | all | yes |
-| linkDefault | A platform specific fallback to handle onPress. Uses Linking. Disabled by default | boolean | no | all | yes |
-| injectViewProps | Func with url as a param to inject props to the clickable component | function | no | all | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | --------------------------------------------------------------------------------- | ---------------------- | -------- | -------- | ----------------- |
+| linkify | linkify-it object, for custom schema | object | no | all | yes |
+| linkStyle | highlight clickable text with styles | object | no | all | yes |
+| linkText | A string or a func to replace parsed text | string | function | no | all | yes |
+| onPress | Func to handle click over a clickable text with parsed text as arg | function | no | all | yes |
+| onLongPress | Func to handle long click over a clickable text with parsed text as arg | function | no | all | yes |
+| linkDefault | A platform specific fallback to handle onPress. Uses Linking. Disabled by default | boolean | no | all | yes |
+| injectViewProps | Func with url as a param to inject props to the clickable component | function | no | all | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/obipawan/react-native-hyperlink/blob/master/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/obipawan/react-native-hyperlink/blob/master/LICENSE).
diff --git a/en/react-native-image-capinsets-next.md b/en/react-native-image-capinsets-next.md
index 61c121d4e09d6b54c16be8bf7111cb9d95252877..388762bf48b3add0db230b2be1962c8db8726b34 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,20 @@ 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,23 +73,24 @@ const YourImage = () => {
- 图片内容2
+ capInsets={currentCapInset}
+ >
+ image content 2
- 切换图片:
+ switch image:
- 切换Inset:
+ switch Inset:
= [
@@ -212,9 +209,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 +225,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 bcee40919ac67cd820175711a10ca15ebab7f266..3d2056ddc46d6c747d6f283de078c66bc65668fe 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'
@@ -113,7 +113,7 @@ export default function demo() {
Result:
- fetchColors() }>
+ fetchColors() }>
{colors.rawResult}
[!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](/en/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);` | 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'` ` | 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'`
react-native-image-marker
@@ -12,16 +12,15 @@
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-image-marker)
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-marker)
+## 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-marker Releases](https://github.com/react-native-oh-library/react-native-image-marker/releases).
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-marker Releases](https://github.com/react-native-oh-library/react-native-image-marker/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,164 +38,175 @@ yarn add @react-native-oh-tpl/react-native-image-marker@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
```tsx
import Marker, {
- Position, ImageMarkOptions, TextMarkOptions
- } from 'react-native-image-marker'
+ Position,
+ ImageMarkOptions,
+ TextMarkOptions,
+} from "react-native-image-marker";
import React, { useState } from "react";
-import { StyleSheet, ScrollView, Text, View, Button, Image } from "react-native";
-import { Colors } from 'react-native/Libraries/NewAppScreen';
+import {
+ StyleSheet,
+ ScrollView,
+ Text,
+ View,
+ Button,
+ Image,
+} from "react-native";
+import { Colors } from "react-native/Libraries/NewAppScreen";
export const ImageMarkerText = () => {
- const [texturl, setTextMarkUrl] = useState('');
- const [imageurl,setImageMarkUrl] = useState('');
- const text_options: TextMarkOptions = {
- backgroundImage: { src: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuekan/xintexing00.jpg' },
- watermarkTexts: [{
- text: 'hello world \n 你好',
+ const [texturl, setTextMarkUrl] = useState("");
+ const [imageurl, setImageMarkUrl] = useState("");
+ const text_options: TextMarkOptions = {
+ backgroundImage: {
+ src: "https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuekan/xintexing00.jpg",
+ },
+ watermarkTexts: [
+ {
+ text: "hello world \n hello",
position: {
position: Position.topLeft,
},
style: {
- color: '#FFFF00',
+ color: "#FFFF00",
fontSize: 30,
- fontName: 'Arial',
+ fontName: "Arial",
rotate: 30,
textBackgroundStyle: {
- padding: '10% 10%',
- color: '#02B96B',
+ padding: "10% 10%",
+ color: "#02B96B",
},
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
- color: '#008F6D',
+ color: "#008F6D",
},
strikeThrough: true,
underline: true,
},
- }, {
- text: 'hello world \n 你好',
+ },
+ {
+ text: "hello world \n hello",
position: {
position: Position.center,
},
style: {
- color: '#FFFF00',
+ color: "#FFFF00",
fontSize: 30,
- fontName: 'Arial',
+ fontName: "Arial",
textBackgroundStyle: {
- padding: '10% 10%',
- color: '#0FFF00',
+ padding: "10% 10%",
+ color: "#0FFF00",
},
strikeThrough: true,
underline: true,
},
- }],
- }
+ },
+ ],
+ };
- const image_options: ImageMarkOptions = {
- backgroundImage: { src: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuekan/xintexing00.jpg' },
- watermarkImages: [{
- src: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yingyongicon.png',
- rotate:20,
+ const image_options: ImageMarkOptions = {
+ backgroundImage: {
+ src: "https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuekan/xintexing00.jpg",
+ },
+ watermarkImages: [
+ {
+ src: "https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yingyongicon.png",
+ rotate: 20,
position: {
position: Position.topLeft,
},
},
{
- src: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yingyongicon.png',
- rotate:50,
+ src: "https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yingyongicon.png",
+ rotate: 50,
position: {
position: Position.bottomCenter,
},
- }
+ },
],
- }
+ };
- const markText = () => {
- Marker.markText(text_options).then((result) => {
- setTextMarkUrl(result)
- }).catch(error => {
- console.log('error', error)
+ const markText = () => {
+ Marker.markText(text_options)
+ .then((result) => {
+ setTextMarkUrl(result);
})
- }
-
- const markImage = () => {
- Marker.markImage(image_options).then((result) => {
- setImageMarkUrl(result)
- }).catch(error => {
- console.log('error', error)
+ .catch((error) => {
+ console.log("error", error);
+ });
+ };
+
+ const markImage = () => {
+ Marker.markImage(image_options)
+ .then((result) => {
+ setImageMarkUrl(result);
})
- }
- return (
-
-
-
-
- {"image marker"}
-
-
- {imageurl}
-
-
-
-
-
-
- {"image marker"}
-
-
- {texturl}
-
-
-
-
- );
- }
- const styles = StyleSheet.create({
- body: {
- backgroundColor: Colors.dark,
- },
- sectionContainer: {
- marginTop: 32,
- paddingHorizontal: 24,
- },
- sectionTitle: {
- marginBottom: 30,
- fontSize: 12,
- fontWeight: '600',
- color: Colors.white,
- }
- });
+ .catch((error) => {
+ console.log("error", error);
+ });
+ };
+ return (
+
+
+
+ {"image marker"}
+ {imageurl}
+
+
+
+
+ {"image marker"}
+ {texturl}
+
+
+
+ );
+};
+const styles = StyleSheet.create({
+ body: {
+ backgroundColor: Colors.dark,
+ },
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ sectionTitle: {
+ marginBottom: 30,
+ fontSize: 12,
+ fontWeight: "600",
+ color: Colors.white,
+ },
+});
```
-## 使用 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](/en/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.json` 添加 overrides 字段
+### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
```json
{
@@ -207,18 +217,15 @@ export const ImageMarkerText = () => {
}
```
-### 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": {
@@ -227,22 +234,22 @@ export const ImageMarkerText = () => {
}
```
-点击右上角的 `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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNImageMarkerPackage
+### 3. Introducing RNImageMarkerPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -257,32 +264,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-image-marker Releases](https://github.com/react-native-oh-library/react-native-image-marker/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-marker Releases](https://github.com/react-native-oh-library/react-native-image-marker/releases)
-### 权限要求
+### Permission Requirements
如果用到了网络图片，需要在 entry 目录下的 module.json5 中添加网络信息权限
-打开entry/src/main/module.json5，添加：
+Open the `entry/src/main/module.json5` file and add the following code:
```js
...
@@ -293,183 +300,181 @@ ohpm install
]
```
+## API
+> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
-## API
-
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------- | ---------------------- | -------- | -------- | ----------- | ----------------- |
-| markImage | mark icons on background image | string | no | Android/iOS | yes |
-| markText | mark texts on background image | string | no | Android/iOS | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------- | ------------------------------ | ------ | -------- | ----------- | ----------------- |
+| markImage | mark icons on background image | string | no | Android/iOS | yes |
+| markText | mark texts on background image | string | no | Android/iOS | yes |
#### markImage
+
```js
markImage(options: ImageMarkOptions): Promise;
```
+
##### ImageMarkOptions
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| backgroundImage | background image options | ImageOptions | yes | iOS/Android | yes |
-| quality | image quality `0-100`, `100` is best quality. defaultValue 100 | number | no | iOS/Android | yes |
-| filename | save image name | string | no | iOS/Android | yes |
-| saveFormat | save image format 'png','jpg','base64',default 'png' | ImageFormat | no | iOS/Android | yes |
-| watermarkImages | watermark images | Array\ | yes | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | -------------------------------------------------------------- | ----------------------------- | -------- | ----------- | ----------------- |
+| backgroundImage | background image options | ImageOptions | yes | iOS/Android | yes |
+| quality | image quality `0-100`, `100` is best quality. defaultValue 100 | number | no | iOS/Android | yes |
+| filename | save image name | string | no | iOS/Android | yes |
+| saveFormat | save image format 'png','jpg','base64',default 'png' | ImageFormat | no | iOS/Android | yes |
+| watermarkImages | watermark images | Array\ | yes | iOS/Android | yes |
##### ImageOptions
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| src | image src, local image | string | yes | iOS/Android | yes |
-| scale | image scale `>0`.defaultValue 1 | number | no | iOS/Android | yes |
-| rotate | rotate image rotate `0-360`.defaultValue 0 | number | no | iOS/Android | yes |
-| alpha | transparent of image `0 - 1`.defaultValue 1 | number | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------------- | ------ | -------- | ----------- | ----------------- |
+| src | image src, local image | string | yes | iOS/Android | yes |
+| scale | image scale `>0`.defaultValue 1 | number | no | iOS/Android | yes |
+| rotate | rotate image rotate `0-360`.defaultValue 0 | number | no | iOS/Android | yes |
+| alpha | transparent of image `0 - 1`.defaultValue 1 | number | no | iOS/Android | yes |
##### ImageFormat
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| png | iamge type png | string | no | iOS/Android | yes |
-| jpg | iamge type jpg | string | no | iOS/Android | yes |
-| base64 | iamge type base64 | string | no | iOS/Android | yes |
-
-
-##### WatermarkImageOptions
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| src | image src, local image | string | yes | iOS/Android | yes |
-| scale | image scale `>0`.defaultValue 1 | number | no | iOS/Android | yes |
-| rotate | rotate image rotate `0-360`.defaultValue 0 | number | no | iOS/Android | yes |
-| alpha | transparent of image `0 - 1`.defaultValue 1 | number | no | iOS/Android | yes |
-| position | the position of icon on background image | PositionOptions | no | iOS/Android | yes |
-
-##### PositionOptions
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| X | horizontal coordinate on background image | number / string | no | iOS/Android | yes |
-| Y | vertical coordinate on background image | number / string | no | iOS/Android | yes |
-| position | position enum | Position | no | iOS/Android | yes |
-
-##### Position
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ----------- | ----------------------- | ------ | -------- | ----------- | ----------------- |
-| topLeft | top left on background image | string | no | iOS/Android | yes |
-| topCenter | top center on background image | string | no | iOS/Android | yes |
-| topRight |top right on background image | string | no | iOS/Android | yes |
-| bottomLeft | bottom left on background image | string | no | iOS/Android | yes |
-| bottomCenter | bottom center on background image | string | no | iOS/Android | yes |
-| bottomRight | bottom right on background image| string | no | iOS/Android | yes |
-| center | center on background image | string | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | ----------------- | ------ | -------- | ----------- | ----------------- |
+| png | iamge type png | string | no | iOS/Android | yes |
+| jpg | iamge type jpg | string | no | iOS/Android | yes |
+| base64 | iamge type base64 | string | no | iOS/Android | yes |
+
+##### WatermarkImageOptions
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------- | --------------- | -------- | ----------- | ----------------- |
+| src | image src, local image | string | yes | iOS/Android | yes |
+| scale | image scale `>0`.defaultValue 1 | number | no | iOS/Android | yes |
+| rotate | rotate image rotate `0-360`.defaultValue 0 | number | no | iOS/Android | yes |
+| alpha | transparent of image `0 - 1`.defaultValue 1 | number | no | iOS/Android | yes |
+| position | the position of icon on background image | PositionOptions | no | iOS/Android | yes |
+
+##### PositionOptions
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------- | ----------------------------------------- | --------------- | -------- | ----------- | ----------------- |
+| X | horizontal coordinate on background image | number / string | no | iOS/Android | yes |
+| Y | vertical coordinate on background image | number / string | no | iOS/Android | yes |
+| position | position enum | Position | no | iOS/Android | yes |
+
+##### Position
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | --------------------------------- | ------ | -------- | ----------- | ----------------- |
+| topLeft | top left on background image | string | no | iOS/Android | yes |
+| topCenter | top center on background image | string | no | iOS/Android | yes |
+| topRight | top right on background image | string | no | iOS/Android | yes |
+| bottomLeft | bottom left on background image | string | no | iOS/Android | yes |
+| bottomCenter | bottom center on background image | string | no | iOS/Android | yes |
+| bottomRight | bottom right on background image | string | no | iOS/Android | yes |
+| center | center on background image | string | no | iOS/Android | yes |
#### markText
```json
markText(options: TextMarkOptions): Promise;
```
+
##### TextMarkOptions
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| backgroundImage | background image options | ImageOptions | yes | iOS/Android | yes |
-| watermarkTexts | text options | Array\ | yes | iOS/Android | yes |
-| quality | image quality 0-100, 100 is best quality. defaultValue 100 | number | no | iOS/Android | yes |
-| filename | save image name | string | no | iOS/Android | yes |
-| saveFormat | save image format 'png','jpg','base64',default 'png' | ImageFormat | no | iOS/Android | yes |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | ---------------------------------------------------------- | ------------------- | -------- | ----------- | ----------------- |
+| backgroundImage | background image options | ImageOptions | yes | iOS/Android | yes |
+| watermarkTexts | text options | Array\ | yes | iOS/Android | yes |
+| quality | image quality 0-100, 100 is best quality. defaultValue 100 | number | no | iOS/Android | yes |
+| filename | save image name | string | no | iOS/Android | yes |
+| saveFormat | save image format 'png','jpg','base64',default 'png' | ImageFormat | no | iOS/Android | yes |
##### TextOptions
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| text | text content | string | yes | iOS/Android | yes |
-| position | text position options | PositionOptions | no | iOS/Android | yes |
-| style | text style | TextStyle | no | iOS/Android | yes |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------- | --------------------- | --------------- | -------- | ----------- | ----------------- |
+| text | text content | string | yes | iOS/Android | yes |
+| position | text position options | PositionOptions | no | iOS/Android | yes |
+| style | text style | TextStyle | no | iOS/Android | yes |
##### TextStyle
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| color | font color | string | yes | iOS/Android | yes |
-| fontName | font name | string | no | iOS/Android | yes |
-| fontSize | font size | number | no | iOS/Android | yes |
-| shadowStyle | text shadow style | ShadowLayerStyle | no | iOS/Android | yes |
-| textBackgroundStyle | text background style | TextBackgroundStyle | no | iOS/Android | yes |
-| underline | text underline style | boolean | no | iOS/Android | yes |
-| skewX | css italic with degree, you can use italic instead | number | no | iOS/Android | yes |
-| strikeThrough | text stroke | boolean | no | iOS/Android | yes |
-| textAlign | text align . 'left' / 'center' / 'right' | string | no | iOS/Android | yes |
-| italic | text italic | boolean | no | iOS/Android | yes |
-| bold | text bold | boolean | no | iOS/Android | yes |
-| rotate | rotate text | number | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | -------------------------------------------------- | ------------------- | -------- | ----------- | ----------------- |
+| color | font color | string | yes | iOS/Android | yes |
+| fontName | font name | string | no | iOS/Android | yes |
+| fontSize | font size | number | no | iOS/Android | yes |
+| shadowStyle | text shadow style | ShadowLayerStyle | no | iOS/Android | yes |
+| textBackgroundStyle | text background style | TextBackgroundStyle | no | iOS/Android | yes |
+| underline | text underline style | boolean | no | iOS/Android | yes |
+| skewX | css italic with degree, you can use italic instead | number | no | iOS/Android | yes |
+| strikeThrough | text stroke | boolean | no | iOS/Android | yes |
+| textAlign | text align . 'left' / 'center' / 'right' | string | no | iOS/Android | yes |
+| italic | text italic | boolean | no | iOS/Android | yes |
+| bold | text bold | boolean | no | iOS/Android | yes |
+| rotate | rotate text | number | no | iOS/Android | yes |
##### ShadowLayerStyle
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| dx | shadow offset x | number | yes | iOS/Android | yes |
-| dy | shadow offset y | number | yes | iOS/Android | yes |
-| radius |shadow radius | number | yes | iOS/Android | yes |
-| color | shadow color | string | yes | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | --------------- | ------ | -------- | ----------- | ----------------- |
+| dx | shadow offset x | number | yes | iOS/Android | yes |
+| dy | shadow offset y | number | yes | iOS/Android | yes |
+| radius | shadow radius | number | yes | iOS/Android | yes |
+| color | shadow color | string | yes | iOS/Android | yes |
##### TextBackgroundStyle
+
extends Padding
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| type | background type .TextBackgroundType enum | TextBackgroundType | no | iOS/Android | yes |
-| color | background color | string | yes | iOS/Android | yes |
-| cornerRadius |background corner radius | CornerRadius | no | iOS/Android | yes |
-| padding | padding for text background，Up to four values, separated by spaces | number / string | no | iOS/Android | yes |
-| paddingLeft | padding left for text background | number / string | no | iOS/Android | yes |
-| paddingRight | padding right for text background | number / string | no | iOS/Android | yes |
-| paddingTop | padding top for text background | number / string | no | iOS/Android | yes |
-| paddingBottom | padding bottom for text background | number / string | no | iOS/Android | yes |
-| paddingHorizontal | padding left and right (horizontal) for text background | number / string | no | iOS/Android | yes |
-| paddingVertical | padding top and bottom (vertical) for text background | number / string | no | iOS/Android | yes |
-| paddingX |padding x, alias of paddingHorizontal | number / string | no | iOS/Android | yes |
-| paddingY | padding y, alias of paddingVertical | number / string | no | iOS/Android | yes |
+| type | background type .TextBackgroundType enum | TextBackgroundType | no | iOS/Android | yes |
+| color | background color | string | yes | iOS/Android | yes |
+| cornerRadius |background corner radius | CornerRadius | no | iOS/Android | yes |
+| padding | padding for text background，Up to four values, separated by spaces | number / string | no | iOS/Android | yes |
+| paddingLeft | padding left for text background | number / string | no | iOS/Android | yes |
+| paddingRight | padding right for text background | number / string | no | iOS/Android | yes |
+| paddingTop | padding top for text background | number / string | no | iOS/Android | yes |
+| paddingBottom | padding bottom for text background | number / string | no | iOS/Android | yes |
+| paddingHorizontal | padding left and right (horizontal) for text background | number / string | no | iOS/Android | yes |
+| paddingVertical | padding top and bottom (vertical) for text background | number / string | no | iOS/Android | yes |
+| paddingX |padding x, alias of paddingHorizontal | number / string | no | iOS/Android | yes |
+| paddingY | padding y, alias of paddingVertical | number / string | no | iOS/Android | yes |
##### TextBackgroundType
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| stretchX | background type stretchX | string | no | iOS/Android | yes |
-| stretchY | background type stretchY | string | no | iOS/Android | yes |
-| none | background type fit | string | no | iOS/Android | yes |
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------ | ------ | -------- | ----------- | ----------------- |
+| stretchX | background type stretchX | string | no | iOS/Android | yes |
+| stretchY | background type stretchY | string | no | iOS/Android | yes |
+| none | background type fit | string | no | iOS/Android | yes |
##### CornerRadius
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| topLeft | topLeft Radius | RadiusValue | no | iOS/Android | yes |
-| topRight | topRight Radius | RadiusValue | no | iOS/Android | yes |
-| bottomLeft |bottomLeft Radius | RadiusValue | no | iOS/Android | yes |
-| bottomRight |bottomRight Radius | RadiusValue | no | iOS/Android | yes |
-| all | all Radius | RadiusValue | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------ | ----------- | -------- | ----------- | ----------------- |
+| topLeft | topLeft Radius | RadiusValue | no | iOS/Android | yes |
+| topRight | topRight Radius | RadiusValue | no | iOS/Android | yes |
+| bottomLeft | bottomLeft Radius | RadiusValue | no | iOS/Android | yes |
+| bottomRight | bottomRight Radius | RadiusValue | no | iOS/Android | yes |
+| all | all Radius | RadiusValue | no | iOS/Android | yes |
##### RadiusValue
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------- | ---------------------------------------------- | ------ | -------- | ----------- | ----------------- |
-| x | radius value for x | number / string | no | iOS/Android | yes |
-| y | radius value for y | number / string | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ------------------ | --------------- | -------- | ----------- | ----------------- |
+| x | radius value for x | number / string | no | iOS/Android | yes |
+| y | radius value for y | number / string | no | iOS/Android | yes |
-## 遗留问题
+## Known Issues
-- [x] Harmony OS is not support font name feature now: [issue#7](https://github.com/react-native-oh-library/react-native-image-marker/issues/7)
-- [x] Harmony OS is not support font skewX feature now: [issue#8](https://github.com/react-native-oh-library/react-native-image-marker/issues/8)
+- [x] Harmony OS is not support font name feature now: [issue#7](https://github.com/react-native-oh-library/react-native-image-marker/issues/7)
+- [x] Harmony OS is not support font skewX feature now: [issue#8](https://github.com/react-native-oh-library/react-native-image-marker/issues/8)
- [x] Harmony OS is not support font italic feature now:[issue#9](https://github.com/react-native-oh-library/react-native-image-marker/issues/9)
-## 其他
-
-## 开源协议
-
-本项目基于[The MIT License(MIT)](https://github.com/JimmyDaddy/react-native-image-marker/blob/master/LICENSE) ，请自由地享受和参与开源。
-
+## Others
+## License
+This project is licensed under[The MIT License(MIT)](https://github.com/JimmyDaddy/react-native-image-marker/blob/master/LICENSE).
diff --git a/en/react-native-image-pan-zoom.md b/en/react-native-image-pan-zoom.md
index 1cf726f7ca1215161712a6140de64c4e8ba94b79..236587a1052ada2ce450afe7a88fca90e232bb2a 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)
+For details, see [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 852be281025c9669e838fcf007a884f266f9050e..82d4f134b1af8a95745ac161208d578cfc5429c5 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
@@ -39,7 +38,7 @@ npm install @react-native-oh-tpl/react-native-image-viewing@file:#
yarn add @react-native-oh-tpl/react-native-image-viewing@file:#
```
-快速使用：
+quick use:
```js
import React, { useState } from "react";
@@ -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-indicators.md b/en/react-native-indicators.md
index 0d887c3754f54f80ed27e669fa487dbca257a72d..69b6b364a790ec32f9d37c9650c4396a144abf9a 100644
--- a/en/react-native-indicators.md
+++ b/en/react-native-indicators.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-indicators
@@ -12,13 +12,13 @@
-> [!TIP] [Github 地址](https://github.com/n4kz/react-native-indicators)
+> [!TIP] [GitHub address](https://github.com/n4kz/react-native-indicators)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+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 (#).
@@ -36,9 +36,9 @@ yarn add react-native-indicators@0.17.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, { Component } from 'react';
@@ -157,22 +157,22 @@ const styles = {
};
```
-## 约束与限制
+## 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.
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25 (API Version 12 Canary4); IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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.
### Common properties
@@ -260,10 +260,10 @@ const styles = {
| waveFactor | Wave base number | Number | NO | ALL | YES |
| waveMode | Wave appearance | String | NO | ALL | YES |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The BSD License (BSD)](https://github.com/n4kz/react-native-indicators/blob/master/license.txt) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The BSD License (BSD)](https://github.com/n4kz/react-native-indicators/blob/master/license.txt).
\ No newline at end of file
diff --git a/en/react-native-keyboard-accessory.md b/en/react-native-keyboard-accessory.md
index 9402236d26b420e2a1d125c7fe20fc795219d786..d811f4d83e9bb6ee946c268e70f01cffe54dffbe 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 8465074fec5b18a0696279db4a539e340ae5e42b..ba51987a1e58c1edf182abe509558f9c6fbe13b6 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](/en/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 的配置面板, 按如下图片提示进行配置
-3. 配置entry -> Before Lunch，点击加号选择 Run Another Configuration， 选择上一步配置的 Shell Script, 并将配置拖动到Hvigor-Build Make上方
+3. 配置 entry -> Before Lunch，点击加号选择 Run Another Configuration， 选择上一步配置的 Shell Script, 并将配置拖动到 Hvigor-Build Make 上方
-### 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 64d4a7e9e7892eb4c545956f7a39485000f46c66..8be69728a01b4cc219da76bd38022b7f946bee7d 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,77 +47,81 @@ 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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 `` 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 `
react-native-localization-settings
@@ -13,15 +13,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-localization-settings)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-localization-settings)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-library/react-native-localization-settings/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-localization-settings Releases](https://github.com/react-native-oh-library/react-native-localization-settings/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,11 +39,11 @@ yarn add @react-native-oh-tpl/react-native-localization-settings@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
-> [!TIP] 本示例依赖i18next react-i18next库，参照[react-i18next文档](https://react.i18next.com/guides/quick-start)进行引入
+> [!TIP] 本示例依赖 i18next react-i18next 库，参照[react-i18next](https://react.i18next.com/guides/quick-start)进行引入
```js
import * as React from "react";
@@ -116,18 +116,17 @@ const styles = StyleSheet.create({
});
```
+## Use Codegen
-## 使用 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](/en/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
{
@@ -138,18 +137,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -158,22 +154,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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNLocalizationSettingsPackage
+### 3. Introducing RNLocalizationSettingsPackage Package to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -187,32 +183,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-localization-settings Releases](https://github.com/react-native-oh-tpl/react-native-localization-settings/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-tpl/react-native-localization-settings/releases)
-## 静态方法
+## Static Methods
-> [!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.
> [!TIP] 在设置改变语言之前，确保手机系统添加相应语言
@@ -222,10 +218,10 @@ ohpm install
| getLanguage() | Function to get current language. | function | no | iOS/Android | yes |
| setLanguage() | Function to set the current language. | function | no | iOS/Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/jakex7/react-native-localization-settings/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/jakex7/react-native-localization-settings/blob/main/LICENSE).
diff --git a/en/react-native-mail.md b/en/react-native-mail.md
index 60d221eb16343ac0cf2807e616eed49e2db50f9b..2a7106f611aac83ae0f76e5da66b3fa75fe6c743 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).
-进入到工程目录并输入以下命令：
+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](/en/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](/en/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 404346a0077f3c66740674b06f91b75b6e0ea1ee..e8be7716b1298a4fdc8dcc5fec9f8d6ab98db851 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) =>
- {
- 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) => (
+ {
+ 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工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-maps. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@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)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-maps](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-maps.md#link) to add it to your project.
-## 约束与限制
+## 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**](/en/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 and Returns
-| 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 57d9b4dbde69f610af4ae1576dfa22e3c5d5d8c8..ad3bdb1fc624fe5141c0a86e02fcb78b6921371e 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,28 +66,28 @@ 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 组件
+## Markdown components
默认导出 Markdown 组件
Markdown 组件核心功能就是支持 Markdowm 语法格式的渲染，语法格式为（说明:`copy`为符合 Markdown 语法的字符串）：`{copy} `。
说明：`copy`为组件支持的满足 Markdown 语法格式的字符串，具体支持的语法格式，详见：[Syntax Support](https://github.com/mientjan/react-native-markdown-renderer/blob/master/README.md)
-### 组件属性
+### Components 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-mask-text.md b/en/react-native-mask-text.md
index c36b0483aff808077751213efb77b41c4762a4fe..9bd4860ba63391d8277f509aa89baa529db7a0a0 100644
--- a/en/react-native-mask-text.md
+++ b/en/react-native-mask-text.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-mask-text
@@ -12,11 +12,11 @@
-> [!TIP] [Github 地址](https://github.com/akinncar/react-native-mask-text)
+> [!TIP] [ GitHub address](https://github.com/akinncar/react-native-mask-text)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -34,9 +34,9 @@ yarn add react-native-mask-text@0.14.2
-下面的代码展示了这个库的基本使用场景：
+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 } from "react";
@@ -44,99 +44,99 @@ import { StyleSheet, Text, View } from "react-native";
import { MaskedTextInput, MaskedText } from "react-native-mask-text";
export default function App() {
- const [maskedValue, setMaskedValue] = useState("");
- const [unMaskedValue, setUnmaskedValue] = useState("");
-
- const [currencyMaskedValue, setCurrencyMaskedValue] = useState("");
- const [currencyUnMaskedValue, setCurrencyUnmaskedValue] = useState("");
-
- return (
-
- MaskedTextInput Component:
- {
- setMaskedValue(text);
- setUnmaskedValue(rawText);
- }}
- style={styles.input}
- keyboardType="numeric"
- />
- Raw Text: {unMaskedValue}
- Masked Text: {maskedValue}
-
- MaskedTextInput Component with Currency:
- {
- setCurrencyMaskedValue(text);
- setCurrencyUnmaskedValue(rawText);
- }}
- style={styles.input}
- keyboardType="numeric"
- />
- Raw Text: {currencyUnMaskedValue}
- Masked Text: {currencyMaskedValue}
-
- MaskedText Component:
-
- 30081990
-
-
- );
+ const [maskedValue, setMaskedValue] = useState("");
+ const [unMaskedValue, setUnmaskedValue] = useState("");
+
+ const [currencyMaskedValue, setCurrencyMaskedValue] = useState("");
+ const [currencyUnMaskedValue, setCurrencyUnmaskedValue] = useState("");
+
+ return (
+
+ MaskedTextInput Component:
+ {
+ setMaskedValue(text);
+ setUnmaskedValue(rawText);
+ }}
+ style={styles.input}
+ keyboardType="numeric"
+ />
+ Raw Text: {unMaskedValue}
+ Masked Text: {maskedValue}
+
+ MaskedTextInput Component with Currency:
+ {
+ setCurrencyMaskedValue(text);
+ setCurrencyUnmaskedValue(rawText);
+ }}
+ style={styles.input}
+ keyboardType="numeric"
+ />
+ Raw Text: {currencyUnMaskedValue}
+ Masked Text: {currencyMaskedValue}
+
+ MaskedText Component:
+
+ 30081990
+
+
+ );
}
const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: "center",
- backgroundColor: "#ecf0f1",
- padding: 8
- },
- title: {
- margin: 24,
- fontSize: 24,
- textAlign: "center",
- fontWeight: "bold"
- },
- paragraph: {
- margin: 24,
- fontSize: 18,
- textAlign: "center"
- },
- input: {
- height: 40,
- margin: 12,
- borderWidth: 1
- }
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ backgroundColor: "#ecf0f1",
+ padding: 8,
+ },
+ title: {
+ margin: 24,
+ fontSize: 24,
+ textAlign: "center",
+ fontWeight: "bold",
+ },
+ paragraph: {
+ margin: 24,
+ fontSize: 18,
+ textAlign: "center",
+ },
+ input: {
+ height: 40,
+ margin: 12,
+ borderWidth: 1,
+ },
});
```
-## 约束与限制
+## 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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 |
-| --- | --- | --- | --- | --- | --- | --- |
-| type | Show type | String (enum) `custom`, `date`, `time`,`currency` | custom | no | All | yes |
-| mask | Custom Mask. Pattern used in masked components | `9` - accept digit. `A` - accept alpha. `S` - accept alphanumeric. | null | no | All | yes |
+| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
+| ---- | ---------------------------------------------- | ------------------------------------------------------------------ | ------- | -------- | -------- | ----------------- |
+| type | Show type | String (enum) `custom`, `date`, `time`,`currency` | custom | no | All | yes |
+| mask | Custom Mask. Pattern used in masked components | `9` - accept digit. `A` - accept alpha. `S` - accept alphanumeric. | null | no | All | yes |
### Date Mask
@@ -170,10 +170,10 @@ These options only are used if you use prop `type="currency"` in your component:
| fractionGroupSize | Grouping size of the fraction part | number | null | No | All | yes |
| suffix | String to append | string | null | No | All | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/akinncar/react-native-mask-text/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/akinncar/react-native-mask-text/blob/main/LICENSE).
diff --git a/en/react-native-masked-text.md b/en/react-native-masked-text.md
index 78d67b2db4924ddad5a2da206ccb297feae0a3c2..67d6d415f030975a23f0aad6dc55a6f953b46a85 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,22 +75,22 @@ 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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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)
+> For details, see [react-native-masked-text](https://github.com/bhrott/react-native-masked-text)
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------------------- | --------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -103,7 +103,7 @@ const styles = StyleSheet.create({
| customTextInputProps | the props to be passed to the custom text input | object | NO | Android IOS | YES |
| includeRawValueInChangeText | provide the masked and the raw text in every text change. | boolean | NO | Android IOS | YES |
-#### 目前 type 支持
+#### currently type supports
| Name | Description | required | Type | Platform | HarmonyOS Support |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ | ----------- | ----------------- |
@@ -117,7 +117,7 @@ const styles = StyleSheet.create({
| only-numbers | accept only numbers | YES | string | Android IOS | YES |
| zip-code | Mask: 99999-999 | YES | string | Android IOS | YES |
-##### 不同 type 支持的 options
+##### options supported by different type
- Money type:
@@ -161,11 +161,11 @@ 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)
+> For details, see [react-native-masked-text](https://github.com/bhrott/react-native-masked-text)
##### MaskService
@@ -193,12 +193,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-material-menu.md b/en/react-native-material-menu.md
index 809bbc638cf34c4bce74e20b1ead11dded9c9526..c8448e3b2768b66901faba4a6f06b3003f99744e 100644
--- a/en/react-native-material-menu.md
+++ b/en/react-native-material-menu.md
@@ -1,4 +1,4 @@
-模板版本：v0.2.2
+Template version: v0.2.2
@@ -15,11 +15,9 @@
+> [!TIP] [ GitHub address](https://github.com/mxck/react-native-material-menu)
-> [!TIP] [Github 地址](https://github.com/mxck/react-native-material-menu)
-
-
-## 安装与使用
+## Installation and Usage
@@ -37,16 +35,15 @@ yarn add react-native-material-menu@2.0.0
-下面的代码展示了这个库的基本使用场景：
-
-> [!WARNING] 使用时 import 的库名不变。
+The following code shows the basic use scenario of the repository:
+> [!WARNING] The name of the imported repository remains unchanged.
```js
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { View, Text } from 'react-native';
-import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
+import { View, Text } from "react-native";
+import { Menu, MenuItem, MenuDivider } from "react-native-material-menu";
export default function App() {
const [visible, setVisible] = useState(false);
@@ -56,7 +53,9 @@ export default function App() {
const showMenu = () => setVisible(true);
return (
-
+
Show menu }
@@ -71,61 +70,55 @@ export default function App() {
);
}
-
-
```
+## Constraints
-## 约束与限制
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
+## Properties
-## 属性
+> [!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.
### Menu
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | ---- | ------------ |
-| children | Components rendered in menu (required) | ReactNode | yes | all | yes|
-| anchor | Button component (required) | ReactNode | yes | all | yes|
-| visible | Whether the Menu is currently visible | Boolean | no | all | yes|
-| style | Menu style. | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes|
-| onRequestClose | Callback when menu has become hidden | () => void | no | all | yes|
-| animationDuration | Changes show/hide animation duration. default is 300 | Number | no | all | yes|
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ---------------------------------------------------- | ---------------------------------------------------------- | -------- | -------- | ----------------- |
+| children | Components rendered in menu (required) | ReactNode | yes | all | yes |
+| anchor | Button component (required) | ReactNode | yes | all | yes |
+| visible | Whether the Menu is currently visible | Boolean | no | all | yes |
+| style | Menu style. | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes |
+| onRequestClose | Callback when menu has become hidden | () => void | no | all | yes |
+| animationDuration | Changes show/hide animation duration. default is 300 | Number | no | all | yes |
### MenuItem
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | ---- | ------------ |
-| children | Rendered children (required) | ReactNode | yes | all | yes|
-| disabled | Disabled flag. default is false. | Boolean | no | all | yes|
-| disabledTextColor | Disabled text color. default is #bdbdbd. | String | no | all | yes|
-| onPress | Called function on press | ()=>void | no | all | yes|
-| style | Container style | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes|
-| textStyle | Text style | [TextStyle](https://reactnative.dev/docs/text-style-props) | no | all | yes|
-| pressColor | Pressed color. default is #e0e0e0. | String | no | all | yes|
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ---------------------------------------- | ---------------------------------------------------------- | -------- | -------- | ----------------- |
+| children | Rendered children (required) | ReactNode | yes | all | yes |
+| disabled | Disabled flag. default is false. | Boolean | no | all | yes |
+| disabledTextColor | Disabled text color. default is #bdbdbd. | String | no | all | yes |
+| onPress | Called function on press | ()=>void | no | all | yes |
+| style | Container style | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes |
+| textStyle | Text style | [TextStyle](https://reactnative.dev/docs/text-style-props) | no | all | yes |
+| pressColor | Pressed color. default is #e0e0e0. | String | no | all | yes |
### MenuDivider
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | ---- | ------------ |
-| color | Line color. default is 'rgba(0,0,0,0.12)' | String | no | all | yes|
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----- | ----------------------------------------- | ------ | -------- | -------- | ----------------- |
+| color | Line color. default is 'rgba(0,0,0,0.12)' | String | no | all | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/mxck/react-native-material-menu/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/mxck/react-native-material-menu/blob/master/LICENSE).
diff --git a/en/react-native-material-ripple.md b/en/react-native-material-ripple.md
index 135c4ee3561f5d259db60c5d0fb1c877441c7a26..e62b4c9cee06fc76ac6c86ba28cb9496fd1f2d84 100644
--- a/en/react-native-material-ripple.md
+++ b/en/react-native-material-ripple.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-material-ripple
@@ -12,12 +12,11 @@
-> [!TIP] [Github 地址](https://github.com/n4kz/react-native-material-ripple)
+> [!TIP] [ GitHub address](https://github.com/n4kz/react-native-material-ripple)
-## 安装与使用
-
-进入到工程目录并输入以下命令：
+## Installation and Usage
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -31,7 +30,7 @@ npm install react-native-material-ripple@0.9.1
yarn add react-native-material-ripple@0.9.1
```
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```ts
import React, { useState } from "react";
@@ -125,21 +124,20 @@ export const MateriaRippleExample = () => {
};
```
-## 约束与限制
+## 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.400; ROM：3.0.0.25
2. RNOH：0.72.28; SDK：HarmonyOS NEXT Developer Beta3 5.0.0.36; IDE：DevEco Studio 5.0.3.535; ROM：5.0.0.36
-3. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 |
| ----------------------------- | ----------------------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -154,17 +152,16 @@ export const MateriaRippleExample = () => {
| `disabled` | Ripple should ignore touches(default:false) | Boolean | no | iOS/Android | yes |
| `onPressIn` | Touch moved in or started callback | Function | no | iOS/Android | yes |
| `onPressOut` | Touch moved out or terminated callback | Function | no | iOS/Android | yes |
-| `onPress` | Touch up inside bounds callback | Function | no | iOS/Android | yes |
+| `onPress` | Touch up inside bounds callback | Function | no | iOS/Android | yes |
| `onLongPress` | Touch delayed after onPressIn callback | Function | no | iOS/Android | yes |
| `onRippleAnimation` | Animation start callback | Function | no | iOS/Android | yes |
Other [TouchableWithoutFeedback](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html) properties will also work
-## 遗留问题
-
-## 其他
+## Known Issues
-## 开源协议
+## Others
-本项目基于 [The BSD License (BSD)](https://github.com/n4kz/react-native-material-ripple/blob/master/license.txt) ，请自由地享受和参与开源。
+## License
+This project is licensed under [The BSD License (BSD)](https://github.com/n4kz/react-native-material-ripple/blob/master/license.txt).
diff --git a/en/react-native-multiple-select.md b/en/react-native-multiple-select.md
index 8ea91e757606aab7625d10f52feea6c000ce29e0..38b289a74950c138fdbf3797e0eda109d65ede50 100644
--- a/en/react-native-multiple-select.md
+++ b/en/react-native-multiple-select.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-multiple-select
@@ -12,12 +12,11 @@
-> [!TIP] [Github 地址](https://github.com/toystars/react-native-multiple-select)
+> [!TIP] [ GitHub address](https://github.com/toystars/react-native-multiple-select)
+## Installation and Usage
-## 安装与使用
-
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -35,9 +34,9 @@ yarn add react-native-multiple-select@0.5.12
-下面的代码展示了这个库的基本使用场景：
+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';
@@ -126,13 +125,14 @@ export {MultiSelectExample}
```
-## 约束与限制
+
+## Constraints
### 注意事项
本库 HarmonyOS 侧需要引入字体包，如下所示。如已引用，则无需再次引入，可跳过本章节步骤，直接使用。
-在HarmonyOS工程中的entry/src/main/ets/pages/index.ets中添加如下代码：
+在 HarmonyOS 工程中的 entry/src/main/ets/pages/index.ets 中添加如下代码：
```diff
...
@@ -144,79 +144,80 @@ RNApp({
},
})
```
-### 兼容性
-本文档内容基于以下版本验证通过：
+### Compatibility
+
+This document is verified based on the following versions:
1. RNOH: 0.72.29; SDK: HarmonyOS NEXT Developer Beta6; IDE: DevEco Studio 5.0.3.706; ROM: 3.0.0.61;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-
-## 属性
-
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Prop | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ----- | -------- | -------- | -------- | -------- |
-| `altFontFamily` | Font family for searchInputPlaceholderText | String | no | All | yes |
-| `canAddItems` | Defaults to "false". This allows a user to add items to the list of items provided. You need to handle adding the new items in the onAddItem function prop. Items may be added with the return key on the native keyboard| Boolean | no | All | yes |
-| `displayKey` | Defaults to "name". This string will be used to select the key to display the objects in the items array| String | no | All | yes |
-| `fixedHeight` | Defaults to false. Specifies if select dropdown take height of content or a fixed height with a scrollBar (There is an issue with this behavior when component is nested in a ScrollView in which scroll event will only be dispatched to parent ScrollView and select component won't be scrollable). See this issue for more info| Boolean | no | All | yes |
-| `filterMethod` | Defaults to "partial". options: ["partial", "full"] Choose the logic on how the system filters items based on searchTerm. partial: checks all individual words and if at least one word matches will include that item. full: checks to ensure the item contains the full substring of searchterm in order minus any leading or trailing spaces| String | no | All | yes |
-| `flatListProps` | Properties for the FlatList. Pass any property that is required on the FlatList of the dropdown menu| Object | no | All | yes |
-| `fontFamily` | Custom font family to be used in component (affects all text except searchInputPlaceholderText described above)| String | no | All | yes |
-| `fontSize` | Font size for selected item name displayed as label for multiselect.| Number | no | All | yes |
-| `hideDropdown` | Defaults false. Hide dropdown menu with a cancel, and use arrow-back| Boolean | no | All | yes |
-| `hideSubmitButton` | Defaults to false. Hide submit button from dropdown, and rather use arrow-button in search field| Boolean | no | All | yes |
-| `hideTags` | Defaults to false. Hide tokenized selected items, in case selected items are to be shown somewhere else in view (check below for more info)| Boolean | no | All | yes |
-| `searchIcon` | Element or functional component to change the Search Icon| Element, Object, boolean, Function | no | All | yes |
-| `itemFontFamily` | Font family for each non-selected item in multi-select drop-down| String | no | All | yes |
-| `itemFontSize` |Font size used for each item in the multi-select drop-down| Number | no | All | yes |
-| `itemTextColor` | Text color for each non-selected item in multi-select drop-down| String | no | All | yes |
-| `items` |List of items to display in the multi-select component. JavaScript Array of objects. Each object must contain a name and unique identifier (Check sample above)| Array, control prop | yes | All | yes |
-| `noItemsText` | Text that replace default "no items to display"| String | no | All | yes |
-| `onAddItem` | JavaScript function passed in as an argument. The function is called everytime a new item is added, and receives the entire list of items. Here you should ensure that the new items are added to your provided list of items in addition to any other consequences of new items being added| function | no | All | yes |
-| `onChangeInput` | JavaScript function passed in as an argument. The function is called everytime TextInput is changed with the value| function | no | All | yes |
-| `onClearSelector` | JavaScript function passeed in as an argument. The function is called everytime back button is pressed| function | no | All | yes |
-| `onSelectedItemsChange` | JavaScript function passed in as an argument. The function is to be defined with an argument (selectedItems). Triggered when Submit button is clicked (for multi select) or item is clicked (for single select). (Check sample above)| function | yes | All | yes |
-| `onToggleList` | JavaScript function passed in as an argument. The function is called everytime the multiselect component is pressed| function | no | All | yes |
-| `searchInputPlaceholderText` | Placeholder text displayed in multi-select filter input| String | no | All | yes |
-| `searchInputStyle` | Style object for multi-select input element| Object | no | All | yes |
-| `selectText` | Text displayed in main component| String | no | All | yes |
-| `selectedText` | Text displayed when an item is selected can be replaced by any string| String | no | All | yes |
-| `selectedItemFontFamily` | Font family for each selected item in multi-select drop-down| String | no | All | yes |
-| `selectedItemIconColor` | Color for selected check icon for each selected item in multi-select drop-down| String | no | All | yes |
-| `selectedItemTextColor` |Text color for each selected item in multi-select drop-down| String | no | All | yes |
-| `single` | Toggles select component between single option and multi option| Boolean | no | All | yes |
-| `styleDropdownMenu` | Style the view of the dropdown menu| Style | no | All | yes |
-| `styleDropdownMenuSubsection` |Style the inner view of the dropdown menu| Style | no | All | yes |
-| `styleIndicator` | Style the Icon for indicator| Style | no | All | yes |
-| `styleInputGroup` | Style the Container of the Text Input Group| Style | no | All | yes |
-| `styleItemsContainer` |Style the Container of the items that are displayed in a list| Style | no | All | yes |
-| `styleListContainer` | Style the Container of main list| Style | no | All | yes |
-| `styleMainWrapper` | Style the Main Container of the MultiSelector| Style | no | All | yes |
-| `styleRowList` | Style the Row that is displayed after you| Style | no | All | yes |
-| `styleSelectorContainer` | Style the Container of the Selector when user clicks on the dropdown| Style | no | All | yes |
-| `styleTextDropdown` | Style text of the Dropdown| Text Style | no | All | yes |
-| `styleTextDropdownSelected` | Style text of the Dropdown selected| Text Style | no | All | yes |
-| `styleTextTag` | Style text of the tag| Text Style | no | All | yes |
-| `submitButtonColor` | Background color for submit button| String | no | All | yes |
-| `submitButtonText` |Text displayed on submit button| String | no | All | yes |
-| `tagBorderColor` | Border color for each selected item| String | no | All | yes |
-| `tagContainerStyle` | Style the container of the tag view| Style | no | All | yes |
-| `tagRemoveIconColor` | Color to be used for the remove icon in selected items list| String | no | All | yes |
-| `tagTextColor` | Text color for selected items list| String | no | All | yes |
-| `textColor` | Color for selected item name displayed as label for multiselect| String | no | All | yes |
-| `textInputProps` | Properties for the Text Input. Pass any property that is required on the text input| Object | no | All | yes |
-| `uniqueKey` | Unique identifier that is part of each item's properties. Used internally as means of identifying each item (Check sample below)| String | yes | All | yes |
-| `selectedItems` | List of selected items keys . JavaScript Array of strings, that can be instantiated with the component| Array, control prop | no | All | yes |
-| `removeSelected` | Filter selected items from list to be shown in List| Boolean | no | All | yes |
-
-
-## 遗留问题
-
-## 其他
-
-## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/toystars/react-native-multiple-select/blob/master/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+
+## Properties
+
+> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Prop | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
+| `altFontFamily` | Font family for searchInputPlaceholderText | String | no | All | yes |
+| `canAddItems` | Defaults to "false". This allows a user to add items to the list of items provided. You need to handle adding the new items in the onAddItem function prop. Items may be added with the return key on the native keyboard | Boolean | no | All | yes |
+| `displayKey` | Defaults to "name". This string will be used to select the key to display the objects in the items array | String | no | All | yes |
+| `fixedHeight` | Defaults to false. Specifies if select dropdown take height of content or a fixed height with a scrollBar (There is an issue with this behavior when component is nested in a ScrollView in which scroll event will only be dispatched to parent ScrollView and select component won't be scrollable). See this issue for more info | Boolean | no | All | yes |
+| `filterMethod` | Defaults to "partial". options: ["partial", "full"] Choose the logic on how the system filters items based on searchTerm. partial: checks all individual words and if at least one word matches will include that item. full: checks to ensure the item contains the full substring of searchterm in order minus any leading or trailing spaces | String | no | All | yes |
+| `flatListProps` | Properties for the FlatList. Pass any property that is required on the FlatList of the dropdown menu | Object | no | All | yes |
+| `fontFamily` | Custom font family to be used in component (affects all text except searchInputPlaceholderText described above) | String | no | All | yes |
+| `fontSize` | Font size for selected item name displayed as label for multiselect. | Number | no | All | yes |
+| `hideDropdown` | Defaults false. Hide dropdown menu with a cancel, and use arrow-back | Boolean | no | All | yes |
+| `hideSubmitButton` | Defaults to false. Hide submit button from dropdown, and rather use arrow-button in search field | Boolean | no | All | yes |
+| `hideTags` | Defaults to false. Hide tokenized selected items, in case selected items are to be shown somewhere else in view (check below for more info) | Boolean | no | All | yes |
+| `searchIcon` | Element or functional component to change the Search Icon | Element, Object, boolean, Function | no | All | yes |
+| `itemFontFamily` | Font family for each non-selected item in multi-select drop-down | String | no | All | yes |
+| `itemFontSize` | Font size used for each item in the multi-select drop-down | Number | no | All | yes |
+| `itemTextColor` | Text color for each non-selected item in multi-select drop-down | String | no | All | yes |
+| `items` | List of items to display in the multi-select component. JavaScript Array of objects. Each object must contain a name and unique identifier (Check sample above) | Array, control prop | yes | All | yes |
+| `noItemsText` | Text that replace default "no items to display" | String | no | All | yes |
+| `onAddItem` | JavaScript function passed in as an argument. The function is called everytime a new item is added, and receives the entire list of items. Here you should ensure that the new items are added to your provided list of items in addition to any other consequences of new items being added | function | no | All | yes |
+| `onChangeInput` | JavaScript function passed in as an argument. The function is called everytime TextInput is changed with the value | function | no | All | yes |
+| `onClearSelector` | JavaScript function passeed in as an argument. The function is called everytime back button is pressed | function | no | All | yes |
+| `onSelectedItemsChange` | JavaScript function passed in as an argument. The function is to be defined with an argument (selectedItems). Triggered when Submit button is clicked (for multi select) or item is clicked (for single select). (Check sample above) | function | yes | All | yes |
+| `onToggleList` | JavaScript function passed in as an argument. The function is called everytime the multiselect component is pressed | function | no | All | yes |
+| `searchInputPlaceholderText` | Placeholder text displayed in multi-select filter input | String | no | All | yes |
+| `searchInputStyle` | Style object for multi-select input element | Object | no | All | yes |
+| `selectText` | Text displayed in main component | String | no | All | yes |
+| `selectedText` | Text displayed when an item is selected can be replaced by any string | String | no | All | yes |
+| `selectedItemFontFamily` | Font family for each selected item in multi-select drop-down | String | no | All | yes |
+| `selectedItemIconColor` | Color for selected check icon for each selected item in multi-select drop-down | String | no | All | yes |
+| `selectedItemTextColor` | Text color for each selected item in multi-select drop-down | String | no | All | yes |
+| `single` | Toggles select component between single option and multi option | Boolean | no | All | yes |
+| `styleDropdownMenu` | Style the view of the dropdown menu | Style | no | All | yes |
+| `styleDropdownMenuSubsection` | Style the inner view of the dropdown menu | Style | no | All | yes |
+| `styleIndicator` | Style the Icon for indicator | Style | no | All | yes |
+| `styleInputGroup` | Style the Container of the Text Input Group | Style | no | All | yes |
+| `styleItemsContainer` | Style the Container of the items that are displayed in a list | Style | no | All | yes |
+| `styleListContainer` | Style the Container of main list | Style | no | All | yes |
+| `styleMainWrapper` | Style the Main Container of the MultiSelector | Style | no | All | yes |
+| `styleRowList` | Style the Row that is displayed after you | Style | no | All | yes |
+| `styleSelectorContainer` | Style the Container of the Selector when user clicks on the dropdown | Style | no | All | yes |
+| `styleTextDropdown` | Style text of the Dropdown | Text Style | no | All | yes |
+| `styleTextDropdownSelected` | Style text of the Dropdown selected | Text Style | no | All | yes |
+| `styleTextTag` | Style text of the tag | Text Style | no | All | yes |
+| `submitButtonColor` | Background color for submit button | String | no | All | yes |
+| `submitButtonText` | Text displayed on submit button | String | no | All | yes |
+| `tagBorderColor` | Border color for each selected item | String | no | All | yes |
+| `tagContainerStyle` | Style the container of the tag view | Style | no | All | yes |
+| `tagRemoveIconColor` | Color to be used for the remove icon in selected items list | String | no | All | yes |
+| `tagTextColor` | Text color for selected items list | String | no | All | yes |
+| `textColor` | Color for selected item name displayed as label for multiselect | String | no | All | yes |
+| `textInputProps` | Properties for the Text Input. Pass any property that is required on the text input | Object | no | All | yes |
+| `uniqueKey` | Unique identifier that is part of each item's properties. Used internally as means of identifying each item (Check sample below) | String | yes | All | yes |
+| `selectedItems` | List of selected items keys . JavaScript Array of strings, that can be instantiated with the component | Array, control prop | no | All | yes |
+| `removeSelected` | Filter selected items from list to be shown in List | Boolean | no | All | yes |
+
+## Known Issues
+
+## Others
+
+## License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/toystars/react-native-multiple-select/blob/master/LICENSE).
diff --git a/en/react-native-network-info.md b/en/react-native-network-info.md
index d68b387a14d5d990f81b22656ef58fab33ee3612..9040ab50877729ed748641253df17d7a8f8b8547 100644
--- a/en/react-native-network-info.md
+++ b/en/react-native-network-info.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-network-info
@@ -13,16 +13,15 @@
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-network-info)
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-network-info)
+## 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-network-info Releases](https://github.com/react-native-oh-library/react-native-network-info/releases).
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-network-info Releases](https://github.com/react-native-oh-library/react-native-network-info/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 +39,9 @@ yarn add @react-native-oh-tpl/react-native-network-info@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} from 'react';
@@ -153,17 +152,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](/en/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
{
@@ -174,18 +173,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -194,26 +190,26 @@ 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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNNetworkInfoPackage
+### 3. Introducing RNNetworkInfoPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
-
+
+ import { RNNetworkInfoPackage } from '@react-native-oh-tpl/react-native-network-info/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
@@ -224,32 +220,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-network-info Releases](https://github.com/react-native-oh-library/react-native-network-info/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-network-info Releases](https://github.com/react-native-oh-library/react-native-network-info/releases)
-### 权限要求
+### Permission Requirements
-在 entry 目录下的 module.json5 中添加wifi和网络信息权限
+在 entry 目录下的 module.json5 中添加 wifi 和网络信息权限
-打开entry/src/main/module.json5，添加：
+Open the `entry/src/main/module.json5` file and add the following code:
```json
...
@@ -263,27 +259,27 @@ ohpm install
]
```
-## 静态方法
+## Static Methods
-> [!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
--- | -- | -- | -- | -- | --
-getSSID | Get SSID | Function | no | All | yes
-getBSSID | Get BSSID | Function | no | All | yes
-getBroadcast | Get Broadcast | Function | no | All | yes
-getIPAddress | Get Local IP | Function | no | All | yes
-getIPV4Address | Get IPv4 IP (priority: WiFi first, cellular second) | Function | no | All | yes
-getSubnet | Get Subnet | Function | no | All | yes
-getGatewayIPAddress | Get Default Gateway IP | Function | no | All | yes
-getFrequency | Get frequency | Function | no | Android | yes
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | --------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| getSSID | Get SSID | Function | no | All | yes |
+| getBSSID | Get BSSID | Function | no | All | yes |
+| getBroadcast | Get Broadcast | Function | no | All | yes |
+| getIPAddress | Get Local IP | Function | no | All | yes |
+| getIPV4Address | Get IPv4 IP (priority: WiFi first, cellular second) | Function | no | All | yes |
+| getSubnet | Get Subnet | Function | no | All | yes |
+| getGatewayIPAddress | Get Default Gateway IP | Function | no | All | yes |
+| getFrequency | Get frequency | Function | no | Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/pusherman/react-native-network-info/blob/master/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/pusherman/react-native-network-info/blob/master/LICENSE).
diff --git a/en/react-native-notifier.md b/en/react-native-notifier.md
index 789d66f4793b624d00704de977b1bed72b9c8157..1e05af491a5f9ee284411b131af8e16370134bb6 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
@@ -13,11 +13,11 @@
+> [!TIP] [GitHub address](https://github.com/seniv/react-native-notifier)
->[!TIP] [Github 地址](https://github.com/seniv/react-native-notifier)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -31,130 +31,134 @@ npm install react-native-notifier@2.0.0
yarn add react-native-notifier@2.0.0
```
-
-
-下面的代码展示了这个库的基本使用场景：
-
+The following code shows the basic use scenario of the repository:
```js
-import * as React from 'react';
-import { View, Text,SafeAreaView,TouchableOpacity } from "react-native";
+import * as React from "react";
+import { View, Text, SafeAreaView, TouchableOpacity } from "react-native";
-import {Notifier, NotifierWrapper } from 'react-native-notifier';
+import { Notifier, NotifierWrapper } from "react-native-notifier";
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { GestureHandlerRootView } from "react-native-gesture-handler";
export const Notifier = () => {
return (
- <>
-
-
-
-
- Notifier.showNotification({
- title: '基本测试',
- description: '基本测试',
- })
- }>
- onPress
-
-
-
-
-
-)
+ <>
+
+
+
+
+ Notifier.showNotification({
+ title: "basic tests",
+ description: "basic tests",
+ })
+ }
+ >
+ onPress
+
+
+
+
+
+ );
};
```
+
## Link
-本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/react-native-gesture-handler 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入
-## 约束与限制
-### 兼容性
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project.
-本文档内容基于以下版本验证通过:
+## 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)
+For details, see [react-native-notifier docs](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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| omitGlobalMethodsHookup | If set to `true`, global `Notifier` methods will not control this component. It's useful in case you have more than one `NotifierWrapper` or `NotifierRoot` rendered. If enabled, the only way to display notifications is using refs. | Boolean | yes | All | No |
-| useRNScreensOverlay | use `FullWindowOverlay` component from `react-native-screens` library. If `true`, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS. This Option will work only if `react-native-screens` library is installed. iOS Only. | Boolean | yes | iOS | No |
-| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay. iOS Only. | ViewStyle | yes | iOS | No |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | -------- | ----------------- |
+| omitGlobalMethodsHookup | If set to `true`, global `Notifier` methods will not control this component. It's useful in case you have more than one `NotifierWrapper` or `NotifierRoot` rendered. If enabled, the only way to display notifications is using refs. | Boolean | yes | All | No |
+| useRNScreensOverlay | use `FullWindowOverlay` component from `react-native-screens` library. If `true`, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS. This Option will work only if `react-native-screens` library is installed. iOS Only. | Boolean | yes | iOS | No |
+| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay. iOS Only. | ViewStyle | yes | iOS | No |
## 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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| showNotification | Show notification with params. | Function | yes | All | yes |
-| hideNotification |Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes |
-| clearQueue |Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.| Function | yes | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| showNotification | Show notification with params. | Function | yes | All | yes |
+| hideNotification | Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes |
+| clearQueue | Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed. | Function | yes | All | yes |
### `showNotification`
+
```
Notifier.showNotification(params: object);
```
`params`
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- |
-| title | Title of notification. Passed to Component. | String| Yes | All |Yes |
-| description |Description of notification. Passed to Component. | String | Yes | All | Yes |
-| duration |Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No |All | Yes
-| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No |All | Yes
-| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | Yes
-| containerStyle |tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool |No | All | Yes
-| containerProps | Props of Animated Container | Object |No | All | Yes
-| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String |No | All | Yes
-| swipeEnabled |Can notification be hidden by swiping it out | bool |No | All | Yes
-| animationDuration | How fast notification will appear/disappear | Number |No | All | Yes
-| showAnimationDuration | How fast notification will appear. | Number |No | All | Yes
-| hideAnimationDuration | How fast notification will disappear.| Number |No | All | Yes
-| easing | Animation easing. Details:[easing](https://reactnative.dev/docs/easing) | Easing |No | All | Yes
-| showEasing | Show Animation easing.| Easing |No | All | Yes
-| hideEasing |Hide Animation easing. | Easing |No | All | Yes
-| onShown | Function called when entering animation is finished | () => void |No | All | Yes
-| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes
-| onHidden |Function called when notification completely hidden | () => void |No | All | Yes
-| onPress | Function called when user press on notification | () => void |No | All | Yes
-| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes
-| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes
-| swipeEasing | Animation easing after user finished swiping | Easing |No | All | Yes
-| swipeAnimationDuration | How fast should be animation after user finished swiping | Number |No | All | Yes
-| translucentStatusBar | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number |No | Android | No
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | -------- | ----------------- |
+| title | Title of notification. Passed to Component. | String | Yes | All | Yes |
+| description | Description of notification. Passed to Component. | String | Yes | All | Yes |
+| duration | Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No | All | Yes |
+| Component | Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No | All | Yes |
+| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No | All | Yes |
+| containerStyle | tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool | No | All | Yes |
+| containerProps | Props of Animated Container | Object | No | All | Yes |
+| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String | No | All | Yes |
+| swipeEnabled | Can notification be hidden by swiping it out | bool | No | All | Yes |
+| animationDuration | How fast notification will appear/disappear | Number | No | All | Yes |
+| showAnimationDuration | How fast notification will appear. | Number | No | All | Yes |
+| hideAnimationDuration | How fast notification will disappear. | Number | No | All | Yes |
+| easing | Animation easing. Details:[easing](https://reactnative.dev/docs/easing) | Easing | No | All | Yes |
+| showEasing | Show Animation easing. | Easing | No | All | Yes |
+| hideEasing | Hide Animation easing. | Easing | No | All | Yes |
+| onShown | Function called when entering animation is finished | () => void | No | All | Yes |
+| onStartHiding | Function called when notification started hiding | () => void | No | All | Yes |
+| onHidden | Function called when notification completely hidden | () => void | No | All | Yes |
+| onPress | Function called when user press on notification | () => void | No | All | Yes |
+| hideOnPress | Should notification hide when user press on it | Boolean | No | All | Yes |
+| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number | No | All | Yes |
+| swipeEasing | Animation easing after user finished swiping | Easing | No | All | Yes |
+| swipeAnimationDuration | How fast should be animation after user finished swiping | Number | No | All | Yes |
+| translucentStatusBar | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number | No | Android | No |
### `hideNotification`
+
```
Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => void);
```
### `clearQueue`
+
```
Notifier.clearQueue(hideDisplayedNotification?: boolean);
```
@@ -170,57 +174,61 @@ By default, `reset` mode is used, which means every new notification clears the
In most cases, you will probably use only `reset` or `standby` modes.
All possible modes:
-| Mode | Effect |
-| ------------------- | ------------------------------------ |
+| Mode | Effect |
+| ------------------- | ------------------------------------ |
| reset | Clear notification queue and immediately display the new notification. Used by default.
| standby | Add notification to the end of the queue.
| 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].
-| Name | Type | Default | Description | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | ---- | -------- |
-| title | String | null | Title of notification. | All | Yes
-| description | String | null | Description of notification. | All | Yes
-| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes
-| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes
-| componentProps.imageSource | Object | null | Passed to
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.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+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 81ac5b7bed28e08a39cc87446b589812b22e3567..0af9ebe177a5ac89d5d4b208276ff5d560ec950c 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,20 +152,20 @@ 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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 |
| ------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -193,11 +193,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 |
| ------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -206,12 +206,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-quick-base64.md b/en/react-native-quick-base64.md
index 4b605dc86f074d7f18ef25c367fb0de4b873094f..9c64e1ea8e3aa2fed2ee5eb1793564ded21343be 100644
--- a/en/react-native-quick-base64.md
+++ b/en/react-native-quick-base64.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-quick-base64
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-quick-base64)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-quick-base64)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/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-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/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-quick-base64@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 } from 'react';
@@ -190,7 +190,7 @@ export function QuickBase64Test() {
}
/**
- * @param text
+ * @param text
* base64FromArrayBuffer方法接受一个Base64编码的字符串或ArrayBuffer，
* 以及一个可选的布尔值参数，该参数决定是否生成的Base64字符串是URL安全的。
* 这个方法将ArrayBuffer对象转换为Base64编码的字符串。
@@ -202,11 +202,11 @@ export function QuickBase64Test() {
}
}
- /**
+ /**
* @description base64转换Unit8Array 去除换行符
* @param text
* @param removeLinebreaks true
- *
+ *
*/
const onPressNBFABUrlSafe = (text: string | ArrayBuffer, urlSafe: boolean = false) => {
if (nativeModule?.base64FromArrayBuffer) {
@@ -215,13 +215,13 @@ export function QuickBase64Test() {
}
}
- /**
+ /**
* @description base64转换Unit8Array
* base64ToArrayBuffer方法接受一个Base64编码的字符串和一个可选的布尔值参数，
* 该参数决定是否在转换过程中删除换行符。这个方法将Base64编码的字符串转换为ArrayBuffer对象。
* @param text
* @param removeLinebreaks 默认值 false
- *
+ *
*/
const onPressNBTAB = (text: string) => {
if (nativeModule?.base64ToArrayBuffer) {
@@ -230,11 +230,11 @@ export function QuickBase64Test() {
}
}
- /**
+ /**
* @description base64转换Unit8Array 去除换行符
* @param text
* @param removeLinebreaks true
- *
+ *
*/
const onPressNBTABRemoveLinebreaks = (text: string, removeLinebreaks: boolean = false) => {
if (nativeModule?.base64ToArrayBuffer) {
@@ -421,17 +421,17 @@ const styles = StyleSheet.create({
});
```
-## 使用Codegen
+## Use Codegen
-本库未带rc.x的版本号是已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
+本库未带 rc.x 的版本号是已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/en/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
{
@@ -442,18 +442,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -463,22 +460,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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.配置 CMakeLists 和引入 GestureHandlerPackage
+### 3. Configuring CMakeLists and Introducing GestureHandlerPackage
-打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
```diff
project(rnapp)
@@ -516,7 +513,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"
@@ -533,9 +530,9 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4.在 ArkTs 侧引入 Gesture Handler Package
+### 4. Introducing Gesture Handler Package to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
+ import { RNQuickBase64Package } from '@react-native-oh-tpl/react-native-quick-base64/ts';
@@ -548,51 +545,50 @@ 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
```
-然后编译、运行即可。
+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-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases)
-> [!TIP] [官方文档](https://github.com/craftzdog/react-native-quick-base64)
+> [!TIP] [Official Documenttation](https://github.com/craftzdog/react-native-quick-base64)
-## 静态方法
+## Static Methods
-以下是提供的静态方法数据:
-> [!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 |
-| ---------------- | --------------------------------------------------------------------------- | ------ | ------ | -------- | -------- |
-| btoa | Encodes a string in base64. | Function | no | All | yes |
-| atob | Decodes a base64 encoded string. | Function | no | All | yes |
-| toByteArray | Takes a base64 string and returns a byte array. Optional `removeLinebreaks` removes all `\n` characters. | Function | no | All | yes |
-| byteLength | Takes a base64 string and returns length of byte array. | Function | no | All | yes |
-| fromByteArray | Takes a byte array and returns a base64 string. Optional `urlSafe` flag `true` will use [the URL-safe dictionary](https://github.com/craftzdog/react-native-quick-base64/blob/9d02dfd02599ca104d2ed6c1e2d938ddd9d6cd15/cpp/base64.h#L75). | Function | no | All | yes |
-| shim | Adds `btoa` and `atob` functions to `global`. | Function | no | All | yes |
-| trimBase64Padding | Trims the `=` padding character(s) off of the end of a base64 encoded string. Also, for base64url encoded strings, it will trim off the trailing `.` character(s). | Function | no | All | yes |
-| getNative | Obtain the native base64ToArrayBuffer and base64FromArrayBuffer functions. | Function | no | All | yes |
+| NAME | Description | TYPE | Required | Platform | HarmonyOS Support |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| btoa | Encodes a string in base64. | Function | no | All | yes |
+| atob | Decodes a base64 encoded string. | Function | no | All | yes |
+| toByteArray | Takes a base64 string and returns a byte array. Optional `removeLinebreaks` removes all `\n` characters. | Function | no | All | yes |
+| byteLength | Takes a base64 string and returns length of byte array. | Function | no | All | yes |
+| fromByteArray | Takes a byte array and returns a base64 string. Optional `urlSafe` flag `true` will use [the URL-safe dictionary](https://github.com/craftzdog/react-native-quick-base64/blob/9d02dfd02599ca104d2ed6c1e2d938ddd9d6cd15/cpp/base64.h#L75). | Function | no | All | yes |
+| shim | Adds `btoa` and `atob` functions to `global`. | Function | no | All | yes |
+| trimBase64Padding | Trims the `=` padding character(s) off of the end of a base64 encoded string. Also, for base64url encoded strings, it will trim off the trailing `.` character(s). | Function | no | All | yes |
+| getNative | Obtain the native base64ToArrayBuffer and base64FromArrayBuffer functions. | Function | no | All | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-quick-base64/blob/sig/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-quick-base64/blob/sig/LICENSE).
diff --git a/en/react-native-reanimated-bottom-sheet.md b/en/react-native-reanimated-bottom-sheet.md
index 5a65aca56edb0c6d25bda410c4c30a2374efcdd6..f503f15c71678d90bd6e20bfdb75af8be3edea81 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).
-进入到工程目录并输入以下命令：
+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",
+ }}
+ >
+
sheetRef?.current.snapTo(2)}
@@ -99,70 +101,70 @@ export default function () {
snapPoints={[200, 100, 0]}
initialSnap={0}
renderHeader={renderHeader}
- renderContent={renderContent} />
+ renderContent={renderContent}
+ />
- )
+ );
}
-
```
## Link
-本库依赖以下三方库，请查看对应文档：
-+ [@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)
-+ [@react-native-oh-tpl/bottom-sheet](/zh-cn/react-native-bottom-sheet.md)
+This repository depends on the following libraries, please refer to the corresponding documentation:
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+- [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md)
+- [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)
+- [@react-native-oh-tpl/bottom-sheet](/en/react-native-bottom-sheet.md)
-如未引入请参照[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-## 约束与限制
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project.
-### 兼容性
+## Constraints
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+### Compatibility
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-reanimated-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/releases)
+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-library/react-native-reanimated-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/releases)
-详情见[react-native-reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
+## Properties
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+For details, see [react-native-reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
-> [!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.。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| snapPoints | E.g. [300, 200, 0]. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom. Note: Array values must be in descending order. | array | yes | all | yes
-| initialSnap | Determines initial snap point of bottom sheet. The value is the index from snapPoints. | number | no | all | yes
-| renderContent | Method for rendering scrollable content of bottom sheet.| React.ReactNode | no | all | yes
-| renderHeader | Method for rendering non-scrollable header of bottom sheet. | React.ReactNode | no | all | yes
-|enabledGestureInteraction | Defines if bottom sheet could be scrollable by gesture. | boolean | no | all | yes
-| enabledHeaderGestureInteraction | Defines if bottom sheet header could be scrollable by gesture.| boolean | no | all | yes
-|enabledContentGestureInteraction|Defines if bottom sheet content could be scrollable by gesture.| boolean | no | all | yes
-| enabledContentTapInteraction | Defines whether bottom sheet content could be tapped. Note: If you use Touchable* components inside your renderContent, you'll have to switch this to false to make handlers like onPress work. (See this comment.) | boolean | no | all | no
-| enabledManualSnapping | If false blocks snapping using snapTo method. | boolean | no | no | no
-| enabledBottomClamp | If true block movement is clamped from bottom to minimal snapPoint. | boolean | no | all | yes
-| enabledBottomInitialAnimation | If true sheet will grows up from bottom to initial snapPoint.| boolean | no | all | yes
-| enabledInnerScrolling | Defines whether it's possible to scroll inner content of bottom sheet. | boolean | no | all | yes
-| callbackNode | reanimated node which holds position of bottom sheet, where 0 it the highest snap point and 1 is the lowest. | boolean | no | all | yes
-| contentPosition | reanimated node which holds position of bottom sheet's content (in dp) | reanimated node | no | all | yes
-| headerPosition | reanimated node which holds position of bottom sheet's header (in dp) | reanimated node | no | all | no
-| overdragResistanceFactor | `Defines how violently sheet has to stopped while overdragging. 0 means no overdrag | number | no | all | yes
-| springConfig | Overrides config for spring animation | object | no | all | yes
-| innerGestureHandlerRefs | Refs for gesture handlers used for building bottom sheet. The array consists fo three refs. The first for PanGH used for inner content scrolling. The second for PanGH used for header. The third for TapGH used for stopping scrolling the content. | array | no | all | no
-| simultaneousHandlers | OAccepts a react ref object or an array of refs to handler components. | Array> | no | all | yes
-| onOpenStart |Accepts a function to be called when the bottom sheet starts to open.| function | no | all | no
-| onOpenEnd | Accepts a function to be called when the bottom sheet is almost fully openned. | function | no | all | yes
-| onCloseStart | Accepts a function to be called when the bottom sheet starts to close. | function | no | all | yes
-| onCloseEnd | Accepts a function to be called when the bottom sheet is almost closing. | function | no | all | yes
-| callbackThreshold | Accepts a float value from 0 to 1 indicating the percentage (of the gesture movement) when the callbacks are gonna be called. | number | no | all | no
-| borderRadius | Border radius of content wrapper (excluding header). | number | no | all | yes
+> [!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 |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | -------- | ----------------- |
+| snapPoints | E.g. [300, 200, 0]. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom. Note: Array values must be in descending order. | array | yes | all | yes |
+| initialSnap | Determines initial snap point of bottom sheet. The value is the index from snapPoints. | number | no | all | yes |
+| renderContent | Method for rendering scrollable content of bottom sheet. | React.ReactNode | no | all | yes |
+| renderHeader | Method for rendering non-scrollable header of bottom sheet. | React.ReactNode | no | all | yes |
+| enabledGestureInteraction | Defines if bottom sheet could be scrollable by gesture. | boolean | no | all | yes |
+| enabledHeaderGestureInteraction | Defines if bottom sheet header could be scrollable by gesture. | boolean | no | all | yes |
+| enabledContentGestureInteraction | Defines if bottom sheet content could be scrollable by gesture. | boolean | no | all | yes |
+| enabledContentTapInteraction | Defines whether bottom sheet content could be tapped. Note: If you use Touchable\* components inside your renderContent, you'll have to switch this to false to make handlers like onPress work. (See this comment.) | boolean | no | all | no |
+| enabledManualSnapping | If false blocks snapping using snapTo method. | boolean | no | no | no |
+| enabledBottomClamp | If true block movement is clamped from bottom to minimal snapPoint. | boolean | no | all | yes |
+| enabledBottomInitialAnimation | If true sheet will grows up from bottom to initial snapPoint. | boolean | no | all | yes |
+| enabledInnerScrolling | Defines whether it's possible to scroll inner content of bottom sheet. | boolean | no | all | yes |
+| callbackNode | reanimated node which holds position of bottom sheet, where 0 it the highest snap point and 1 is the lowest. | boolean | no | all | yes |
+| contentPosition | reanimated node which holds position of bottom sheet's content (in dp) | reanimated node | no | all | yes |
+| headerPosition | reanimated node which holds position of bottom sheet's header (in dp) | reanimated node | no | all | no |
+| overdragResistanceFactor | `Defines how violently sheet has to stopped while overdragging. 0 means no overdrag | number | no | all | yes |
+| springConfig | Overrides config for spring animation | object | no | all | yes |
+| innerGestureHandlerRefs | Refs for gesture handlers used for building bottom sheet. The array consists fo three refs. The first for PanGH used for inner content scrolling. The second for PanGH used for header. The third for TapGH used for stopping scrolling the content. | array | no | all | no |
+| simultaneousHandlers | OAccepts a react ref object or an array of refs to handler components. | Array> | no | all | yes |
+| onOpenStart | Accepts a function to be called when the bottom sheet starts to open. | function | no | all | no |
+| onOpenEnd | Accepts a function to be called when the bottom sheet is almost fully openned. | function | no | all | yes |
+| onCloseStart | Accepts a function to be called when the bottom sheet starts to close. | function | no | all | yes |
+| onCloseEnd | Accepts a function to be called when the bottom sheet is almost closing. | function | no | all | yes |
+| callbackThreshold | Accepts a float value from 0 to 1 indicating the percentage (of the gesture movement) when the callbacks are gonna be called. | number | no | all | no |
+| borderRadius | Border radius of content wrapper (excluding header). | number | no | all | yes |
-## 遗留问题
+## Known Issues
- [ ] enabledContentTapInteraction 暂不支持。 [issues#2](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/issues/2)
- [ ] simultaneousHandlers 暂不支持。 [issues#3](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/issues/3)
@@ -170,10 +172,11 @@ export default function () {
- [ ] callbackThreshold 暂不支持。[issues#6](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/issues/6)
- [ ] headerPosition 暂不支持。[issues#7](https://github.com/react-native-oh-library/react-native-reanimated-bottom-sheet/issues/7)
-## 其他
-- 本库基于[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)实现，若想实现完全可配置选项的高性能交互式bottomSheet，建议优先使用[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)。
-- enabledManualSnapping原库未实现该属性。
+## Others
+
+- 本库基于[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)实现，若想实现完全可配置选项的高性能交互式 bottomSheet，建议优先使用[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)。
+- enabledManualSnapping 原库未实现该属性。
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/LICENSE.md) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/LICENSE.md).
diff --git a/en/react-native-recaptcha-that-works.md b/en/react-native-recaptcha-that-works.md
index fbf7b022660cd3707cd9f2579493b76866581071..f685a86af4bbff87bb698b2e0aaee5f27291456b 100644
--- a/en/react-native-recaptcha-that-works.md
+++ b/en/react-native-recaptcha-that-works.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-recaptcha-that-works
@@ -13,11 +13,11 @@
-> [!TIP] [Github 地址](https://github.com/douglasjunior/react-native-recaptcha-that-works)
+> [!TIP] [ GitHub address](https://github.com/douglasjunior/react-native-recaptcha-that-works)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -35,10 +35,10 @@ yarn add react-native-recaptcha-that-works@2.0.0
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```js
-import React, {useRef, useCallback, useState} from 'react';
+import React, { useRef, useCallback, useState } from "react";
import {
SafeAreaView,
StyleSheet,
@@ -47,27 +47,27 @@ import {
StatusBar,
Button,
Alert,
-} from 'react-native';
+} from "react-native";
-import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';
+import Recaptcha, { RecaptchaRef } from "react-native-recaptcha-that-works";
const styles = StyleSheet.create({
safeArea: {
flex: 1,
},
container: {
- backgroundColor: '#00ff00',
- justifyContent: 'center',
- alignItems: 'center',
+ backgroundColor: "#00ff00",
+ justifyContent: "center",
+ alignItems: "center",
flex: 1,
},
});
const App = () => {
- const size = 'invisible';
- const [token, setToken] = useState('');
+ const size = "invisible";
+ const [token, setToken] = useState("");
- const $recaptcha = useRef(null);
+ const $recaptcha = (useRef < RecaptchaRef) | (null > null);
const handleOpenPress = useCallback(() => {
$recaptcha.current?.open();
@@ -97,15 +97,15 @@ const App = () => {
baseUrl="http://127.0.0.1"
size={size}
theme="dark"
- onLoad={() => Alert.alert('onLoad event')}
- onClose={() => Alert.alert('onClose event')}
+ onLoad={() => Alert.alert("onLoad event")}
+ onClose={() => Alert.alert("onClose event")}
onError={(err) => {
- Alert.alert('onError event');
+ Alert.alert("onError event");
console.warn(err);
}}
- onExpire={() => Alert.alert('onExpire event')}
+ onExpire={() => Alert.alert("onExpire event")}
onVerify={(token) => {
- Alert.alert('onVerify event');
+ Alert.alert("onVerify event");
setToken(token);
}}
enterprise={false}
@@ -116,20 +116,20 @@ const App = () => {
};
```
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.28; OH SDK: HarmonyOS-Next-DB2 5.0.0.31 (API Version 12 Beta2); IDE: DevEco Studio: 5.0.3.500; ROM: 3.0.0.31;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -153,21 +153,21 @@ const App = () => {
| hideBadge | When `size = 'invisible'`, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. [See detail](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed). | `boolean` | no | iOS,Android | yes |
| enterprise | Use the new [reCAPTCHA Enterprise API](https://cloud.google.com/recaptcha-enterprise/docs/using-features). Note: for enterprise you need to choose the `size` [when creating the `siteKey`](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/55#issuecomment-2107089307). | `boolean` (enterprise) | no | iOS,Android | yes |
-## 静态方法
+## Static Methods
-> [!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 |
| ----- | -------------------------- | ---------- | -------- | ----------- | ----------------- |
| open | Open the reCAPTCHA Modal. | `function` | no | iOS,Android | yes |
| close | Close the reCAPTCHA Modal. | `function` | no | iOS,Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/LICENSE).
diff --git a/en/react-native-responsive-fontsize.md b/en/react-native-responsive-fontsize.md
index b2ae3ab62a6ca8cf925888c8235bf5a6c4bba9f1..ad774e506b8a061f30d991ee4b74f6c1a20b07c3 100644
--- a/en/react-native-responsive-fontsize.md
+++ b/en/react-native-responsive-fontsize.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-responsive-fontsize
@@ -13,13 +13,13 @@
+> [!TIP] [GitHub address](https://github.com/heyman333/react-native-responsive-fontSize)
+## Installation and Usage
-> [!TIP] [Github 地址](https://github.com/heyman333/react-native-responsive-fontSize)
-
-## 安装与使用
-进入到工程目录并输入以下命令：
+
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -35,11 +35,11 @@ $ yarn add react-native-responsive-fontsize@0.5.1
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
```js
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet } from "react-native";
const styles = StyleSheet.create({
welcome: {
@@ -55,7 +55,14 @@ const styles = StyleSheet.create({
});
const App = () => {
return (
-
+
fontSize used RFValue(24, 580):
Hello World1
@@ -65,47 +72,49 @@ const App = () => {
Hello World2
- )
-}
+ );
+};
export default App;
```
-## 约束与限制
-### 兼容性
+## 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;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 静态方法
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+## Static Methods
+
+> [!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 |
-| ------------ | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | --------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
| RFPercentage | The font size is calculated as a percentage of the height(`width` in landscape mode) of the device. | function | no | Android/iOS | yes |
-| RFValue | The font size is calculated based on standardScreenHeight and passed value | function | no | Android/iOS | yes |
+| RFValue | The font size is calculated based on standardScreenHeight and passed value | function | no | Android/iOS | yes |
-**RFPercentage参数**
+**RFPercentage parameter**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------- | ----------- | ------ | -------- | ----------- | ----------------- |
| percent | font size | number | yes | Android/iOS | yes |
-**RFValue参数**
+**RFValue parameter**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| -------------------- | ---------------------- | ------ | -------- | ----------- | ----------------- |
| value | font size | number | yes | Android/iOS | yes |
| standardScreenHeight | standard screen height | number | no | Android/iOS | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/heyman333/react-native-responsive-fontSize/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/heyman333/react-native-responsive-fontSize/blob/master/LICENSE).
diff --git a/en/react-native-safe-modules.md b/en/react-native-safe-modules.md
index f2164016009e299dcba730c3b2c06e0baf08da42..c2510ca1a40210309e1a196f44f4cedb10fa4205 100644
--- a/en/react-native-safe-modules.md
+++ b/en/react-native-safe-modules.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-safe-modules
@@ -13,15 +13,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-safe-modules)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-safe-modules)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/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-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/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,33 +39,33 @@ yarn add @react-native-oh-tpl/react-native-safe-modules@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';
-import { View, Button } from 'react-native';
-import SafeModule from 'react-native-safe-modules';
+import React from "react";
+import { View, Button } from "react-native";
+import SafeModule from "react-native-safe-modules";
const App = () => {
const myModule = SafeModule.create({
- moduleName: 'MyNativemodule',
+ moduleName: "MyNativemodule",
mock: {
- someAPI: () => 'doSomething'
- }
- })
- myModule.someAPI()
-
+ someAPI: () => "doSomething",
+ },
+ });
+ myModule.someAPI();
+
const NativeLottieView = SafeModule.component({
- viewName: 'LottieAnimationView',
+ viewName: "LottieAnimationView",
mockComponent: View,
});
-
+
return (
-
+
);
@@ -74,67 +74,65 @@ const App = () => {
export default App;
```
-## 约束与限制
+## 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-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases)
## API
### SafeModule.create(options)
-> [!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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes |
-| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes |
-| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes |
-| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes |
-| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- |
+| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes |
+| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes |
+| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes |
+| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes |
+| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes |
### SafeModule.module(options)
-> [!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 |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes |
-| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes |
-| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes |
-| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes |
-| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes |
+> [!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 |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- |
+| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes |
+| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes |
+| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes |
+| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes |
+| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes |
### SafeModule.component(options)
-> [!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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------------------------------ | ----------- | ------------------- | -------- | -------- | ------------------ |
-| options.viewName | 传入的组件名称 | string/string[] | yes | iOS,Android | yes |
-| options.mockComponent | 传入一个模拟的组件，当viewName查找不到的时候，component会返回这个模拟的组件 | React.ComponentType\ | yes | iOS,Android | yes |
-| options.componentOverrides | 根据版本获取其中定义的组件，如果和viewName相同，覆盖原生组件的React组件，需要确保返回的React组件是有效的 | object | no | no | no |
-| options.propOverrides | 根据版本获取其中定义的组件属性，如果是相同组件的相同属性，根据版本覆盖原生组件的属性，需要确保覆盖的属性在原生组件中存在 | object | no | no | no |
-| options.mock | 原生模块的模拟实现，原生模块中存在什么成员，可使用该属性自己模拟编写 | object | no | no | no |
-| options.getVersion | 返回本机模块版本的函数。仅在指定替代且不导出本机模块上的版本属性时才需要。默认值为x => x.VERSION。 | Function | no | no | no |
+> [!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 |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------- | ----------- | ----------------- |
+| options.viewName | 传入的组件名称 | string/string[] | yes | iOS,Android | yes |
+| options.mockComponent | 传入一个模拟的组件，当 viewName 查找不到的时候，component 会返回这个模拟的组件 | React.ComponentType\ | yes | iOS,Android | yes |
+| options.componentOverrides | 根据版本获取其中定义的组件，如果和 viewName 相同，覆盖原生组件的 React 组件，需要确保返回的 React 组件是有效的 | object | no | no | no |
+| options.propOverrides | 根据版本获取其中定义的组件 Properties，如果是相同组件的相同 Properties，根据版本覆盖原生组件的 Properties，需要确保覆盖的 Properties 在原生组件中存在 | object | no | no | no |
+| options.mock | 原生模块的模拟实现，原生模块中存在什么成员，可使用该 Properties 自己模拟编写 | object | no | no | no |
+| options.getVersion | 返回本机模块版本的函数。仅在指定替代且不导出本机模块上的版本 Properties 时才需要。默认值为 x => x.VERSION。 | Function | no | no | no |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-- component接口问题： 该接口在iOS和Android上均无法正常使用，不管输入的viewName是什么，都只会返回用户传递的mockComponent，无法获得封装后的组件，HarmonyOS与其表现一致:[issue#19](https://github.com/emilioicai/react-native-safe-modules/issues/19)。
+- component 接口问题： 该接口在 iOS 和 Android 上均无法正常使用，不管输入的 viewName 是什么，都只会返回用户传递的 mockComponent，无法获得封装后的组件，HarmonyOS 与其表现一致:[issue#19](https://github.com/emilioicai/react-native-safe-modules/issues/19)。
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/emilioicai/react-native-safe-modules/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/emilioicai/react-native-safe-modules/blob/master/LICENSE).
diff --git a/en/react-native-screenshot-prevent.md b/en/react-native-screenshot-prevent.md
index 932d6d9df47ab32ce471fe245cc0fc43fe241dbb..86ad77cb9817dba86193c33543b1cdd9f37bed41 100644
--- a/en/react-native-screenshot-prevent.md
+++ b/en/react-native-screenshot-prevent.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-screenshot-prevent
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-screenshot-prevent)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-screenshot-prevent)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/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-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/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-screenshot-prevent@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 } from "react";
@@ -66,17 +66,17 @@ useEffect(() => {
}, []);
```
-## 使用 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](/en/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
{
@@ -87,18 +87,15 @@ useEffect(() => {
}
```
-### 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": {
@@ -107,22 +104,22 @@ useEffect(() => {
}
```
-点击右上角的 `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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNScreenShotPreventPackage
+### 3. Introducing RNScreenShotPreventPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -136,28 +133,28 @@ 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-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-screenshot-prevent Releases](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases)
-### 权限要求
+### Permission Requirements
- 由于此库涉及开启窗口隐私模式，调用对应接口时则需要配置对应的权限，权限需配置在 entry/src/main 目录下 module.json5 文件中。需要打开 `entry/src/main/ets/module.json5`，添加：
@@ -180,11 +177,11 @@ ohpm install
默认导出 RNScreenshotPrevent 对象
-> [!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.
-#### RNScreenshotPrevent 方法
+#### RNScreenshotPrevent method
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -193,14 +190,14 @@ ohpm install
| enableSecureView | creates a hidden secureTextField which prevents Application UI capture on screenshots and allow uses imgUri as the source of the background image (can be both https://, file:///) | function | no | iOS | no |
| disableSecureView | remove a hidden secureTextField which prevents Application UI capture on screenshots | function | no | iOS | no |
-## 遗留问题
+## Known Issues
- [ ] iOS 支持创建隐藏的安全文本字段，防止应用程序 UI 捕获屏幕截图 [issue#3](https://github.com/react-native-oh-library/react-native-screenshot-prevent/issues/3)
- [ ] iOS 支持创建一个隐藏的安全文本字段，防止应用程序 UI 捕获屏幕截图，并使用 imgUri 作为背景图像的来源（可以是 https://, file:///） [issue#2](https://github.com/react-native-oh-library/react-native-screenshot-prevent/issues/2)
- [ ] iOS 支持移除隐藏的安全文本字段，允许应用程序 UI 捕获屏幕截图 [issue#1](https://github.com/react-native-oh-library/react-native-screenshot-prevent/issues/1)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/killserver/react-native-screenshot-prevent/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/killserver/react-native-screenshot-prevent/blob/main/LICENSE).
diff --git a/en/react-native-scroll-bottom-sheet.md b/en/react-native-scroll-bottom-sheet.md
index 3dc499320e48a00db61f5cadad8a8cb671341a4b..b071e8cd8653e4e46ad897f53d0460284cbeba16 100644
--- a/en/react-native-scroll-bottom-sheet.md
+++ b/en/react-native-scroll-bottom-sheet.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-scroll-bottom-sheet
@@ -14,13 +14,13 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-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-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases).
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -38,9 +38,9 @@ yarn add @react-native-oh-tpl/react-native-scroll-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, { useCallback, useMemo, useRef } from "react";
@@ -146,31 +146,31 @@ const styles = StyleSheet.create({
## Link
-本库依赖以下三方库，请查看对应文档：
+This repository depends on the following libraries, please refer to the corresponding documentation:
-- [@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)
-- [@react-native-oh-tpl/bottom-sheet](/zh-cn/react-native-bottom-sheet.md)
+- [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md)
+- [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)
+- [@react-native-oh-tpl/bottom-sheet](/en/react-native-bottom-sheet.md)
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project.
-## 约束与限制
+## 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-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-scroll-bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/releases)
-## 属性
+## Properties
-详情见[react-native-scroll-bottom-sheet](https://github.com/rgommezz/react-native-scroll-bottom-sheet)
+For details, see [react-native-scroll-bottom-sheet](https://github.com/rgommezz/react-native-scroll-bottom-sheet)
-> [!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 |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
@@ -188,19 +188,19 @@ const styles = StyleSheet.create({
| friction | Friction is the damping coefficient (0 to 1). The closer the damping coefficient is to 1, the more obvious the sliding trend is when the finger continues to slide to the bottom node. | number | no | all | yes |
| enableOverScroll | Allow drawer to be dragged beyond lowest snap point | boolean | no | all | yes |
-## Methods 方法
+## Static Methods
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------- | --------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
-| snapTo(index) | bottomSheetRef refers to the ref passed to the ScrollBottomSheet component. | function | no | iOS/Android | yes |
+| snapTo(index) | bottomSheetRef refers to the ref passed to the ScrollBottomSheet component. | function | no | iOS/Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
- 本库基于[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)实现，详见[issue#2](https://github.com/react-native-oh-library/react-native-scroll-bottom-sheet/pull/2)
- 若想实现完全可配置选项的高性能交互式 ScrollBottomSheet，建议优先使用[@gorhom/bottom-sheet](https://github.com/react-native-oh-library/react-native-bottom-sheet)。
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/rgommezz/react-native-scroll-bottom-sheet/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/rgommezz/react-native-scroll-bottom-sheet/blob/master/LICENSE).
diff --git a/en/react-native-securerandom.md b/en/react-native-securerandom.md
index d7dcf317d79165b87b628b32cbfc57b59ad2b9c4..8aa64981bba8021dbcf7410d97c0a181ac7cabab 100644
--- a/en/react-native-securerandom.md
+++ b/en/react-native-securerandom.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-securerandom
@@ -13,19 +13,19 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-securerandom)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-securerandom)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/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-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/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
+#### npm
```bash
npm install @react-native-oh-tpl/react-native-securerandom@file:#
@@ -39,60 +39,87 @@ yarn add @react-native-oh-tpl/react-native-securerandom@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
->[!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
```tsx
-
import React, { useState } from "react";
-import { Text, TouchableOpacity, View, TextInput, StyleSheet } from 'react-native';
-import { generateSecureRandom } from 'react-native-securerandom';
+import {
+ Text,
+ TouchableOpacity,
+ View,
+ TextInput,
+ StyleSheet,
+} from "react-native";
+import { generateSecureRandom } from "react-native-securerandom";
export default function secureRandomDemo(): JSX.Element {
-
- const [secureRandom, setSecureRandom] = useState('')
- const [size, setSize] = useState('30');
-
- return
-
- {secureRandom}
-
-
- {
- setSize(s);
- }}>
- {
- generateSecureRandom(Number(size)).then((myRandom:any) => {
- setSecureRandom(`${JSON.stringify(myRandom?.data)}`)
- }).catch((err)=>{
- console.log(err,'err')
+ const [secureRandom, setSecureRandom] = useState("");
+ const [size, setSize] = useState("30");
+
+ return (
+
+
+ {secureRandom}
+
+
+ {
+ setSize(s);
+ }}
+ >
+ {
+ generateSecureRandom(Number(size))
+ .then((myRandom: any) => {
+ setSecureRandom(`${JSON.stringify(myRandom?.data)}`);
})
- }} style={styles.btn}>
-
- secureRandom
-
+ .catch((err) => {
+ console.log(err, "err");
+ });
+ }}
+ style={styles.btn}
+ >
+ secureRandom
+ );
}
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 }
+ 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 },
});
```
-### 使用 Codegen
-本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 [Codegen](/zh-cn/link-source-code.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](/en/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.json` 添加 overrides字段
+### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
```json
{
@@ -103,18 +130,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": {
@@ -123,22 +147,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] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 SecureRandomPackage
+### 3. Introducing SecureRandomPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -152,41 +176,39 @@ 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
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+### Compatibility
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases)
+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-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/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 |
-|----------------|-------------------------------| -- | -------- | ----------- | ----------------- |
-| generateSecureRandom | A library to generate cryptographically-secure random byte. | Function | No | ios/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------- | ----------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| generateSecureRandom | A library to generate cryptographically-secure random byte. | Function | No | ios/Android | yes |
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/robhogan/react-native-securerandom/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/robhogan/react-native-securerandom/blob/main/LICENSE).
diff --git a/en/react-native-send-intent.md b/en/react-native-send-intent.md
index 7597c5f61fc63a62b132418360fefbdcd22c19d8..44b420acb0d0295c6340116122c20a2b493a2638 100644
--- a/en/react-native-send-intent.md
+++ b/en/react-native-send-intent.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-send-intent
@@ -12,19 +12,19 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-send-intent)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-send-intent)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-send-intent Releases](https://github.com/react-native-oh-library/react-native-send-intent/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-send-intent Releases](https://github.com/react-native-oh-library/react-native-send-intent/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
+#### npm
```bash
npm install @react-native-oh-tpl/react-native-send-intent@file:#
@@ -38,117 +38,119 @@ yarn add @react-native-oh-tpl/react-native-send-intent@file:#
+The following code shows the basic use scenario of the repository:
-下面的代码展示了这个库的基本使用场景：
-
->[!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
```tsx
-import React, { useState, useEffect } from 'react';
-import {Button, Text} from 'react-native';
-import NativeSendIntent from 'react-native-send-intent'
+import React, { useState, useEffect } from "react";
+import { Button, Text } from "react-native";
+import NativeSendIntent from "react-native-send-intent";
function SendIntent() {
-
- return (
- <>
- <>
- NativeSendIntent.sendPhoneDial
- {
- NativeSendIntent.sendPhoneDial('10086', false);
- }}
- title=""
- color="#841584"
- />
-
- <>
- NativeSendIntent.sendSms
- {
- NativeSendIntent.sendSms('100010', 'text SMS');
- }}
- title=""
- color="#DC143C"
- />
-
- <>
- NativeSendIntent.openCalendar
- {
- NativeSendIntent.openCalendar();
- }}
- title=""
- color="#D2691E"
- />
-
- <>
- NativeSendIntent.sendMail
- {
- NativeSendIntent.sendMail('mailto:someone@example.com', 'This%20is%20the%20subject', 'This%20is%20the%20body');
- }}
- title=""
- color="#B8860B"
- />
-
- <>
- NativeSendIntent.openMaps
- {
- NativeSendIntent.openMaps('武昌火车站');
- }}
- title=""
- color="#FF0000"
- />
-
- <>
- NativeSendIntent.openCamera
- {
- NativeSendIntent.openCamera();
- }}
- title=""
- color="#FF1493"
- />
-
- <>
- NativeSendIntent.openSettings
- {
- NativeSendIntent.openSettings('bluetooth_entry');
- }}
- title=""
- color="#8B4513"
- />
-
- <>
- NativeSendIntent.gotoHomeScreen
- {
- NativeSendIntent.gotoHomeScreen();
- }}
- title=""
- color="#006400"
- />
-
-
- );
-};
+ return (
+ <>
+ <>
+ NativeSendIntent.sendPhoneDial
+ {
+ NativeSendIntent.sendPhoneDial("10086", false);
+ }}
+ title=""
+ color="#841584"
+ />
+
+ <>
+ NativeSendIntent.sendSms
+ {
+ NativeSendIntent.sendSms("100010", "text SMS");
+ }}
+ title=""
+ color="#DC143C"
+ />
+
+ <>
+ NativeSendIntent.openCalendar
+ {
+ NativeSendIntent.openCalendar();
+ }}
+ title=""
+ color="#D2691E"
+ />
+
+ <>
+ NativeSendIntent.sendMail
+ {
+ NativeSendIntent.sendMail(
+ "mailto:someone@example.com",
+ "This%20is%20the%20subject",
+ "This%20is%20the%20body"
+ );
+ }}
+ title=""
+ color="#B8860B"
+ />
+
+ <>
+ NativeSendIntent.openMaps
+ {
+ NativeSendIntent.openMaps("Wuchang Railway Station");
+ }}
+ title=""
+ color="#FF0000"
+ />
+
+ <>
+ NativeSendIntent.openCamera
+ {
+ NativeSendIntent.openCamera();
+ }}
+ title=""
+ color="#FF1493"
+ />
+
+ <>
+ NativeSendIntent.openSettings
+ {
+ NativeSendIntent.openSettings("bluetooth_entry");
+ }}
+ title=""
+ color="#8B4513"
+ />
+
+ <>
+ NativeSendIntent.gotoHomeScreen
+ {
+ NativeSendIntent.gotoHomeScreen();
+ }}
+ title=""
+ color="#006400"
+ />
+
+
+ );
+}
export default SendIntent;
```
-## 使用 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](/en/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
{
@@ -159,18 +161,15 @@ export default SendIntent;
}
```
-### 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": {
@@ -178,22 +177,23 @@ export default SendIntent;
"@react-native-oh-tpl/react-native-send-intent": "file:../../node_modules/@react-native-oh-tpl/react-native-send-intent/harmony/send_intent.har"
}
```
-点击右上角的 `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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNSendIntentPackage
+### 3. Introducing RNSendIntentPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -208,26 +208,26 @@ 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-send-intent Releases](https://github.com/react-native-oh-library/react-native-send-intent/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-send-intent Releases](https://github.com/react-native-oh-library/react-native-send-intent/releases)
## API
@@ -265,16 +265,18 @@ ohpm install
| gotoHomeScreen | Jump to main screen | Function | no | Android | yes |
| openAppWithUri | Open the app and go to the app store | Function | no | Android | yes |
-## 遗留问题
- - [ ] react-native-send-intent部分方法未实现HarmonyOS化 [issue#2](https://github.com/react-native-oh-library/react-native-send-intent/issues/2)
+## Known Issues
+
+- [ ] react-native-send-intent 部分方法未实现 HarmonyOS 化 [issue#2](https://github.com/react-native-oh-library/react-native-send-intent/issues/2)
+
+## Others
-## 其他
- installRemoteApp(); 不支持通过一个链接下载一个包，进行安装，只能通过应用市场
-- shareTextToLine(); 共享的应用android源码为海外应用,无法打开
-- shareImageToInstagram(); Instagram为海外应用,无法打开
-- getVoiceMailNumber(); ICCID和号码信息为敏感数据，不开放(https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sim-V5)
-- getPhoneNumber(); ICCID和号码信息为敏感数据，不开放(https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sim-V5)
+- shareTextToLine(); 共享的应用 android 源码为海外应用,无法打开
+- shareImageToInstagram(); Instagram 为海外应用,无法打开
+- getVoiceMailNumber(); ICCID 和号码信息为敏感数据，不开放(https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sim-V5)
+- getPhoneNumber(); ICCID 和号码信息为敏感数据，不开放(https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sim-V5)
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/lucasferreira/react-native-send-intent?tab=readme-ov-file#license) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/lucasferreira/react-native-send-intent?tab=readme-ov-file#license).
diff --git a/en/react-native-sensitive-info.md b/en/react-native-sensitive-info.md
index af4f2a3964c6a024f539f08266b059242a6e3d35..730ea722efad2cd7840d14b2776213f9978d2a74 100644
--- a/en/react-native-sensitive-info.md
+++ b/en/react-native-sensitive-info.md
@@ -1,4 +1,4 @@
-模板版本：v0.2.2
+Template version: v0.2.2
react-native-sensitive-info
@@ -13,17 +13,15 @@
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-sensitive-info)
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-sensitive-info)
+## 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-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases).
-## 安装与使用
+Go to the project directory and execute the following instruction:
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases)，并下载适用版本的 tgz 包。
-
-进入到工程目录并输入以下命令：
-
-> [!TIP] # 处替换为 tgz 包的路径
+> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#).
@@ -41,62 +39,61 @@ yarn add @react-native-oh-tpl/react-native-sensitive-info@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, { useCallback, useState } from 'react';
-import { Alert, Button, SafeAreaView, Text } from 'react-native';
-import SInfo from 'react-native-sensitive-info';
+import React, { useCallback, useState } from "react";
+import { Alert, Button, SafeAreaView, Text } from "react-native";
+import SInfo from "react-native-sensitive-info";
const SensitiveInfoDemo = () => {
const handleAddUsingSetItemOnPress = useCallback(() => {
- SInfo.setItem('key1', 'value1', {
- sharedPreferencesName: 'exampleApp',
- keychainService: 'exampleApp',
+ SInfo.setItem("key1", "value1", {
+ sharedPreferencesName: "exampleApp",
+ keychainService: "exampleApp",
}).catch((err) => {
- Alert.alert('Error', err);
+ Alert.alert("Error", err);
});
}, []);
const handleReadingDataWithoutFingerprint = useCallback(async () => {
try {
- const data = await SInfo.getItem('key1', {
- sharedPreferencesName: 'exampleApp',
- keychainService: 'exampleApp',
+ const data = await SInfo.getItem("key1", {
+ sharedPreferencesName: "exampleApp",
+ keychainService: "exampleApp",
});
- Alert.alert('Data stored:', data);
+ Alert.alert("Data stored:", data);
} catch (err) {
- Alert.alert('Error', String(err));
+ Alert.alert("Error", String(err));
}
}, []);
-
- const [logText, setLogText] = useState('');
+ const [logText, setLogText] = useState("");
async function runTest() {
const options = {
- sharedPreferencesName: 'exampleAppTest',
- keychainService: 'exampleAppTest',
+ sharedPreferencesName: "exampleAppTest",
+ keychainService: "exampleAppTest",
};
- let dbgText = '';
+ let dbgText = "";
dbgText += `setItem(key1, value1): ${await SInfo.setItem(
- 'key1',
- 'value1',
- options,
+ "key1",
+ "value1",
+ options
)}\n`;
dbgText += `setItem(key2, value2): ${await SInfo.setItem(
- 'key2',
- 'value2',
- options,
+ "key2",
+ "value2",
+ options
)}\n`;
dbgText += `setItem(key3, value3): ${await SInfo.setItem(
- 'key3',
- 'value3',
- options,
+ "key3",
+ "value3",
+ options
)}\n`;
- dbgText += `getItem(key2): ${await SInfo.getItem('key2', options)}\n`;
- dbgText += `delItem(key2): ${await SInfo.deleteItem('key2', options)}\n`;
+ dbgText += `getItem(key2): ${await SInfo.getItem("key2", options)}\n`;
+ dbgText += `delItem(key2): ${await SInfo.deleteItem("key2", options)}\n`;
dbgText += `getAllItems():\n`;
const allItems = await SInfo.getAllItems(options);
for (const key in allItems) {
@@ -121,20 +118,19 @@ const SensitiveInfoDemo = () => {
);
};
export default SensitiveInfoDemo;
-
```
-## 使用 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](/en/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
{
@@ -145,18 +141,15 @@ export default SensitiveInfoDemo;
}
```
-### 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": {
@@ -165,27 +158,26 @@ export default SensitiveInfoDemo;
}
```
-点击右上角的 `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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNSensitiveInfoPackage
+### 3. Introducing RNSensitiveInfoPackage to ArkTS
-打开 entry/src/main/ets/组件RNPackagesFactory.ts，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
-
+
+ import { RNSensitiveInfoPackage } from '@react-native-oh-tpl/react-native-sensitive-info/ts';
@Builder
@@ -197,79 +189,76 @@ 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.
-### 兼容性
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases)
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+### Permission Requirements
+在 YourProject/entry/src/main/module.json5 补上配置
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-sensitive-info Releases](https://github.com/react-native-oh-library/react-native-sensitive-info/releases)
-
-
-### 权限要求
-在 YourProject/entry/src/main/module.json5补上配置
```js
"requestPermissions": [ { "name": "ohos.permission.ACCESS_BIOMETRIC" }, ]
```
## 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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- |
-| isSensorAvailable() | Indicates the overall availability of fingerprint sensor. It will resolve to true or false | function | no | Android、iOS | yes |
-| cancelFingerprintAuth () | Canceling fingerprint authentication | function | no | Android、iOS | yes |
-| hasEnrolledFingerprints () | It will return true if detected otherwise returns false | function | no | Android、iOS | yes |
-| setItem() | Insert new data into the storage. | function | yes | Android、iOS | yes |
-| getItem() | Get an item from storage | function | yes | Android、iOS | yes |
-| getAllItems() | Get all items from storage. | function | yes | Android、iOS | yes |
-| deleteItem() | Delete an item from storage | function | yes | Android、iOS | yes |
-| setInvalidatedByBiometricEnrollment() | Set invalid enrollment by biometrics | function | yes | Android | yes |
+[!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 |
+| ------------------------------------- | ------------------------------------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- |
+| isSensorAvailable() | Indicates the overall availability of fingerprint sensor. It will resolve to true or false | function | no | Android、iOS | yes |
+| cancelFingerprintAuth () | Canceling fingerprint authentication | function | no | Android、iOS | yes |
+| hasEnrolledFingerprints () | It will return true if detected otherwise returns false | function | no | Android、iOS | yes |
+| setItem() | Insert new data into the storage. | function | yes | Android、iOS | yes |
+| getItem() | Get an item from storage | function | yes | Android、iOS | yes |
+| getAllItems() | Get all items from storage. | function | yes | Android、iOS | yes |
+| deleteItem() | Delete an item from storage | function | yes | Android、iOS | yes |
+| setInvalidatedByBiometricEnrollment() | Set invalid enrollment by biometrics | function | yes | Android | yes |
#### **Options**
-[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- |
-| kSecAccessControl | A secure storage area provided for storing sensitive information such as passwords, keys, etc | object | no | iOS | no |
-| kSecAttrAccessible | Used to enhance data security | object | no | iOS | no |
-| kSecAttrSynchronizable | Set when adding or querying Keychain data items | boolean | no | iOS | no |
-| keychainService | A tool provided for securely storing sensitive information | string | no | iOS | no |
-| sharedPreferencesName |The name parameter used to specify the file name | string | no | Android | yes |
-| touchID | Unlock devices, verify identities, and make secure payments | boolean | no | Android、iOS | no |
-| showModal | display a dialog box | boolean | no | iOS | no |
-| kSecUseOperationPrompt | Use constants related to authentication | string | no | iOS | no |
-| kLocalizedFallbackTitle | Handling biometric authentication attributes such as Touch ID and Face ID | string | no | iOS | no |
-| strings | Android stores information | object | no | Android | no |
+[!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 |
+| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- |
+| kSecAccessControl | A secure storage area provided for storing sensitive information such as passwords, keys, etc | object | no | iOS | no |
+| kSecAttrAccessible | Used to enhance data security | object | no | iOS | no |
+| kSecAttrSynchronizable | Set when adding or querying Keychain data items | boolean | no | iOS | no |
+| keychainService | A tool provided for securely storing sensitive information | string | no | iOS | no |
+| sharedPreferencesName |The name parameter used to specify the file name | string | no | Android | yes |
+| touchID | Unlock devices, verify identities, and make secure payments | boolean | no | Android、iOS | no |
+| showModal | display a dialog box | boolean | no | iOS | no |
+| kSecUseOperationPrompt | Use constants related to authentication | string | no | iOS | no |
+| kLocalizedFallbackTitle | Handling biometric authentication attributes such as Touch ID and Face ID | string | no | iOS | no |
+| strings | Android stores information | object | no | Android | no |
+## Known Issues
-## 其他
-由于iOS用的Keychain系统，kSecAccessControl、 kSecAttrAccessible、 kSecAttrSynchronizable、keychainService、showModal、kSecUseOperationPrompt、kLocalizedFallbackTitle 这些属性是该系统独有，strings里面的header、description、hint、success、notRecognized、cancel、cancelled、这些是Android的Keystore系统所需要的，所以这里的属性HarmonyOS不能统一支持
+## Others
-## 开源协议
+由于 iOS 用的 Keychain 系统，kSecAccessControl、 kSecAttrAccessible、 kSecAttrSynchronizable、keychainService、showModal、kSecUseOperationPrompt、kLocalizedFallbackTitle 这些 Properties 是该系统独有，strings 里面的 header、description、hint、success、notRecognized、cancel、cancelled、这些是 Android 的 Keystore 系统所需要的，所以这里的 PropertiesHarmonyOS 不能统一支持
-本项目基于 [The MIT License (MIT)](https://github.com/mCodex/react-native-sensitive-info) ，请自由地享受和参与开源。
+## License
+This project is licensed under [The MIT License (MIT)](https://github.com/mCodex/react-native-sensitive-info).
diff --git a/en/react-native-shake.md b/en/react-native-shake.md
index 46720912042317decacdb6a1f18198a3600e5d04..51f23553e19a479d7d966bb291ea26e3e4ee92a1 100644
--- a/en/react-native-shake.md
+++ b/en/react-native-shake.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-shake
@@ -12,16 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-shake)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-shake)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-shake Releases](https://github.com/react-native-oh-library/react-native-shake/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-shake Releases](https://github.com/react-native-oh-library/react-native-shake/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,49 +38,51 @@ yarn add @react-native-oh-tpl/react-native-shake@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 } from 'react';
-import { Text, View } from 'react-native'
-import RNShake from 'react-native-shake';
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import RNShake from "react-native-shake";
export function ShakeExample() {
- const [result, setResult] = useState('')
- myComponent(setResult)
- return (
-
- shake（摇晃手机）
- {result}
-
- )
+ const [result, setResult] = useState < string > "";
+ myComponent(setResult);
+ return (
+
+ shake your phone
+ {result}
+
+ );
}
-export const myComponent = (setResult: React.Dispatch>) => {
- React.useEffect(() => {
- const subscription = RNShake.addListener(() => {
- setResult('shake listen success')
- })
- return () => {
- subscription.remove()
- }
- }, [])
-}
+export const myComponent = (
+ setResult: React.Dispatch>
+) => {
+ React.useEffect(() => {
+ const subscription = RNShake.addListener(() => {
+ setResult("shake listen success");
+ });
+ return () => {
+ subscription.remove();
+ };
+ }, []);
+};
+```
+## Use Codegen
-```
-## 使用 Codegen
+If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md).
-本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/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,18 +93,15 @@ export const myComponent = (setResult: React.Dispatch [!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": {
@@ -112,23 +110,22 @@ export const myComponent = (setResult: React.Dispatch [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)。
+Method 2: Directly link to the source code.
+> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).。
-### 3.在 ArkTs 侧引入 ShakePackage
+### 3. Introducing ShakePackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -143,32 +140,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
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+### Compatibility
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-shake Releases](https://github.com/react-native-oh-library/react-native-shake/releases)
+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-shake Releases](https://github.com/react-native-oh-library/react-native-shake/releases)
-### 权限要求
+### Permission Requirements
-此库接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH，权限需配置在entry/src/main目录下module.json5文件中
+此库接口需要 normal 权限：ohos.permission.ACCESS_BLUETOOTH，权限需配置在 entry/src/main 目录下 module.json5 文件中
```
"requestPermissions": [
@@ -180,19 +175,19 @@ 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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| addListener | add shake event listening | function | yes | ios/andriod | yes |
-| removeAllListeners | remove event listening | function | yes | ios/andriod | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | ------------------------- | -------- | -------- | ----------- | ----------------- |
+| addListener | add shake event listening | function | yes | ios/andriod | yes |
+| removeAllListeners | remove event listening | function | yes | ios/andriod | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/Doko-Demo-Doa/react-native-shake/blob/main/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/Doko-Demo-Doa/react-native-shake/blob/main/LICENSE).
diff --git a/en/react-native-signature-canvas.md b/en/react-native-signature-canvas.md
index 1a1b865a7d2d759e1c360ab8958058cbc777ea8a..7be416065967b3b3f1e9ceaea61749b178d93fe1 100644
--- a/en/react-native-signature-canvas.md
+++ b/en/react-native-signature-canvas.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-signature-canvas
@@ -13,9 +13,9 @@
-> [!TIP] [Github 地址](https://github.com/YanYuanFE/react-native-signature-canvas)
+> [!TIP] [GitHub address](https://github.com/YanYuanFE/react-native-signature-canvas)
-## 安装与使用
+## Installation and Usage
@@ -33,9 +33,9 @@ yarn add react-native-signature-canvas@4.7.2
-下面的代码展示了这个库的基本使用场景：
+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 } from "react";
@@ -105,108 +105,99 @@ const styles = StyleSheet.create({
},
});
```
+
## Link
-本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-webview. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-webview 文档](/zh-cn/react-native-webview.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-webview](/en/react-native-webview.md) to add it to your project.
-## 约束与限制
+## 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;
-## 属性
-
-### SignatureScreen
-
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| autoClear | should auto clear the signature after clicking the Confirm button |boolean| no | iOS/Android | yes |
-| backgroundColor | default is "rgba(255,255,255,0)" (transparent), background color of the canvas |string| no | iOS/Android | yes |
-| bgHeight | height of the background image |number| no | iOS/Android | yes |
-| bgWidth |width of the background image |number| no | iOS/Android | yes |
-| bgSrc | background image source uri (url) |string| no | iOS/Android | yes |
-| clearText |clear button text|string| no | iOS/Android | yes |
-| confirmText |save button text |string| no | iOS/Android | yes |
-| customHtml |html string that lets you modify things like the layout or elements |(injectedJavaScript: string) => string| no | iOS/Android | yes |
-| dataURL |default is "", Base64 string, draws saved signature from dataURL. |string| no | iOS/Android | yes |
-| descriptionText |description text for signature |string| no | iOS/Android | yes |
-| dotSize |radius of a single dot (not stroke width) |number| no | iOS/Android | yes |
-| imageType |"image/png" (default), "image/jpeg"、"image/svg+xml", imageType of exported signature|string| no | iOS/Android | yes |
-| minWidth |minimum width of a line. Defaults to 0.5 |number| no | iOS/Android | yes |
-| maxWidth |maximum width of a line. Defaults to 2.5 |number| no | iOS/Android | yes |
-| onOK |callback function after saving non-empty signature|function| no | iOS/Android | yes |
-| onEmpty |callback function after trying to save an empty signature|function| no | iOS/Android | yes |
-| onClear |callback function after clearing the signature|function| no | iOS/Android | yes |
-| onGetData |callback function when getData() is called |function| no | iOS/Android | yes |
-| onBegin |callback function when a new stroke is started |function| no | iOS/Android | yes |
-| onEnd |callback function when the stroke has ended |function| no | iOS/Android | yes |
-| onLoadEnd |callback function when the webview canvas load ended |function| no | iOS/Android | yes |
-| onUndo |callback function when undo() is called |function| no | iOS/Android | yes |
-| onRedo |callback function when redo() is called |function| no | iOS/Android | yes |
-| onDraw |callback function when drawing is enabled |function| no | iOS/Android | yes |
-| onErase |callback function when erasing is enabled |function| no | iOS/Android | yes |
-| onChangePenColor |callback function after changing the pen color|function| no | iOS/Android | yes |
-| onChangePenSize |callback function after changing the pen size |function| no | iOS/Android | yes |
-| overlayHeight |height of the overlay image |number| no | iOS/Android | yes |
-| overlayWidth |width of the overlay image |number| no | iOS/Android | yes |
-| overlaySrc |overlay image source uri (url) must be .png with a transparent background |string| no | iOS/Android | yes |
-| penColor |default is "black", color of pen|string| no | iOS/Android | yes |
-| rotated |rotate signature pad 90 degrees |boolean| no | iOS/Android | yes |
-| style |style of wrapper view|object| no | iOS/Android | yes |
-| trimWhitespace |trim image whitespace|boolean| no | iOS/Android | yes |
-| webStyle |webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |string| no | iOS/Android | yes |
-| androidLayerType |Sets the android webview layerType |none、software、hardware| no | Android | no |
-| androidHardwareAccelerationDisabled |androidHardwareAccelerationDisabled for react-native-webview. Default is false |boolean| no | Android | no |
-| showsVerticalScrollIndicator |Boolean value that determines whether a vertical scroll indicator is shown in the WebView, The default value is true.|boolean| no | iOS/Android | no |
-| nestedScrollEnabled |enable nested scrolling for use inside of a scrollview|boolean| no | no | no |
-
-
-
-
-## 静态方法
-
-
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| clearSignature |Clear the current signature |function| no | iOS/Android | yes |
-| changePenColor |Change pen color |function| no | iOS/Android | yes |
-| changePenSize |Change pen size |function| no | iOS/Android | yes |
-| draw |Enable drawing signature |function| no | iOS/Android | yes |
-| erase |Enable erasing signature |function| no | iOS/Android | yes |
-| getData |riggers the onGetData callback with a single data JSON string |function| no | iOS/Android | yes |
-| readSignature |Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks |function| no | iOS/Android | yes |
-| undo |Undo last stroke |function| no | iOS/Android | yes |
-| redo |Redo last stroke |function| no | iOS/Android | yes |
-
-
-
-## 遗留问题
-- [ ] showsVerticalScrollIndicator属性不生效: [issue#137](https://github.com/react-native-oh-library/react-native-webview/issues/137)
-
-## 其他
-
- 1、minDistance属性版本问题: 此属性在4.7.3版本生效，npm包最新版本为4.7.2，如需使用，请从[Github](https://github.com/YanYuanFE/react-native-signature-canvas)下载最新代码使用；
-
- 2、nestedScrollEnabled属性在 iOS,Android 不生效，harmonyOS与其表现一致；[issue#363](https://github.com/YanYuanFE/react-native-signature-canvas/issues/363)
-
-
-## 开源协议
-
-本项目基于 [The MIT License (MIT)](https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/LICENSE) ，请自由地享受和参与开源。
+## Properties
+
+### SignatureScreen
+
+> [!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 |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------- | ----------- | ----------------- |
+| autoClear | should auto clear the signature after clicking the Confirm button | boolean | no | iOS/Android | yes |
+| backgroundColor | default is "rgba(255,255,255,0)" (transparent), background color of the canvas | string | no | iOS/Android | yes |
+| bgHeight | height of the background image | number | no | iOS/Android | yes |
+| bgWidth | width of the background image | number | no | iOS/Android | yes |
+| bgSrc | background image source uri (url) | string | no | iOS/Android | yes |
+| clearText | clear button text | string | no | iOS/Android | yes |
+| confirmText | save button text | string | no | iOS/Android | yes |
+| customHtml | html string that lets you modify things like the layout or elements | (injectedJavaScript: string) => string | no | iOS/Android | yes |
+| dataURL | default is "", Base64 string, draws saved signature from dataURL. | string | no | iOS/Android | yes |
+| descriptionText | description text for signature | string | no | iOS/Android | yes |
+| dotSize | radius of a single dot (not stroke width) | number | no | iOS/Android | yes |
+| imageType | "image/png" (default), "image/jpeg"、"image/svg+xml", imageType of exported signature | string | no | iOS/Android | yes |
+| minWidth | minimum width of a line. Defaults to 0.5 | number | no | iOS/Android | yes |
+| maxWidth | maximum width of a line. Defaults to 2.5 | number | no | iOS/Android | yes |
+| onOK | callback function after saving non-empty signature | function | no | iOS/Android | yes |
+| onEmpty | callback function after trying to save an empty signature | function | no | iOS/Android | yes |
+| onClear | callback function after clearing the signature | function | no | iOS/Android | yes |
+| onGetData | callback function when getData() is called | function | no | iOS/Android | yes |
+| onBegin | callback function when a new stroke is started | function | no | iOS/Android | yes |
+| onEnd | callback function when the stroke has ended | function | no | iOS/Android | yes |
+| onLoadEnd | callback function when the webview canvas load ended | function | no | iOS/Android | yes |
+| onUndo | callback function when undo() is called | function | no | iOS/Android | yes |
+| onRedo | callback function when redo() is called | function | no | iOS/Android | yes |
+| onDraw | callback function when drawing is enabled | function | no | iOS/Android | yes |
+| onErase | callback function when erasing is enabled | function | no | iOS/Android | yes |
+| onChangePenColor | callback function after changing the pen color | function | no | iOS/Android | yes |
+| onChangePenSize | callback function after changing the pen size | function | no | iOS/Android | yes |
+| overlayHeight | height of the overlay image | number | no | iOS/Android | yes |
+| overlayWidth | width of the overlay image | number | no | iOS/Android | yes |
+| overlaySrc | overlay image source uri (url) must be .png with a transparent background | string | no | iOS/Android | yes |
+| penColor | default is "black", color of pen | string | no | iOS/Android | yes |
+| rotated | rotate signature pad 90 degrees | boolean | no | iOS/Android | yes |
+| style | style of wrapper view | object | no | iOS/Android | yes |
+| trimWhitespace | trim image whitespace | boolean | no | iOS/Android | yes |
+| webStyle | webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css | string | no | iOS/Android | yes |
+| androidLayerType | Sets the android webview layerType | none、software、hardware | no | Android | no |
+| androidHardwareAccelerationDisabled | androidHardwareAccelerationDisabled for react-native-webview. Default is false | boolean | no | Android | no |
+| showsVerticalScrollIndicator | Boolean value that determines whether a vertical scroll indicator is shown in the WebView, The default value is true. | boolean | no | iOS/Android | no |
+| nestedScrollEnabled | enable nested scrolling for use inside of a scrollview | boolean | no | no | no |
+
+## Properties
+
+> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------- | ------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| clearSignature | Clear the current signature | function | no | iOS/Android | yes |
+| changePenColor | Change pen color | function | no | iOS/Android | yes |
+| changePenSize | Change pen size | function | no | iOS/Android | yes |
+| draw | Enable drawing signature | function | no | iOS/Android | yes |
+| erase | Enable erasing signature | function | no | iOS/Android | yes |
+| getData | riggers the onGetData callback with a single data JSON string | function | no | iOS/Android | yes |
+| readSignature | Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks | function | no | iOS/Android | yes |
+| undo | Undo last stroke | function | no | iOS/Android | yes |
+| redo | Redo last stroke | function | no | iOS/Android | yes |
+
+## Known Issues
+
+- [ ] showsVerticalScrollIndicatorProperties 不生效: [issue#137](https://github.com/react-native-oh-library/react-native-webview/issues/137)
+
+## Others
+
+1、minDistanceProperties 版本问题: 此 Properties 在 4.7.3 版本生效，npm 包最新版本为 4.7.2，如需使用，请从[Github](https://github.com/YanYuanFE/react-native-signature-canvas)下载最新代码使用；
+
+2、nestedScrollEnabledProperties 在 iOS,Android 不生效，harmonyOS 与其表现一致；[issue#363](https://github.com/YanYuanFE/react-native-signature-canvas/issues/363)
+
+## License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/LICENSE).
diff --git a/en/react-native-snackbar.md b/en/react-native-snackbar.md
index 2942fbf614d58b4e810a4a7aa7213792a1467865..5be1cada8f6ccb393e39250f6e3e54482232b72c 100644
--- a/en/react-native-snackbar.md
+++ b/en/react-native-snackbar.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-snackbar
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-snackbar)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-snackbar)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/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-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/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-snackbar@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";
@@ -59,7 +59,7 @@ export const SnackbarTest = () => {
>
{
Snackbar.show({
text: "Hello harmony",
@@ -85,17 +85,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](/en/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.json` 添加 overrides 字段
+### 1.Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
```json
{
@@ -106,18 +106,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": {
@@ -126,22 +123,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNSnackbarPackage
+### 3. Introducing RNSnackbarPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -155,32 +152,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-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/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.
### Snackbar.show(options)
@@ -255,11 +252,11 @@ Where event is one of the following options :
| `Snackbar.DISMISS_EVENT_CONSECUTIVE` | `number` | 4 | Indicates that the Snackbar was dismissed from a new Snackbar being shown. | Android iOS | no |
| `Snackbar.SHOW_EVENT` | `number` | 5 | Indicates that Snackbar appears | Android iOS | no |
-## 静态方法
+## 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 |
| ------- | --------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -272,14 +269,14 @@ Where event is one of the following options :
| ------- | ----------- | ------ | -------- | ----------- | ----------------- |
| options | options | object | yes | Android iOS | partially |
-## 遗留问题
+## Known Issues
- [ ] 不支持 duration、numberOfLines、textColor、backgroundColor、fontFamily、rtl、action 等参数以及 dismiss()接口: [issue#1](https://github.com/react-native-oh-library/react-native-snackbar/issues/1)
- [ ] 与 Android 和 iOS 的样式有一定的差异: [issue#2](https://github.com/react-native-oh-library/react-native-snackbar/issues/2)
- [ ] 无法实现 Snackbar events：[issue#3](https://github.com/react-native-oh-library/react-native-snackbar/issues/3)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/cooperka/react-native-snackbar/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/cooperka/react-native-snackbar/blob/main/LICENSE).
diff --git a/en/react-native-step-indicator.md b/en/react-native-step-indicator.md
index 4407e588b15f961ccf823c9b4f916e6200002130..7d4de35b85aabe91925694fa85e2c3554802f839 100644
--- a/en/react-native-step-indicator.md
+++ b/en/react-native-step-indicator.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-step-indicator
@@ -13,11 +13,11 @@
-> [!TIP] [Github 地址](https://github.com/24ark/react-native-step-indicator)
+> [!TIP] [ GitHub address](https://github.com/24ark/react-native-step-indicator)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -35,7 +35,7 @@ yarn add react-native-step-indicator@1.0.3
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
#### Using a Component
@@ -121,7 +121,7 @@ export default function App() {
};
const renderStepIndicator = (params: any) => (
- 棒
+ good
);
const renderLabel = ({
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
### 在 ArkTs 侧引入和注册字体文件(非必选配置项)
-> [!TIP] 本项非必配项，当使用 customStyles 自定义属性中的 labelFontFamily 属性指定字体时才需配置
+> [!TIP] 本项非必配项，当使用 customStyles 自定义Properties中的 labelFontFamily Properties指定字体时才需配置
步骤一：
复制字体文件到 `entry/src/main/resources/rawfile/assets/assets/fonts` 目录下(如使用了外部字体文件，需要将\*.ttf 文件复制过来)
@@ -252,20 +252,20 @@ const styles = StyleSheet.create({
}
}
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.27; OH SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio: 5.0.3.400; ROM: 3.0.0.25;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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 | Default | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |------------ |
@@ -308,10 +308,10 @@ const styles = StyleSheet.create({
| labelFontFamily | Label fontFamily for custom fonts | string | no | | iOS,Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [Apache License 2.0](https://github.com/24ark/react-native-step-indicator/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [Apache License 2.0](https://github.com/24ark/react-native-step-indicator/blob/master/LICENSE).
diff --git a/en/react-native-sticky-parallax-header.md b/en/react-native-sticky-parallax-header.md
index e1042e869b92484da60b4a2e9ae78b4a9d659689..1889d9791b3d07be8538d06fe6a34795cbd53901 100644
--- a/en/react-native-sticky-parallax-header.md
+++ b/en/react-native-sticky-parallax-header.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-sticky-parallax-header
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/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-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/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-sticky-parallax-header@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";
@@ -139,37 +139,39 @@ const TabbedHeaderPagerExample: React.FC = () => {
);
};
```
+
## Link
-本库依赖以下三方库，请查看对应文档：
-+ [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)
-+ [@react-native-oh-tpl/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)
+This repository depends on the following libraries, please refer to the corresponding documentation:
+
+- [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)
+- [@react-native-oh-tpl/react-native-safe-area-context](/en/react-native-safe-area-context.md)
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-safe-area-context 文档](/zh-cn/react-native-safe-area-context.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-safe-area-context ](/en/react-native-safe-area-context.md) to add it to your project.
-## 约束与限制
+## 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-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/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-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases).
## Headers
包含 Tabbed Header Pager、Tabbed Header List、Details Header、Avatar Header、Custom Sticky Header 以及 FlashList Headers 几个大类
-### Tabbed Header Pager 组件
+### Tabbed Header Pager components
-Tabbed Header Pager 属性
+Tabbed Header Pager Properties
Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#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 |
| ------------------------------ | --------------------------------------- | ------------------------------------------------------ | -------- | ----------- | ----------------- |
@@ -216,21 +218,21 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
| titleStyle | 标题文字样式 | style = StyleProp | no | iOS/Android | yes |
| titleTestID | 标题测试 ID | string | no | iOS/Android | yes |
-### Methods 方法
+### Static Methods
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| -------- | --------------------------------------- | -------- | -------- | ----------- | ----------------- |
| goToPage | function - (pageNumber: number) => void | function | no | iOS/Android | no |
-### Tabbed Header List 组件
+### Tabbed Header List components
-Tabbed Header List 属性
+Tabbed Header List Properties
Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#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 |
| ------------------------------ | --------------------------------------- | ------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -276,28 +278,28 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props
包含 DetailsHeaderScrollView、DetailsHeaderFlatList 以及 DetailsHeaderSectionList 三个组件。
-### Details Header ScrollView 组件
+### Details Header ScrollView components
-Details Header ScrollView 属性
-Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared DetailsHeader props 属性。
+Details Header ScrollView Properties
+Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared DetailsHeader props Properties。
-### Details Header FlatList 组件
+### Details Header FlatList components
-Details Header FlatList 属性
-Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared DetailsHeader props 属性。
+Details Header FlatList Properties
+Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared DetailsHeader props Properties。
-### Details Header SectionList 组件
+### Details Header SectionList components
-Details Header SectionList 属性
-Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared DetailsHeader props 属性。
+Details Header SectionList Properties
+Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared DetailsHeader props Properties。
-### Shared DetailsHeader props 属性
+### Shared DetailsHeader props Properties
-DetailsHeaderScrollView、DetailsHeaderFlatList 以及 DetailsHeaderSectionList 三个组件共享属性。
+DetailsHeaderScrollView、DetailsHeaderFlatList 以及 DetailsHeaderSectionList 三个组件共享 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 |
| ------------------------------ | --------------------------------------- | ----------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -349,28 +351,28 @@ DetailsHeaderScrollView、DetailsHeaderFlatList 以及 DetailsHeaderSectionList
包含 AvatarHeaderScrollView、AvatarHeaderFlatList 以及 AvatarHeaderSectionList 三个组件。
-### Avatar Header ScrollView 组件
+### Avatar Header ScrollView components
-Avatar Header ScrollView 属性
-Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared AvatarHeader props 属性。
+Avatar Header ScrollView Properties
+Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared AvatarHeader props Properties。
-### Avatar Header FlatList 组件
+### Avatar Header FlatList components
-Avatar Header FlatList 属性
-Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared AvatarHeader props 属性。
+Avatar Header FlatList Properties
+Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared AvatarHeader props Properties。
-### Avatar Header SectionList 组件
+### Avatar Header SectionList components
-Avatar Header SectionList 属性
-Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared AvatarHeader props 属性。
+Avatar Header SectionList Properties
+Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared AvatarHeader props Properties。
-### Shared AvatarHeader props 属性
+### Shared AvatarHeader props Properties
-AvatarHeaderScrollView、AvatarHeaderFlatList 以及 AvatarHeaderSectionList 三个组件共享属性。
+AvatarHeaderScrollView、AvatarHeaderFlatList 以及 AvatarHeaderSectionList 三个组件共享 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 |
| ------------------------------ | --------------------------------------- | ----------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -415,28 +417,28 @@ AvatarHeaderScrollView、AvatarHeaderFlatList 以及 AvatarHeaderSectionList 三
包含 StickyHeaderScrollView、StickyHeaderFlatList 以及 StickyHeaderSectionList 三个组件。
-### Sticky Header ScrollView 组件
+### Sticky Header ScrollView components
-Sticky Header ScrollView 属性
-Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared StickyHeader props 属性。
+Sticky Header ScrollView Properties
+Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)及 Shared StickyHeader props Properties。
-### Sticky Header FlatList 组件
+### Sticky Header FlatList components
-Sticky Header FlatList 属性
-Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared StickyHeader props 属性。
+Sticky Header FlatList Properties
+Inherits [FlatListProps](https://reactnative.dev/docs/next/flatlist#props)及 Shared StickyHeader props Properties。
-### Sticky Header SectionList 组件
+### Sticky Header SectionList components
-Avatar Header SectionList 属性
-Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared StickyHeader props 属性。
+Avatar Header SectionList Properties
+Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist/#props)及 Shared StickyHeader props Properties。
-### Shared StickyHeader props 属性
+### Shared StickyHeader props Properties
-StickyHeaderScrollView、StickyHeaderFlatList 以及 StickyHeaderSectionList 三个组件共享属性。
+StickyHeaderScrollView、StickyHeaderFlatList 以及 StickyHeaderSectionList 三个组件共享 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 |
| --------------------- | ----------------------------------- | ------------------------------------------------- | -------- | ----------- | ----------------- |
@@ -458,27 +460,27 @@ StickyHeaderScrollView、StickyHeaderFlatList 以及 StickyHeaderSectionList 三
### Avatar Header FlashList 组件
-Avatar Header FlashList 属性
-Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Shared AvatarHeader props 属性。
+Avatar Header FlashList Properties
+Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Shared AvatarHeader props Properties。
### Details Header FlashList 组件
-Details Header FlashList 属性
-Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Shared DetailsHeader props 属性。
+Details Header FlashList Properties
+Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Shared DetailsHeader props Properties。
### Tabbed Header FlashList 组件
-Tabbed Header FlashList 属性
-Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Tabbed Header List props 属性。
+Tabbed Header FlashList Properties
+Inherits [FlashListProps](https://shopify.github.io/flash-list/docs/usage/)及 Tabbed Header List props Properties。
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-- [ ] 原库TabbedHeaderPager组件部分属性不生效[issue#415](https://github.com/netguru/sticky-parallax-header/issues/415)
-- [ ] 原库DetailHeader、AvatarHeader组件部分属性不生效 [issue#416](https://github.com/netguru/sticky-parallax-header/issues/416)
-- [ ] 原库ref.current.goToPage方法不存在 [issue#412](https://github.com/netguru/sticky-parallax-header/issues/412)
+- [ ] 原库 TabbedHeaderPager 组件部分 Properties 不生效[issue#415](https://github.com/netguru/sticky-parallax-header/issues/415)
+- [ ] 原库 DetailHeader、AvatarHeader 组件部分 Properties 不生效 [issue#416](https://github.com/netguru/sticky-parallax-header/issues/416)
+- [ ] 原库 ref.current.goToPage 方法不存在 [issue#412](https://github.com/netguru/sticky-parallax-header/issues/412)
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/netguru/sticky-parallax-header/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/netguru/sticky-parallax-header/blob/master/LICENSE).
diff --git a/en/react-native-svg-capi.md b/en/react-native-svg-capi.md
index 2cde05c571df4611ff48bf5dc27a32c1baf33897..a95f8cb9c51ed94d583c0a159bb8fcdf1bbcec33 100644
--- a/en/react-native-svg-capi.md
+++ b/en/react-native-svg-capi.md
@@ -1,5 +1,6 @@
-> 模板版本：v0.2.2
+
+> Template version: v0.2.2
react-native-svg(CAPI)
@@ -13,15 +14,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-harmony-svg)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-harmony-svg)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/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-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/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,14 +42,14 @@ yarn add @react-native-oh-tpl/react-native-svg@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';
-import { StyleSheet,SafeAreaView } from 'react-native';
-import { Svg,Path } from 'react-native-svg';
+import React from "react";
+import { StyleSheet, SafeAreaView } from "react-native";
+import { Svg, Path } from "react-native-svg";
export default function App() {
return (
@@ -62,19 +63,19 @@ export default function App() {
const styles = StyleSheet.create({
container: {
- flex:1,
- backgroundColor: 'grey',
+ flex: 1,
+ backgroundColor: "grey",
},
});
```
## 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
{
@@ -85,18 +86,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -105,22 +103,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](/en/link-source-code.md).
-### 3.配置 CMakeLists 和引入 SVGPackage
+### 3. Configuring CMakeLists and Introducing SVGPackage
-打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
```diff
project(rnapp)
@@ -158,7 +156,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
# RNOH_END: link_packages
```
-打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code:
```diff
#include "RNOH/PackageProvider.h"
@@ -177,9 +175,9 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4.在 ArkTs 侧引入 SvgPackage
+### 4. Introducing SvgPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -193,29 +191,28 @@ 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
```
-然后编译、运行即可。
+Then build and run the code.
### 在 ArkTs 侧引入和注册字体文件(非必选配置项)
-> [!TIP] 本项非必配项，当使用 Text 组件的 fontFamily 属性指定字体时才需配置
+> [!TIP] 本项非必配项，当使用 Text 组件的 fontFamily Properties 指定字体时才需配置
步骤一：
- 复制字体文件到 `entry/src/main/resources/rawfile/assets/fonts` 目录下(如使用了外部字体文件，需要将*.ttf文件复制过来)
+复制字体文件到 `entry/src/main/resources/rawfile/assets/fonts` 目录下(如使用了外部字体文件，需要将\*.ttf 文件复制过来)
步骤二：
- 打开 `entry/src/main/ets/pages/Index.ets`，添加以下代码
-
+打开 `entry/src/main/ets/pages/Index.ets`，添加以下代码
const fonts: Record = {
"Noto Sans Pau Cin Hau": $rawfile("assets/fonts/Noto Sans Pau Cin Hau.ttf") ,
@@ -240,29 +237,28 @@ ohpm install
},
//...
}
-
+
}
//...
}
+## 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/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/releases)
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/releases)
+## Properties
-## 属性
+For details, see [react-native-svg](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md)
-详细请查看 [react-native-svg 的文档介绍](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md)
+以下为目前已支持的组件 Properties：
-以下为目前已支持的组件属性：
+> [!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.
**Svg**：绘制组件的父组件
@@ -275,7 +271,7 @@ ohpm install
| title | 组件标题名 | string | No | All | Yes |
| preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes |
-**G**：该元素是用于对其他 SVG 元素进行分组的容器
+**G**：该元素是用于对 Others SVG 元素进行分组的容器
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :-----: | :---------: | :-------------: | -------- | -------- | ----------------- |
@@ -340,9 +336,9 @@ ohpm install
| points | 定义多段线每个端点的 x 和 y 坐标 | string\| array | Yes | All | Yes |
| opacity | 透明度 | number | No | All | Yes |
-**Defs**：该元素是用于对其他 SVG 元素进行分组的容器
+**Defs**：该元素是用于对 Others SVG 元素进行分组的容器
-> 注： 该组件无属性
+> 注： 该组件无 Properties
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :--: | :---------: | :--: | -------- | -------- | ----------------- |
@@ -356,7 +352,7 @@ ohpm install
| y1 | 在 y 轴上平移距离 | number\| string | No | All | Yes |
| x2 | 在 x 轴上平移距离 | number\| string | No | All | Yes |
| y2 | 在 y 轴上平移距离 | number\| string | No | All | Yes |
-| gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes |
+| gradientUnits | 指定元素 Properties 使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes |
| gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix \| string | No | All | Yes |
**RadialGradient**：用于定义线性渐变
@@ -374,7 +370,7 @@ ohpm install
| cx | 终止圆的 x 轴坐标 | number\| string | No | All | Yes |
| cy | 终止圆的 y 轴坐标 | number\| string | No | All | Yes |
| r | 终止圆的半径 | number\| string | No | All | Yes |
-| gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes |
+| gradientUnits | 指定元素 Properties 使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes |
| gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix \| string | No | All | Yes |
**Stop**：定义渐变上的颜色坡度
@@ -421,14 +417,14 @@ ohpm install
**Symbol**： 该元素用来定义一个图形模板对象，它可以用一个元素实例化
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------------: | :------------------: | :-------------: | -------- | -------- | ----------------- |
-| preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes |
-| viewBox | 组件视区 | string | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------: | :------------------: | :----: | -------- | -------- | ----------------- |
+| preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes |
+| viewBox | 组件视区 | string | No | All | Yes |
-**ClipPath**：该元素定义一条剪切路径，可作为其他元素的 clipPath 属性的值
+**ClipPath**：该元素定义一条剪切路径，可作为 Others 元素的 clipPath Properties 的值
-> 注： 该组件无属性
+> 注： 该组件无 Properties
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :--: | :---------: | :--: | -------- | -------- | ----------------- |
@@ -436,16 +432,16 @@ ohpm install
**Marker**：用于在绘制类组件上添加标记
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- |
-| id | 为元素分配唯一的名称 | string | Yes | All | Yes |
-| viewBox | 视窗在用户空间中的位置和尺寸 | string | No | All | Yes |
-| refX | 标记参考点的 x 坐标 | number\| string | No | All | Yes |
-| refY | 标记参考点的 y 坐标 | number\| string | No | All | Yes |
-| markerUnits | markerWidth 和 markerHeight 属性的坐标系以及标记的内容 | string | No | All | Yes |
-| orient | 将标记放置在形状上的相应位置时如何旋转 | string | No | All | Yes |
-| markerWidth | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes |
-| markerHeight | 表示标记进入的视窗的高度 | number\| string | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :----------: | :-----------------------------------------------------------: | :-------------: | -------- | -------- | ----------------- |
+| id | 为元素分配唯一的名称 | string | Yes | All | Yes |
+| viewBox | 视窗在用户空间中的位置和尺寸 | string | No | All | Yes |
+| refX | 标记参考点的 x 坐标 | number\| string | No | All | Yes |
+| refY | 标记参考点的 y 坐标 | number\| string | No | All | Yes |
+| markerUnits | markerWidth 和 markerHeight Properties 的坐标系以及标记的内容 | string | No | All | Yes |
+| orient | 将标记放置在形状上的相应位置时如何旋转 | string | No | All | Yes |
+| markerWidth | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes |
+| markerHeight | 表示标记进入的视窗的高度 | number\| string | No | All | Yes |
**Pattern**：用于定义一个图形对象，可以被引用以平铺重绘该图形对象以覆盖某个区域。
@@ -456,19 +452,19 @@ ohpm install
| y | 标记参考点的 y 坐标 | number\| string | No | All | Yes |
| width | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes |
| height | 表示标记进入的视窗的高度 | number\| string | No | All | Yes |
-| patternUnits | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes |
-| patternContentUnit | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes |
+| patternUnits | Properties 指示 pattern 元素的几何 Properties 使用哪个坐标系。 | string | No | All | Yes |
+| patternContentUnit | Properties 指示 pattern 元素的几何 Properties 使用哪个坐标系。 | string | No | All | Yes |
| patternTransform | 定义了应用于图案图块的变换定义的列表 | string | No | All | Yes |
| viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes |
| preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes |
**Symbol**：用于定义可由 use 元素实例化的图形模板对象。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :-----------------: | :-----------------------------------------------------------------------: | :-------------: | -------- | -------- | ----------------- |
-| id | 为元素分配唯一的名称 | string | Yes | All | Yes |
-| viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes |
-| preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------: | :-----------------------------------------------------------------------: | :----: | -------- | -------- | ----------------- |
+| id | 为元素分配唯一的名称 | string | Yes | All | Yes |
+| viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes |
+| preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes |
**Line**：SVG 基本形状，用于创建连接两点的线。
@@ -482,19 +478,19 @@ ohpm install
**Text**：绘制由文本组成的图形元素
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :--------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- |
-| x | 文本基线起点的 x 坐标 | number\string | No | All | Yes |
-| y | 文本基线起点的 y 坐标 | number\string | No | All | Yes |
-| dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes |
-| dy | 从前一个文本元素垂直移动文本位置 | number\| string | No | All | Yes |
-| rotate | 旋转每个单独字形的方向 | array | No | All | Yes |
-| opacity | 透明度 | number | No | All | Yes |
-| inlineSize | 水平或垂直尺寸 | number | No | All | No |
-| alignmentBaseline | 指定文本的对齐基线 | string | NO | ALL | Yes |
-| baselineShift | 设置垂直位置调整 | number\| string | No | All | Yes |
-| lengthAdjust | 调整文本以适应特定的布局约束 | string | No | All | Yes |
-| textLength | 指定文本应该被渲染的长度 | number | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :---------------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- |
+| x | 文本基线起点的 x 坐标 | number\string | No | All | Yes |
+| y | 文本基线起点的 y 坐标 | number\string | No | All | Yes |
+| dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes |
+| dy | 从前一个文本元素垂直移动文本位置 | number\| string | No | All | Yes |
+| rotate | 旋转每个单独字形的方向 | array | No | All | Yes |
+| opacity | 透明度 | number | No | All | Yes |
+| inlineSize | 水平或垂直尺寸 | number | No | All | No |
+| alignmentBaseline | 指定文本的对齐基线 | string | NO | ALL | Yes |
+| baselineShift | 设置垂直位置调整 | number\| string | No | All | Yes |
+| lengthAdjust | 调整文本以适应特定的布局约束 | string | No | All | Yes |
+| textLength | 指定文本应该被渲染的长度 | number | No | All | Yes |
**TSpan**：绘制文本或 Text 内的子文本
@@ -508,45 +504,45 @@ ohpm install
| opacity | 透明度 | number | No | All | Yes |
| inlineSize | 水平或垂直尺寸 | number | No | All | Yes |
-**TextPath**：若要沿路径形状呈现文本，将文本括在具有 href 属性的 TextPath 元素中，并引用 Path 元素。
+**TextPath**：若要沿路径形状呈现文本，将文本括在具有 href Properties 的 TextPath 元素中，并引用 Path 元素。
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| :---------: | :--------------------------------: | :-------------: | -------- | -------- | ----------------- |
-| href | 用于呈现文本的路径或基本形状的 URL | string | No | All | No |
-| xlinkHref | 用于呈现文本的路径或基本形状的 URL | string | No | All | No |
-| method | 沿路径渲染各个字形的方法 | string | No | All | No |
-| spacing | 绘制字符之间的间距 | string | No | All | No |
-| side | 文本应呈现在路径的哪一侧 | string | No | All | No |
-| midLine | 中线 | string | No | All | No |
-| startOffset | 文本开始被沿着路径绘制时的偏移量 | number\| string | No | All | No |
+| href | 用于呈现文本的路径或基本形状的 URL | string | No | All | No |
+| xlinkHref | 用于呈现文本的路径或基本形状的 URL | string | No | All | No |
+| method | 沿路径渲染各个字形的方法 | string | No | All | No |
+| spacing | 绘制字符之间的间距 | string | No | All | No |
+| side | 文本应呈现在路径的哪一侧 | string | No | All | No |
+| midLine | 中线 | string | No | All | No |
+| startOffset | 文本开始被沿着路径绘制时的偏移量 | number\| string | No | All | No |
**SvgAst**：该组件通过传入 ast 来渲染出 svg
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :------: | :--------------------------: | :------: | :------: | :------: | :---------------: |
-| ast | 解析 svg 字符串得到的 ast 树 | JsxAST | Yes | All | Yes |
-| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------: | :--------------------------: | :----: | :------: | :------: | :---------------: |
+| ast | 解析 svg 字符串得到的 ast 树 | JsxAST | Yes | All | Yes |
+| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
**SvgFromUri**：该组件通过传入 uri 地址来渲染出 svg
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :------: | :-------------------: | :------: | :------: | :------: | :---------------: |
-| uri | svg 资源地址 | string | Yes | All | Yes |
-| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------: | :-------------------: | :----: | :------: | :------: | :---------------: |
+| uri | svg 资源地址 | string | Yes | All | Yes |
+| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
**SvgFromXml**：该组件通过传入字符串来渲染出 svg
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :------: | :-------------------: | :------: | :------: | :------: | :---------------: |
-| xml | svg 代码的字符串 | string | Yes | All | Yes |
-| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------: | :-------------------: | :----: | :------: | :------: | :---------------: |
+| xml | svg 代码的字符串 | string | Yes | All | Yes |
+| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
**SvgXml**：该组件通过传入字符串来渲染出 svg
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :------: | :-------------------: | :------: | :------: | :------: | :---------------: |
-| xml | svg 代码的字符串 | string | Yes | All | Yes |
-| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------: | :-------------------: | :----: | :------: | :------: | :---------------: |
+| xml | svg 代码的字符串 | string | Yes | All | Yes |
+| override | 覆盖 svg 样式，如宽高 | object | No | All | Yes |
**SvgUri**：该组件通过传入 uri 地址来渲染出 svg
@@ -567,57 +563,57 @@ ohpm install
| camelCase | 字符串首字母转成大写 | function | No | All | Yes |
| fetchText | 将 svg 字符串解析成 JsxAST | function | No | All | Yes |
-**公共属性**：
-
-Common props 组件属性 HarmonyOS 侧支持情况
-
-| Name | Description | Type | Default | Required | Platform |
-| :--------------: | :-----------------------------------------: | :---------: | :-------: | :------: | :------: |
-| fill | 设置填充区域颜色 | string | '#000' | No | All |
-| fillOpacity | 设置填充区域透明度 | number | 1 | No | All |
-| fillRule | 设置填充规则 | number | 1 | No | All |
-| clipRule | 设置裁剪规则 | string | 'evenodd' | No | All |
-| clipPath | 指定、关联一条裁剪路径 | string | 'none' | No | All |
-| stroke | 设置边框颜色，不设置时，默认没有边框 | string | none | No | All |
-| strokeWidth | 设置边框宽度 | number | 1 | No | All |
-| strokeOpacity | 边框透明度 | number | 1 | No | All |
-| strokeDasharray | 用来描边的点划线的图案范式 | number | none | No | All |
-| strokeDashoffset | 指定了 dash 模式到路径开始的距离 | number | 1 | No | All |
-| strokeLinecap | 设置路径两端的形状 | string | butt | No | All |
-| strokeLinejoin | 指明路径的转角处使用的形状 | string | miter | No | All |
-| strokeMiterlimit | 对斜接长度和 stroke-width 的比率设置极限 值 | number | 4 | No | All |
-| vectorEffect | 指明绘制对象时要使用的矢量效果 | string | none | No | All |
-| translate | 设置位移 | numberArray | 0,0 | No | All |
-| translateX | 设置 x 轴位移 | number | 0 | No | All |
-| translateY | 设置 y 轴位移 | number | 0 | No | All |
-| origin | 更改一个元素变形的原点 | numberArray | 0,0 | No | All |
-| originX | 更改一个元素变形的原点 x 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All |
-| originY | 更改一个元素变形的原点 y 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All |
-| scale | 定义缩放大小 | numberArray | 1，1 | No | All |
-| scaleX | 定义 x 轴缩放大小 | number | 1 | No | All |
-| scaleY | 定义 y 轴缩放大小 | number | 1 | No | All |
-| rotation | 设置旋转角度 | number | 0，0 | No | All |
-| x | 标识一个 x 轴坐标 | number | 0 | No | All |
-| y | 标识一个 y 轴坐标 | number | 0 | No | All |
-| transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All |
-| marker | 指定路径所有顶点的路标样式 | string | - | No | All |
-| markerStart | 指定路径起点所采用的路标样式 | string | - | No | All |
-| markerMid | 指定路径中间顶点所采用的路标样式 | string | - | No | All |
-| markerEnd | 指定路径终点所采用的路标样式 | string | - | No | All |
-| mask | 给元素指定使用 Mask 元素实现遮罩效果 | string | - | No | All |
-| id | 设置节点 id | string | - | No | All |
-| opacity | 设置透明度 | number | 1 | No | All |
-| transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All |
-| display | 控制元素展示的方式 | string | block | No | All |
-| pointerEvents | 设置元素如何响应点击事件 | string | | No | All |
-| vectorEffect | 指明绘制对象时要使用的矢量效果 | Int | 0 | No | All |
-
-FontProps 组件属性 HarmonyOS 侧支持情况
+**公共 Properties**：
+
+Common props 组件 Properties HarmonyOS 侧支持情况
+
+| Name | Description | Type | Default | Required | Platform |
+| :--------------: | :-------------------------------------------------------------------------------------: | :---------: | :-------: | :------: | :------: |
+| fill | 设置填充区域颜色 | string | '#000' | No | All |
+| fillOpacity | 设置填充区域透明度 | number | 1 | No | All |
+| fillRule | 设置填充规则 | number | 1 | No | All |
+| clipRule | 设置裁剪规则 | string | 'evenodd' | No | All |
+| clipPath | 指定、关联一条裁剪路径 | string | 'none' | No | All |
+| stroke | 设置边框颜色，不设置时，默认没有边框 | string | none | No | All |
+| strokeWidth | 设置边框宽度 | number | 1 | No | All |
+| strokeOpacity | 边框透明度 | number | 1 | No | All |
+| strokeDasharray | 用来描边的点划线的图案范式 | number | none | No | All |
+| strokeDashoffset | 指定了 dash 模式到路径开始的距离 | number | 1 | No | All |
+| strokeLinecap | 设置路径两端的形状 | string | butt | No | All |
+| strokeLinejoin | 指明路径的转角处使用的形状 | string | miter | No | All |
+| strokeMiterlimit | 对斜接长度和 stroke-width 的比率设置极限 值 | number | 4 | No | All |
+| vectorEffect | 指明绘制对象时要使用的矢量效果 | string | none | No | All |
+| translate | 设置位移 | numberArray | 0,0 | No | All |
+| translateX | 设置 x 轴位移 | number | 0 | No | All |
+| translateY | 设置 y 轴位移 | number | 0 | No | All |
+| origin | 更改一个元素变形的原点 | numberArray | 0,0 | No | All |
+| originX | 更改一个元素变形的原点 x 坐标（单独使用无效，需配合 OthersProperties 如 rotation 使用） | number | 0 | No | All |
+| originY | 更改一个元素变形的原点 y 坐标（单独使用无效，需配合 OthersProperties 如 rotation 使用） | number | 0 | No | All |
+| scale | 定义缩放大小 | numberArray | 1，1 | No | All |
+| scaleX | 定义 x 轴缩放大小 | number | 1 | No | All |
+| scaleY | 定义 y 轴缩放大小 | number | 1 | No | All |
+| rotation | 设置旋转角度 | number | 0，0 | No | All |
+| x | 标识一个 x 轴坐标 | number | 0 | No | All |
+| y | 标识一个 y 轴坐标 | number | 0 | No | All |
+| transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All |
+| marker | 指定路径所有顶点的路标样式 | string | - | No | All |
+| markerStart | 指定路径起点所采用的路标样式 | string | - | No | All |
+| markerMid | 指定路径中间顶点所采用的路标样式 | string | - | No | All |
+| markerEnd | 指定路径终点所采用的路标样式 | string | - | No | All |
+| mask | 给元素指定使用 Mask 元素实现遮罩效果 | string | - | No | All |
+| id | 设置节点 id | string | - | No | All |
+| opacity | 设置透明度 | number | 1 | No | All |
+| transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All |
+| display | 控制元素展示的方式 | string | block | No | All |
+| pointerEvents | 设置元素如何响应点击事件 | string | | No | All |
+| vectorEffect | 指明绘制对象时要使用的矢量效果 | Int | 0 | No | All |
+
+FontProps 组件 Properties HarmonyOS 侧支持情况
| Name | Description | Type | Default | Required | Platform |
| :-------------------: | :------------------------------------------------------------: | :----------------: | :-----: | :------: | :------: |
| fontSize | 在多行布局环境中将多行文本设置为实线时，从基线到基线的字体大小 | string | medium | No | All |
-| fontWeight | 用于呈现文本的字形相对于同一字体族中的其他字体的粗度或亮度 | string | normal | No | All |
+| fontWeight | 用于呈现文本的字形相对于同一字体族中的 Others 字体的粗度或亮度 | string | normal | No | All |
| font | 设置一个用于文字布局的字体 | FontObject（对象） | none | No | All |
| fontStyle | 指定文本渲染样式 | string | normal | No | All |
| fontVariant | 设置文本字体变体 | | | No | All |
@@ -632,25 +628,25 @@ FontProps 组件属性 HarmonyOS 侧支持情况
| fontVariantLigatures | 控制文本中连字 | string | normal | No | All |
| fontVariationSettings | 设置字体的宽度、高度、倾斜度等 | string | normal | No | All |
-## 遗留问题
+## Known Issues
-- [ ] isPointInFill 判断点位坐标是否在fill上 未实现
-- [ ] isPointInStroke 判断点位坐标是否在stroke上 未实现
-- [ ] getTotalLength 获取总path的长度 未实现
-- [ ] getPointAtLength 获取点位坐标在path上的信息 未实现
+- [ ] isPointInFill 判断点位坐标是否在 fill 上 未实现
+- [ ] isPointInStroke 判断点位坐标是否在 stroke 上 未实现
+- [ ] getTotalLength 获取总 path 的长度 未实现
+- [ ] getPointAtLength 获取点位坐标在 path 上的信息 未实现
- [ ] getBBox 获取组件的边界信息 未实现
-- [ ] getCTM 获取相对于父组件的matrix矩阵信息 未实现
-- [ ] getScreenCTM 获取组件的matrix矩阵信息 未实现
-- [ ] getRawResource 获取android中的资源文件 未实现
-- [ ] foreignObject 该组件允许svg使用外部组件 未实现
+- [ ] getCTM 获取相对于父组件的 matrix 矩阵信息 未实现
+- [ ] getScreenCTM 获取组件的 matrix 矩阵信息 未实现
+- [ ] getRawResource 获取 android 中的资源文件 未实现
+- [ ] foreignObject 该组件允许 svg 使用外部组件 未实现
- [ ] filter 该组件可以为 SVG 图形添加各种视觉效果 未实现
- [ ] TextPath 功能未完全实现
-- [ ] Text,TSpan组件的rotate,fontFamily,wordSpacing属性 未实现
+- [ ] Text,TSpan 组件的 rotate,fontFamily,wordSpacingProperties 未实现
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-svg/blob/harmony/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-svg/blob/harmony/LICENSE).
-
\ No newline at end of file
+
diff --git a/en/react-native-svg-charts.md b/en/react-native-svg-charts.md
index d170cc33e308db14fbf18d35dc78d7366d65471c..b8ce91f973776a2ed9f4da55c38dd5a2c6a7fdbe 100644
--- a/en/react-native-svg-charts.md
+++ b/en/react-native-svg-charts.md
@@ -1,5 +1,6 @@
-> 模板版本：v0.2.1
+
+> Template version：v0.2.1
react-native-svg-charts
@@ -15,15 +16,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-svg-charts)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-svg-charts)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-charts/releases)，并下载适用版本的 tgz 包
+Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [https://github.com/react-native-oh-library/react-native-svg-charts Releases](https://github.com/react-native-oh-library/react-native-svg-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 (#).
@@ -41,596 +42,614 @@ yarn add @react-native-oh-tpl/react-naitve-svg-charts@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
areaChart：
+
```jsx
-import React from 'react'
-import { Path } from 'react-native-svg'
-import { AreaChart, Grid } from 'react-native-svg-charts'
-import * as shape from 'd3-shape'
+import React from "react";
+import { Path } from "react-native-svg";
+import { AreaChart, Grid } from "react-native-svg-charts";
+import * as shape from "d3-shape";
class AreaChartExample extends React.PureComponent {
-
- render() {
-
- const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]
-
- const Line = ({ line }) => (
-
-
- )
- }
+ render() {
+ const data = [
+ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80,
+ ];
+
+ const Line = ({ line }) => (
+
+
+ );
+ }
}
-export default AreaChartExample
+export default AreaChartExample;
```
+
barChart:
+
```jsx
-import React from 'react'
-import { BarChart, Grid } from 'react-native-svg-charts'
+import React from "react";
+import { BarChart, Grid } from "react-native-svg-charts";
class GroupedBarChartExample extends React.PureComponent {
-
- render() {
-
- const data1 = [ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33, -26, -32, 73, 8 ]
- .map((value) => ({ value }))
- const data2 = [ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70, -94, 10, 86, 84 ]
- .map((value) => ({ value }))
-
- const barData = [
- {
- data: data1,
- svg: {
- fill: 'rgb(134, 65, 244)',
- },
- },
- {
- data: data2,
- },
- ]
-
- return (
- item.value}
- svg={{
- fill: 'green',
- }}
- contentInset={ { top: 30, bottom: 30 } }
- { ...this.props }
- >
-
- )
- }
-
+ render() {
+ const data1 = [
+ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33,
+ -26, -32, 73, 8,
+ ].map((value) => ({ value }));
+ const data2 = [
+ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70,
+ -94, 10, 86, 84,
+ ].map((value) => ({ value }));
+
+ const barData = [
+ {
+ data: data1,
+ svg: {
+ fill: "rgb(134, 65, 244)",
+ },
+ },
+ {
+ data: data2,
+ },
+ ];
+
+ return (
+ item.value}
+ svg={{
+ fill: "green",
+ }}
+ contentInset={{ top: 30, bottom: 30 }}
+ {...this.props}
+ >
+
+ );
+ }
}
-export default GroupedBarChartExample
+export default GroupedBarChartExample;
```
StackedBarChart：
+
```jsx
-import React from 'react'
-import { Grid, StackedBarChart } from 'react-native-svg-charts'
+import React from "react";
+import { Grid, StackedBarChart } from "react-native-svg-charts";
-const colors = ['#33691E', '#689F38', '#9CCC65', '#DCEDC8']
+const colors = ["#33691E", "#689F38", "#9CCC65", "#DCEDC8"];
const data = [
- {
- broccoli: {
- value: 3840,
- svg: {
- onPress: () => console.log('onPress => 0:broccoli:3840'),
- },
- },
- celery: {
- value: 1920,
- svg: {
- onPress: () => console.log('onPress => 0:celery:1920'),
- },
- },
- onions: {
- value: 960,
- svg: {
- onPress: () => console.log('onPress => 0:onions:960'),
- },
- },
- tomato: {
- value: 400,
- svg: {
- onPress: () => console.log('onPress => 0:tomato:400'),
- },
- },
+ {
+ broccoli: {
+ value: 3840,
+ svg: {
+ onPress: () => console.log("onPress => 0:broccoli:3840"),
+ },
},
- {
- broccoli: {
- value: 1600,
- svg: {
- onPress: () => console.log('onPress => 1:broccoli:1600'),
- },
- },
- celery: {
- value: 1440,
- svg: {
- onPress: () => console.log('onPress => 1:celery:1440'),
- },
- },
- onions: {
- value: 960,
- svg: {
- onPress: () => console.log('onPress => 1:onions:960'),
- },
- },
- tomato: {
- value: 400,
- svg: {
- onPress: () => console.log('onPress => 1:tomato:400'),
- },
- },
+ celery: {
+ value: 1920,
+ svg: {
+ onPress: () => console.log("onPress => 0:celery:1920"),
+ },
},
- {
- broccoli: {
- value: 640,
- svg: {
- onPress: () => console.log('onPress => 2:broccoli:640'),
- },
- },
- celery: {
- value: 960,
- svg: {
- onPress: () => console.log('onPress => 2:celery:960'),
- },
- },
- onions: {
- value: 3640,
- svg: {
- onPress: () => console.log('onPress => 2:onions:3640'),
- },
- },
- tomato: {
- value: 400,
- svg: {
- onPress: () => console.log('onPress => 2:tomato:400'),
- },
- },
+ onions: {
+ value: 960,
+ svg: {
+ onPress: () => console.log("onPress => 0:onions:960"),
+ },
},
- {
- broccoli: {
- value: 3320,
- svg: {
- onPress: () => console.log('onPress => 3:broccoli:3320'),
- },
- },
- celery: {
- value: 480,
- svg: {
- onPress: () => console.log('onPress => 3:celery:480'),
- },
- },
- onions: {
- value: 640,
- svg: {
- onPress: () => console.log('onPress => 3:onions:640'),
- },
- },
- tomato: {
- value: 400,
- svg: {
- onPress: () => console.log('onPress => 3:tomato:400'),
- },
- },
+ tomato: {
+ value: 400,
+ svg: {
+ onPress: () => console.log("onPress => 0:tomato:400"),
+ },
+ },
+ },
+ {
+ broccoli: {
+ value: 1600,
+ svg: {
+ onPress: () => console.log("onPress => 1:broccoli:1600"),
+ },
+ },
+ celery: {
+ value: 1440,
+ svg: {
+ onPress: () => console.log("onPress => 1:celery:1440"),
+ },
+ },
+ onions: {
+ value: 960,
+ svg: {
+ onPress: () => console.log("onPress => 1:onions:960"),
+ },
+ },
+ tomato: {
+ value: 400,
+ svg: {
+ onPress: () => console.log("onPress => 1:tomato:400"),
+ },
+ },
+ },
+ {
+ broccoli: {
+ value: 640,
+ svg: {
+ onPress: () => console.log("onPress => 2:broccoli:640"),
+ },
+ },
+ celery: {
+ value: 960,
+ svg: {
+ onPress: () => console.log("onPress => 2:celery:960"),
+ },
+ },
+ onions: {
+ value: 3640,
+ svg: {
+ onPress: () => console.log("onPress => 2:onions:3640"),
+ },
},
-]
+ tomato: {
+ value: 400,
+ svg: {
+ onPress: () => console.log("onPress => 2:tomato:400"),
+ },
+ },
+ },
+ {
+ broccoli: {
+ value: 3320,
+ svg: {
+ onPress: () => console.log("onPress => 3:broccoli:3320"),
+ },
+ },
+ celery: {
+ value: 480,
+ svg: {
+ onPress: () => console.log("onPress => 3:celery:480"),
+ },
+ },
+ onions: {
+ value: 640,
+ svg: {
+ onPress: () => console.log("onPress => 3:onions:640"),
+ },
+ },
+ tomato: {
+ value: 400,
+ svg: {
+ onPress: () => console.log("onPress => 3:tomato:400"),
+ },
+ },
+ },
+];
-const keys = ['broccoli', 'celery', 'onions', 'tomato']
+const keys = ["broccoli", "celery", "onions", "tomato"];
class StackedBarChartWithOnPressExample extends React.PureComponent {
- render() {
- return (
- item[key].value}
- >
-
- )
- }
+ render() {
+ return (
+ item[key].value}
+ >
+
+ );
+ }
}
-export default StackedBarChartWithOnPressExample
+export default StackedBarChartWithOnPressExample;
```
lineChart：
+
```jsx
-import React from 'react'
-import { LineChart, Path, Grid } from 'react-native-svg-charts'
+import React from "react";
+import { LineChart, Path, Grid } from "react-native-svg-charts";
class LineChartExample extends React.PureComponent {
-
- render() {
-
- const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]
-
- const Shadow = ({ line }) => (
-
-
- )
- }
-
+ render() {
+ const data = [
+ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80,
+ ];
+
+ const Shadow = ({ line }) => (
+
+
+ );
+ }
}
-export default LineChartExample
+export default LineChartExample;
```
StackedAreaChart：
+
```jsx
-import React from 'react'
-import { StackedAreaChart, YAxis, Grid } from 'react-native-svg-charts'
-import * as shape from 'd3-shape'
-import { View } from 'react-native'
+import React from "react";
+import { StackedAreaChart, YAxis, Grid } from "react-native-svg-charts";
+import * as shape from "d3-shape";
+import { View } from "react-native";
class AreaStackWithAxisExample extends React.PureComponent {
-
- render() {
-
- const data = [
- {
- month: new Date(2015, 0, 1),
- apples: 3840,
- bananas: 1920,
- cherries: 960,
- dates: 400,
- },
- {
- month: new Date(2015, 1, 1),
- apples: 1600,
- bananas: 1440,
- cherries: 960,
- dates: 400,
- },
- {
- month: new Date(2015, 2, 1),
- apples: 640,
- bananas: 960,
- cherries: 3640,
- dates: 400,
- },
- {
- month: new Date(2015, 3, 1),
- apples: 3320,
- bananas: 480,
- cherries: 640,
- dates: 400,
- },
- ]
-
- const colors = ['rgba(138, 0, 230, 0.8)', 'rgba(173, 51, 255, 0.8)', 'rgba(194, 102, 255, 0.8)', 'rgba(214, 153, 255, 0.8)']
- const keys = ['apples', 'bananas', 'cherries', 'dates']
-
- return (
-
-
-
-
- )
- }
+ render() {
+ const data = [
+ {
+ month: new Date(2015, 0, 1),
+ apples: 3840,
+ bananas: 1920,
+ cherries: 960,
+ dates: 400,
+ },
+ {
+ month: new Date(2015, 1, 1),
+ apples: 1600,
+ bananas: 1440,
+ cherries: 960,
+ dates: 400,
+ },
+ {
+ month: new Date(2015, 2, 1),
+ apples: 640,
+ bananas: 960,
+ cherries: 3640,
+ dates: 400,
+ },
+ {
+ month: new Date(2015, 3, 1),
+ apples: 3320,
+ bananas: 480,
+ cherries: 640,
+ dates: 400,
+ },
+ ];
+
+ const colors = [
+ "rgba(138, 0, 230, 0.8)",
+ "rgba(173, 51, 255, 0.8)",
+ "rgba(194, 102, 255, 0.8)",
+ "rgba(214, 153, 255, 0.8)",
+ ];
+ const keys = ["apples", "bananas", "cherries", "dates"];
+
+ return (
+
+
+
+
+ );
+ }
}
-export default AreaStackWithAxisExample
+export default AreaStackWithAxisExample;
```
ProgressCircle：
+
```jsx
-import React from 'react'
-import { ProgressCircle } from 'react-native-svg-charts'
+import React from "react";
+import { ProgressCircle } from "react-native-svg-charts";
class ProgressCircleExample extends React.PureComponent {
-
- render() {
-
- return (
-
-
- )
- })
- }
-
+ render() {
+ const data = [50, 10, 40, 95, -4, -24, 85, 91];
+
+ const randomColor = () =>
+ ("#" + ((Math.random() * 0xffffff) << 0).toString(16) + "000000").slice(
+ 0,
+ 7
+ );
+
+ const pieData = data
+ .filter((value) => value > 0)
+ .map((value, index) => ({
+ value,
+ svg: { fill: randomColor() },
+ key: `pie-${index}`,
+ }));
+
+ const Labels = ({ slices }) => {
+ return slices.map((slice, index) => {
+ const { labelCentroid, pieCentroid, data } = slice;
return (
-
-
- )
- }
-
+
+
+ );
+ });
+ };
+
+ return (
+
+
+ );
+ }
}
-export default PieChartWithLabelExample
+export default PieChartWithLabelExample;
```
## Link
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-svg-capi.md#link) to add it to your project.
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-在下述版本验证通过:
+This document is verified based on the following versions:
1. react-native-harmony: 0.72.26-CAPI; SDK：HarmonyOS NEXT Developer Cannary3 SP2; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.22(Canary3);
-## 属性
-
-详情见[react-native-svg-charts](https://github.com/JesperLekland/react-native-svg-charts)
-
-### 共有属性
-
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | An array of arbitrary data - use prop xAccessor/yAccessorto tell the chart about the data structure | array | YES | ALL | YES |
-yAccessor | A function that takes each entry of data (named "item") as well as the index and returns the y-value of that entry | function | YES | ALL | YES |
-xAccessor | Same as yAccessor but returns the x-value of that entry | function | YES | ALL | YES |
-yScale | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand ) | d3Scale.scaleLinear | YES | ALL | YES |
-xScale | Same as yScale but for the x axis | d3Scale.scaleLinear | YES | ALL | YES |
-svg | an object containing all the props that should be passed down to the underlying react-native-svg component. See available props | object | YES | ALL | YES |
-animate | PropTypes.bool | boolean | YES | ALL | YES |
-animationDuration | PropTypes.number | number | YES | ALL | YES |
-style | Supports all ViewStyleProps | ViewStyleProps | YES | ALL | YES |
-curve | A function like this | d3.curveLinear | YES | ALL | YES |
-contentInset | An object that specifies how much fake "margin" to use inside of the SVG canvas. This is particularly helpful on Android where overflow: "visible" isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart | object | YES | ALL | YES |
-numberOfTicks | We use d3-array to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many "ticks" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis | number/undefined | YES | ALL | YES |
-showGrid | Whether or not to show the grid lines | boolean | YES | ALL | YES |
-yMin | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
-yMax | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
-xMin | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
-xMax | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
-children | One or many react-native-svg components that will be used to enhance your chart | ReactNode | YES | ALL | YES |
-
-### 属性children
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas | nunmber/string | YES | ALL | YES |
-| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas | nunmber/string | YES | ALL | YES |
-| width | the width of the canvas in pixels | number/srting | YES | ALL | YES |
-| height | the height of the canvas in pixels | number/srting | YES | ALL | YES |
-| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point | array | YES | ALL | YES |
-| ticks | if numberOfTicks has been provided to the chart this array will include the calculated tick values (useful for grids) | array | YES | ALL | YES |
-
-### 组件特有属性
+## Properties
+
+details[react-native-svg-charts](https://github.com/JesperLekland/react-native-svg-charts)
+
+### Total Properties
+
+> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- | -------- | ----------------- |
+| data | An array of arbitrary data - use prop xAccessor/yAccessorto tell the chart about the data structure | array | YES | ALL | YES |
+| yAccessor | A function that takes each entry of data (named "item") as well as the index and returns the y-value of that entry | function | YES | ALL | YES |
+| xAccessor | Same as yAccessor but returns the x-value of that entry | function | YES | ALL | YES |
+| yScale | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand ) | d3Scale.scaleLinear | YES | ALL | YES |
+| xScale | Same as yScale but for the x axis | d3Scale.scaleLinear | YES | ALL | YES |
+| svg | an object containing all the props that should be passed down to the underlying react-native-svg component. See available props | object | YES | ALL | YES |
+| animate | PropTypes.bool | boolean | YES | ALL | YES |
+| animationDuration | PropTypes.number | number | YES | ALL | YES |
+| style | Supports all ViewStyleProps | ViewStyleProps | YES | ALL | YES |
+| curve | A function like this | d3.curveLinear | YES | ALL | YES |
+| contentInset | An object that specifies how much fake "margin" to use inside of the SVG canvas. This is particularly helpful on Android where overflow: "visible" isn't supported and might cause clipping. Note: important to have same contentInset on axis's and chart | object | YES | ALL | YES |
+| numberOfTicks | We use d3-array to evenly distribute the grid and dataPoints on the yAxis. This prop specifies how many "ticks" we should try to render. Note: important that this prop is the same on both the chart and on the yAxis | number/undefined | YES | ALL | YES |
+| showGrid | Whether or not to show the grid lines | boolean | YES | ALL | YES |
+| yMin | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
+| yMax | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
+| xMin | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
+| xMax | Alter how the chart bounds are calculated | number/undefined | YES | ALL | YES |
+| children | One or many react-native-svg components that will be used to enhance your chart | ReactNode | YES | ALL | YES |
+
+### Propertieschildren
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | --------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- |
+| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas | nunmber/string | YES | ALL | YES |
+| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas | nunmber/string | YES | ALL | YES |
+| width | the width of the canvas in pixels | number/srting | YES | ALL | YES |
+| height | the height of the canvas in pixels | number/srting | YES | ALL | YES |
+| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point | array | YES | ALL | YES |
+| ticks | if numberOfTicks has been provided to the chart this array will include the calculated tick values (useful for grids) | array | YES | ALL | YES |
+
+### 组件特有 Properties
#### Area
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| start | The value of which the area should start (will always end on the data point) | number/undefined | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----- | ---------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
+| start | The value of which the area should start (will always end on the data point) | number/undefined | YES | ALL | YES |
#### StackedAreaChart
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | An array of the data entries | array | YES | ALL | YES |
-| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES |
-| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES |
-| order | The order in which to sort the areas | d3.stackOrderNone | YES | ALL | YES |
-| offset | A function to determine the offset of the areas | d3.stackOffsetNone | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------------------------------------------- | ------------------ | -------- | -------- | ----------------- |
+| data | An array of the data entries | array | YES | ALL | YES |
+| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES |
+| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES |
+| order | The order in which to sort the areas | d3.stackOrderNone | YES | ALL | YES |
+| offset | A function to determine the offset of the areas | d3.stackOffsetNone | YES | ALL | YES |
#### BarChart
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a svg property which allows you two override styles on that specific object. | array | YES | ALL | YES |
-| horizontal | Boolean whether or not the bars should be horizontal | boolean | YES | ALL | YES |
-| svg | Default svg props for all bars. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object | object | YES | ALL | YES |
-| spacingInner | Spacing between the bars (or groups of bars) | number/undefined | YES | ALL | YES |
-| spacingOuter | Spacing outside of the bars (or groups of bars). Percentage of one bars width | number/undefined | YES | ALL | YES |
-| contentInset | PropTypes.shape | object | YES | ALL | YES |
-| children.bandwidth | the width of a band (a.k.a bar) | number | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------- | -------- | ----------------- |
+| data | The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a svg property which allows you two override styles on that specific object. | array | YES | ALL | YES |
+| horizontal | Boolean whether or not the bars should be horizontal | boolean | YES | ALL | YES |
+| svg | Default svg props for all bars. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object | object | YES | ALL | YES |
+| spacingInner | Spacing between the bars (or groups of bars) | number/undefined | YES | ALL | YES |
+| spacingOuter | Spacing outside of the bars (or groups of bars). Percentage of one bars width | number/undefined | YES | ALL | YES |
+| contentInset | PropTypes.shape | object | YES | ALL | YES |
+| children.bandwidth | the width of a band (a.k.a bar) | number | YES | ALL | YES |
#### StackedBarChart
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | An array of the data entries: each value can be a number or a complex object with custom svg props for example | array | YES | ALL | YES |
-| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES |
-| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES |
-| valueAccessor | Very similar to the yAccessor of the other charts, usually needed when using complex objects as values | function | YES | ALL | YES |
-| horizontal | Boolean whether or not the bars should be horizontal | boolean | YES | ALL | YES |
-| order | The order in which to sort the areas | d3.stackOrderNone | YES | ALL | YES |
-| offset | A function to determine the offset of the areas | d3.stackOffsetNone | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------- | -------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | -------- | ----------------- |
+| data | An array of the data entries: each value can be a number or a complex object with custom svg props for example | array | YES | ALL | YES |
+| keys | This array should contain the object keys of interest (see above example) | array | YES | ALL | YES |
+| colors | An array of equal size as keys with the color for each key | array | YES | ALL | YES |
+| valueAccessor | Very similar to the yAccessor of the other charts, usually needed when using complex objects as values | function | YES | ALL | YES |
+| horizontal | Boolean whether or not the bars should be horizontal | boolean | YES | ALL | YES |
+| order | The order in which to sort the areas | d3.stackOrderNone | YES | ALL | YES |
+| offset | A function to determine the offset of the areas | d3.stackOffsetNone | YES | ALL | YES |
#### PieChart
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the arc property which allows you two override settings on that specific arc | array | YES | ALL | YES |
-| valueAccessor | Very similar to the yAccessor of the other charts | function | YES | ALL | YES |
-| outerRadius | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
-| innerRadius | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
-| labelRadius | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
-| padAngle | The angle between the slices | number/undefined | YES | ALL | YES |
-| startAngle | The start angle in radians of the entire pie | number/undefined | YES | ALL | YES |
-| endAngle | The end angle in radians of the entire pie | number/undefined | YES | ALL | YES |
-| sort | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the dataPoints array | function | YES | ALL | YES |
-| children.slices | an array of the pie chart slices. See source code and examples for what it includes | array | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------- | -------- | ----------------- |
+| data | Very similar to the data prop of our other charts, the only exception is that the PieChart only accepts complex objects (not just numbers). An item can also contain the arc property which allows you two override settings on that specific arc | array | YES | ALL | YES |
+| valueAccessor | Very similar to the yAccessor of the other charts | function | YES | ALL | YES |
+| outerRadius | The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
+| innerRadius | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
+| labelRadius | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) | number/string/undefined | YES | ALL | YES |
+| padAngle | The angle between the slices | number/undefined | YES | ALL | YES |
+| startAngle | The start angle in radians of the entire pie | number/undefined | YES | ALL | YES |
+| endAngle | The end angle in radians of the entire pie | number/undefined | YES | ALL | YES |
+| sort | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the dataPoints array | function | YES | ALL | YES |
+| children.slices | an array of the pie chart slices. See source code and examples for what it includes | array | YES | ALL | YES |
#### ProgressCircle
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| progress | PropTypes.number.isRequired | number | YES | ALL | YES |
-| progressColor | PPropTypes.any | string/undefined | YES | ALL | YES |
-| backgroundColor | PropTypes.any | string/undefined | YES | ALL | YES |
-| startAngle | PropTypes.number | number/undefined | YES | ALL | YES |
-| endAngle | PropTypes.number | number/undefined | YES | ALL | YES |
-| strokeWidth | PropTypes.number | number/undefined | YES | ALL | YES |
-| cornerRadius | PropTypes.number | number/undefined | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | --------------------------- | ---------------- | -------- | -------- | ----------------- |
+| progress | PropTypes.number.isRequired | number | YES | ALL | YES |
+| progressColor | PPropTypes.any | string/undefined | YES | ALL | YES |
+| backgroundColor | PropTypes.any | string/undefined | YES | ALL | YES |
+| startAngle | PropTypes.number | number/undefined | YES | ALL | YES |
+| endAngle | PropTypes.number | number/undefined | YES | ALL | YES |
+| strokeWidth | PropTypes.number | number/undefined | YES | ALL | YES |
+| cornerRadius | PropTypes.number | number/undefined | YES | ALL | YES |
#### YAxis
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| scale | Should be the same as passed into the charts yScale, or d3Scale.scaleBand if used in conjunction with a horizontal BarChart | d3Scale.scaleLinear | YES | ALL | YES |
-| svg | supports all svg props an svg text normally supports | object | YES | ALL | YES |
-| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | YES | ALL | YES |
-| spacingOuter | Spacing outside of the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | YES | ALL | YES |
-| formatLabel | A utility function to format the text before it is displayed, e.g `value => "$" + value | function|undefined | YES | ALL | YES |
-| contentInset | Used to sync layout with chart (if same prop used there) | object | YES | ALL | YES |
-| min | Used to sync layout with chart (if gridMin is used there) | number/undefined | YES | ALL | YES |
-| max | Used to sync layout with chart (if gridMax is used there) | number/undefined | YES | ALL | YES |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | --------- | -------- | ----------------- | --- |
+| scale | Should be the same as passed into the charts yScale, or d3Scale.scaleBand if used in conjunction with a horizontal BarChart | d3Scale.scaleLinear | YES | ALL | YES |
+| svg | supports all svg props an svg text normally supports | object | YES | ALL | YES |
+| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | YES | ALL | YES |
+| spacingOuter | Spacing outside of the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | YES | ALL | YES |
+| formatLabel | A utility function to format the text before it is displayed, e.g `value => "$" + value | function | undefined | YES | ALL | YES |
+| contentInset | Used to sync layout with chart (if same prop used there) | object | YES | ALL | YES |
+| min | Used to sync layout with chart (if gridMin is used there) | number/undefined | YES | ALL | YES |
+| max | Used to sync layout with chart (if gridMax is used there) | number/undefined | YES | ALL | YES |
#### XAxis
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| data | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a xAccessor prop is required to calculate the axis' extent. A data object can contain a svg property which allows you to override styles on that specific object | array | YES | ALL | YES |
-| scale | Should be the same as passed into the charts xScale | d3Scale.scaleLinear | YES | ALL | YES |
-| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | YES | ALL | YES |
-| spacingOuter | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | YES | ALL | YES |
-| svg | Default svg props for all labels. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object | object | YES | ALL | YES |
-| formatLabel | A utility function to format the text before it is displayed, e.g value => "day" + value. Passes back the value provided by the xAccessor | function | YES | ALL | YES |
-| contentInset | Used to sync layout with chart (if same prop used there) | object | YES | ALL | YES |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- | -------- | ----------------- |
+| data | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a xAccessor prop is required to calculate the axis' extent. A data object can contain a svg property which allows you to override styles on that specific object | array | YES | ALL | YES |
+| scale | Should be the same as passed into the charts xScale | d3Scale.scaleLinear | YES | ALL | YES |
+| spacingInner | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingInner prop on the actual BarChart | number/undefined | YES | ALL | YES |
+| spacingOuter | Spacing between the labels. Only applicable if scale=d3Scale.scaleBand and should then be equal to spacingOuter prop on the actual BarChart | number/undefined | YES | ALL | YES |
+| svg | Default svg props for all labels. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object | object | YES | ALL | YES |
+| formatLabel | A utility function to format the text before it is displayed, e.g value => "day" + value. Passes back the value provided by the xAccessor | function | YES | ALL | YES |
+| contentInset | Used to sync layout with chart (if same prop used there) | object | YES | ALL | YES |
#### Grid
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| svg | an object containing all the props that should be passed down to the underlying react-native-svg component. | object | YES | ALL | YES |
-| direction | The direction of the grid lines. | Grid.Direction | YES | ALL | YES |
-| belowChart | whether or not to render below the chart. | boolean | YES | ALL | YES |
-## 遗留问题
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ----------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- |
+| svg | an object containing all the props that should be passed down to the underlying react-native-svg component. | object | YES | ALL | YES |
+| direction | The direction of the grid lines. | Grid.Direction | YES | ALL | YES |
+| belowChart | whether or not to render below the chart. | boolean | YES | ALL | YES |
+
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/JesperLekland/react-native-svg-charts/blob/dev/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/JesperLekland/react-native-svg-charts/blob/dev/LICENSE).
-
\ No newline at end of file
+
diff --git a/en/react-native-swipeable-list.md b/en/react-native-swipeable-list.md
index 5095acf557a95cc01024eaede030968e94f7f0ee..b10b00a381017a68c9b6f6cb8680c7d3731db132 100644
--- a/en/react-native-swipeable-list.md
+++ b/en/react-native-swipeable-list.md
@@ -1,6 +1,6 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-swipeable-list
@@ -15,9 +15,9 @@
-> [!TIP] [Github 地址](https://github.com/esthor/react-native-swipeable-list)
+> [!TIP] [ GitHub address](https://github.com/esthor/react-native-swipeable-list)
-## 安装与使用
+## Installation and Usage
@@ -35,9 +35,9 @@ yarn add react-native-swipeable-list@0.1.2
-下面的代码展示了这个库的基本使用场景：
+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 } from "react";
@@ -422,22 +422,21 @@ const styles = StyleSheet.create({
export default App;
```
-## 约束与限制
+## 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.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## Properties
SwipeableFlatList 组件接收所有[React Native FlatList](https://facebook.github.io/react-native/docs/flatlist)组件的 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 |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------- | ----------------- |
@@ -447,12 +446,12 @@ SwipeableFlatList 组件接收所有[React Native FlatList](https://facebook.git
| maxSwipeDistance | Maximum distance to open to after a swipe. | number | no | iOS/Android | yes |
| renderQuickActions | Callback method to render the view that will be unveiled on swipe. Type `renderItemType` (which provides `index` and `item`, which will be very useful for performing actions on your items. | function | yes | iOS/Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/esthor/react-native-swipeable-list/blob/main/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/esthor/react-native-swipeable-list/blob/main/LICENSE).
diff --git a/en/react-native-switch.md b/en/react-native-switch.md
index 769a55c0a521c1e1869cb678776e06c45e03139f..f18b9d2276c9a00d2c85e28f73a344fa175b56b7 100644
--- a/en/react-native-switch.md
+++ b/en/react-native-switch.md
@@ -1,6 +1,6 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-switch
@@ -14,10 +14,9 @@
+> [!TIP] [ GitHub address](https://github.com/shahen94/react-native-switch)
-> [!TIP] [Github 地址](https://github.com/shahen94/react-native-switch)
-
-## 安装与使用
+## Installation and Usage
@@ -35,40 +34,48 @@ yarn add react-native-switch@1.5.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, { useState } from "react";
import { Switch } from "react-native-switch";
-import {SafeAreaView, StyleSheet,Button, Text, View, Alert} from 'react-native';
-
-
-export function SwitchDemo(){
+import {
+ SafeAreaView,
+ StyleSheet,
+ Button,
+ Text,
+ View,
+ Alert,
+} from "react-native";
+
+export function SwitchDemo() {
const [isEnabled, setIsEnabled] = useState(false);
- const toggleSwitch = (val:boolean) => {setIsEnabled(val) };
-
- return(
-
- Welcome to React Native !
+ const toggleSwitch = (val: boolean) => {
+ setIsEnabled(val);
+ };
+
+ return (
+
+ Welcome to React Native !
toggleSwitch((val))}
+ onValueChange={(val) => toggleSwitch(val)}
disabled={false}
- activeText={'On'}
- inActiveText={'Off'}
+ activeText={"On"}
+ inActiveText={"Off"}
circleSize={30}
barHeight={30}
circleBorderWidth={3}
- backgroundActive={'green'}
- backgroundInactive={'gray'}
- circleActiveColor={'#30a566'}
- circleInActiveColor={'#fff'}
- renderInsideCircle={() => ''} // custom component to render inside the Switch circle (Text, Image, etc.)
+ backgroundActive={"green"}
+ backgroundInactive={"gray"}
+ circleActiveColor={"#30a566"}
+ circleInActiveColor={"#fff"}
+ renderInsideCircle={() => ""} // custom component to render inside the Switch circle (Text, Image, etc.)
changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
innerCircleStyle={{ alignItems: "center", justifyContent: "center" }} // style for inner animated circle for what you (may) be rendering inside the circle
- outerCircleStyle={{ }} // style for outer animated circle
+ outerCircleStyle={{}} // style for outer animated circle
renderActiveText={true}
renderInActiveText={true}
switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
@@ -76,76 +83,81 @@ export function SwitchDemo(){
switchWidthMultiplier={3} // multiplied by the `circleSize` prop to calculate total width of the Switch
switchBorderRadius={50} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
/>
- To get started,edit index.harmony.js
- Press Cmd +R to reload,
- Cmd+D or shake for dev menu
+
+ To get started,edit index.harmony.js
+
+
+ Press Cmd +R to reload,
+
+
+ Cmd+D or shake for dev menu
+
- )
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: "center",
- justifyContent: "center",
- backgroundColor:"#fff",
-
- }
- });
+ );
+}
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ backgroundColor: "#fff",
+ },
+});
```
-## 约束与限制
+## 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.29;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-
-## 属性
-
-> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!tip] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| :----------------: | :----------------------------------------------------------: | :-----------------: | :------: | :---------: | :---------------: |
-| onValueChange | when to change value(value: `boolean`) | function | No | Android/IOS | Yes |
-| disabled | Display or not | boolean | No | Android/IOS | Yes |
-| activeText | active text | string | No | Android/IOS | Yes |
-| inActiveText | in Active Text | string | No | Android/IOS | Yes |
-| backgroundActive | background active | string | No | Android/IOS | Yes |
-| backgroundInactive | background in active | string | No | Android/IOS | Yes |
-| value | swtich value | boolean | No | Android/IOS | Yes |
-| circleActiveColor | circle active color | string | No | Android/IOS | Yes |
-| circleInActiveColor | circle in active color | string | No | Android/IOS | Yes |
-| circleSize | circle Size| number | No | Android/IOS | Yes |
-| circleBorderWidth | circle Border Width | function | No | Android/IOS | Yes |
-| circleBorderactiveColor | circle Border Active Color| function | No | Android/IOS | Yes |
-| circleBorderInactiveColor |circle Border Inactive Color | boolean | No | Android/IOS | Yes |
-| activeTextStyle | active Text Style | StyleProp` ` | No | Android/IOS |Yes
-| inactiveTextStyle | in Active Text Style. | StyleProp` ` | No | Android/IOS | Yes |
-| containerStyle | container Style | StyleProp` ` | No | Android/IOS | Yes |
-| barHeight | Bar Height | number | No | Android/IOS | Yes |
-| circleBorderWidth | circle Border Width | number | No | Android/IOS | Yes |
-| renderInsideCircle | custom component to render inside the Switch circle (Text, Image, etc.) | function | No | Android/IOS | Yes |
-| changeValueImmediately | if rendering inside circle, change state immediately or wait for animation to complete | boolean | No | Android/IOS | Yes |
-| innerCircleStyle | style for inner animated circle for what you (may) be rendering inside the circle| StyleProp` ` | No | Android/IOS | Yes |
-| outerCircleStyle | style for outer animated circle | StyleProp` ` | No | Android/IOS | Yes |
-renderActiveText | render Active Text | boolean | No | Android/IOS | Yes |
-renderInActiveText | render In Active Text | boolean | No | Android/IOS | Yes |
-switchLeftPx | denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider | number | No | Android/IOS | Yes |
-switchRightPx | denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider | number | No | Android/IOS | Yes |
-switchWidthMultiplier | multiplied by the `circleSize` prop to calculate total width of the Switch | number | No | Android/IOS | Yes |
-switchBorderRadius | Sets the border Radius of the switch slider. If unset, it remains the circleSize. | number | No | Android/IOS | Yes |
-testID | swtich test ID | string | No | Android/IOS | Yes |
-
-## 遗留问题
-
-## 其他
-
-## 开源协议
-
-本项目基于 [The MIT License (MIT)](https://github.com/shahen94/react-native-switch/blob/master/LICENSE) ，请自由地享受和参与开源。
-
-
\ No newline at end of file
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+
+## Properties
+
+> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | :------: | :---------: | :---------------: |
+| onValueChange | when to change value(value: `boolean`) | function | No | Android/IOS | Yes |
+| disabled | Display or not | boolean | No | Android/IOS | Yes |
+| activeText | active text | string | No | Android/IOS | Yes |
+| inActiveText | in Active Text | string | No | Android/IOS | Yes |
+| backgroundActive | background active | string | No | Android/IOS | Yes |
+| backgroundInactive | background in active | string | No | Android/IOS | Yes |
+| value | swtich value | boolean | No | Android/IOS | Yes |
+| circleActiveColor | circle active color | string | No | Android/IOS | Yes |
+| circleInActiveColor | circle in active color | string | No | Android/IOS | Yes |
+| circleSize | circle Size | number | No | Android/IOS | Yes |
+| circleBorderWidth | circle Border Width | function | No | Android/IOS | Yes |
+| circleBorderactiveColor | circle Border Active Color | function | No | Android/IOS | Yes |
+| circleBorderInactiveColor | circle Border Inactive Color | boolean | No | Android/IOS | Yes |
+| activeTextStyle | active Text Style | StyleProp` ` | No | Android/IOS | Yes |
+| inactiveTextStyle | in Active Text Style. | StyleProp` ` | No | Android/IOS | Yes |
+| containerStyle | container Style | StyleProp` ` | No | Android/IOS | Yes |
+| barHeight | Bar Height | number | No | Android/IOS | Yes |
+| circleBorderWidth | circle Border Width | number | No | Android/IOS | Yes |
+| renderInsideCircle | custom component to render inside the Switch circle (Text, Image, etc.) | function | No | Android/IOS | Yes |
+| changeValueImmediately | if rendering inside circle, change state immediately or wait for animation to complete | boolean | No | Android/IOS | Yes |
+| innerCircleStyle | style for inner animated circle for what you (may) be rendering inside the circle | StyleProp` ` | No | Android/IOS | Yes |
+| outerCircleStyle | style for outer animated circle | StyleProp` ` | No | Android/IOS | Yes |
+| renderActiveText | render Active Text | boolean | No | Android/IOS | Yes |
+| renderInActiveText | render In Active Text | boolean | No | Android/IOS | Yes |
+| switchLeftPx | denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider | number | No | Android/IOS | Yes |
+| switchRightPx | denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider | number | No | Android/IOS | Yes |
+| switchWidthMultiplier | multiplied by the `circleSize` prop to calculate total width of the Switch | number | No | Android/IOS | Yes |
+| switchBorderRadius | Sets the border Radius of the switch slider. If unset, it remains the circleSize. | number | No | Android/IOS | Yes |
+| testID | swtich test ID | string | No | Android/IOS | Yes |
+
+## Known Issues
+
+## Others
+
+## License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/shahen94/react-native-switch/blob/master/LICENSE).
+
+
diff --git a/en/react-native-tcp-socket.md b/en/react-native-tcp-socket.md
index 7bfd7c830683ee0eff1a5733bde7f573f1a8607a..27dee4b66c0ddfd217141ce09817d9ab59dacb80 100644
--- a/en/react-native-tcp-socket.md
+++ b/en/react-native-tcp-socket.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-tcp-socket
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-tcp-socket)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-tcp-socket)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-tcp-socket Releases](https://github.com/react-native-oh-library/react-native-tcp-socket/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-tcp-socket Releases](https://github.com/react-native-oh-library/react-native-tcp-socket/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-tcp-socket@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} from 'react';
@@ -509,28 +509,28 @@ export const TcpSocketDemo = () => {
keyExtractor={item => item.id.toString()}
/>
- 创建TCP服务器
+ creating a tcp server
- 创建TCP客户端
+ creating a tcp client
- 客户端和服务器通信
+ client and server communication
- 数据的暂停与恢复
+ pause and resume of data
- 长数据传输
+ long data transmission
- 关闭连接
+ close link
- 创建TLS服务器
+ creating a TLS server
- 创建TLS客户端
+ creating a TLS client
);
@@ -567,17 +567,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](/en/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
{
@@ -588,18 +588,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": {
@@ -608,22 +605,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 TcpSocketPackage
+### 3. Introducing TcpSocketPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -636,28 +633,28 @@ 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-tcp-socket Releases](https://github.com/react-native-oh-library/react-native-tcp-socket/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-tcp-socket Releases](https://github.com/react-native-oh-library/react-native-tcp-socket/releases)
-### 权限要求
+### Permission Requirements
需要获取网络信息权限："ohos.permission.GET_NETWORK_INFO"和使用网络权限："ohos.permission.INTERNET"，配置方法如下：
@@ -677,9 +674,9 @@ 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.
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| -------------------------------------------- | --------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
@@ -698,79 +695,79 @@ ohpm install
### Server
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| address() | Returns the bound `address`, the address `family` name, and `port` of the server as reported by the operating system if listening | function | no | Android,iOS | yes |
-| listen(options, callback) | Start a server listening for connections | function | no | Android,iOS | yes |
-| close(callback) | Stops the server from accepting new connections and keeps existing connections | function |no | Android,iOS | yes |
-| getConnections(callback) | Asynchronously get the number of concurrent connections on the server | function | no | Android,iOS | yes |
-| listening | whether to enable the listening | boolean | no | Android,iOS | yes |
-| on('close') | Triggered when the server is shut down | event | no | Android,iOS | yes |
-| on('connection') | Triggered when the server receives a new connection | event | no | Android,iOS | yes |
-| on('error') | Triggered when an error occurs on the server | event | no | Android,iOS | yes |
-| on('listening') | Triggered when the server starts listening | event | no | Android,iOS | yes |
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| address() | Returns the bound `address`, the address `family` name, and `port` of the server as reported by the operating system if listening | function | no | Android,iOS | yes |
+| listen(options, callback) | Start a server listening for connections | function | no | Android,iOS | yes |
+| close(callback) | Stops the server from accepting new connections and keeps existing connections | function | no | Android,iOS | yes |
+| getConnections(callback) | Asynchronously get the number of concurrent connections on the server | function | no | Android,iOS | yes |
+| listening | whether to enable the listening | boolean | no | Android,iOS | yes |
+| on('close') | Triggered when the server is shut down | event | no | Android,iOS | yes |
+| on('connection') | Triggered when the server receives a new connection | event | no | Android,iOS | yes |
+| on('error') | Triggered when an error occurs on the server | event | no | Android,iOS | yes |
+| on('listening') | Triggered when the server starts listening | event | no | Android,iOS | yes |
### Socket
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| address() | Returns the bound `address`, the address `family` name and `port` of the socket as reported | function | no | Android,iOS | yes |
-| destroy() | Ensures that no more I/O activity happens on this socket. Destroys the stream and closes the connection | function | no | Android,iOS | yes |
-| end() | Half-closes the socket. i.e., it sends a FIN packet. It is possible the server will still send some data | function | no | Android,iOS | yes |
-| setEncoding(encoding) | Set the encoding for the socket as a Readable Stream. By default, no encoding is assigned and stream data will be returned as `Buffer` objects | function | no | Android,iOS | yes |
-| setNoDelay(noDelay) | Set no delay | function | no | Android,iOS | yes |
-| setTimeout() | Sets the socket to timeout after `timeout` milliseconds of inactivity on the socket. By default `TcpSocket` do not have a timeout | function | no | Android,iOS | yes |
-| write(buffer, encoding, cb) | Sends data on the socket. The second parameter specifies the encoding in the case of a string — it defaults to UTF8 encoding | function | no | Android,iOS | yes |
-| pause() | Pauses the reading of data. That is, `'data'` events will not be emitted. Useful to throttle back an upload | function | no | Android,iOS | yes |
-| resume() | Resumes reading after a call to `socket.pause()` | function | no | Android,iOS | yes |
-| writableNeedDrain | whether need to wait for data to be written to the socket | boolean | no | Android,iOS | yes |
-| bytesRead | Indicates the number of bytes of data that have been read from the socket | number | no | Android,iOS | yes |
-| bytesWritten | get the number of bytes last written to the socket | number | no | Android,iOS | yes |
-| connecting | whether the current socket is being connected | boolean | no | Android,iOS | yes |
-| destroyed | Whether the socket has been destroyed | boolean | no | Android,iOS | yes |
-| localAddress | Local ip address | string | no | Android,iOS | yes |
-| localPort | Local port | number | no | Android,iOS | yes |
-| remoteAddress | remote server IP address | string | no | Android,iOS | yes |
-| remoteFamily | remote server IP address type | string | no | Android,iOS | yes |
-| remotePort | remote server port | number | no | Android,iOS | yes |
-| pending | Whether has pending data to be sent to the remote server | boolean | no | Android,iOS | yes |
-| timeout | The timeout period for the socket, in milliseconds. The default timeout period is 30 seconds | number | no | Android,iOS | yes |
-| readyState | the state of socket,`0`: not connected,`1`:connected,2: closing,3:closed | number | no | Android,iOS | yes |
-| on('pause') | Triggered when pauses the reading of data | event | no | Android,iOS | yes |
-| on('resume') | Triggered when Resumes the reading of data | event | no | Android,iOS | yes |
-| on('close') | Triggered when socket is closed | event | no | Android,iOS | yes |
-| on('connect') | Triggered when socket is connected | event | no | Android,iOS | yes |
-| on('data') | Triggered when socket receives data | event | no | Android,iOS | yes |
-| on('drain') | Triggered when the buffer becomes empty, indicating that data can be written to the socke | event | no | Android,iOS | yes |
-| on('error') | Triggered when an error occurs on the socket | event | no | Android,iOS | yes |
-| on('timeout') | Triggered When the connection or data transmission times out | event | no | Android,iOS | yes |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| address() | Returns the bound `address`, the address `family` name and `port` of the socket as reported | function | no | Android,iOS | yes |
+| destroy() | Ensures that no more I/O activity happens on this socket. Destroys the stream and closes the connection | function | no | Android,iOS | yes |
+| end() | Half-closes the socket. i.e., it sends a FIN packet. It is possible the server will still send some data | function | no | Android,iOS | yes |
+| setEncoding(encoding) | Set the encoding for the socket as a Readable Stream. By default, no encoding is assigned and stream data will be returned as `Buffer` objects | function | no | Android,iOS | yes |
+| setNoDelay(noDelay) | Set no delay | function | no | Android,iOS | yes |
+| setTimeout() | Sets the socket to timeout after `timeout` milliseconds of inactivity on the socket. By default `TcpSocket` do not have a timeout | function | no | Android,iOS | yes |
+| write(buffer, encoding, cb) | Sends data on the socket. The second parameter specifies the encoding in the case of a string — it defaults to UTF8 encoding | function | no | Android,iOS | yes |
+| pause() | Pauses the reading of data. That is, `'data'` events will not be emitted. Useful to throttle back an upload | function | no | Android,iOS | yes |
+| resume() | Resumes reading after a call to `socket.pause()` | function | no | Android,iOS | yes |
+| writableNeedDrain | whether need to wait for data to be written to the socket | boolean | no | Android,iOS | yes |
+| bytesRead | Indicates the number of bytes of data that have been read from the socket | number | no | Android,iOS | yes |
+| bytesWritten | get the number of bytes last written to the socket | number | no | Android,iOS | yes |
+| connecting | whether the current socket is being connected | boolean | no | Android,iOS | yes |
+| destroyed | Whether the socket has been destroyed | boolean | no | Android,iOS | yes |
+| localAddress | Local ip address | string | no | Android,iOS | yes |
+| localPort | Local port | number | no | Android,iOS | yes |
+| remoteAddress | remote server IP address | string | no | Android,iOS | yes |
+| remoteFamily | remote server IP address type | string | no | Android,iOS | yes |
+| remotePort | remote server port | number | no | Android,iOS | yes |
+| pending | Whether has pending data to be sent to the remote server | boolean | no | Android,iOS | yes |
+| timeout | The timeout period for the socket, in milliseconds. The default timeout period is 30 seconds | number | no | Android,iOS | yes |
+| readyState | the state of socket,`0`: not connected,`1`:connected,2: closing,3:closed | number | no | Android,iOS | yes |
+| on('pause') | Triggered when pauses the reading of data | event | no | Android,iOS | yes |
+| on('resume') | Triggered when Resumes the reading of data | event | no | Android,iOS | yes |
+| on('close') | Triggered when socket is closed | event | no | Android,iOS | yes |
+| on('connect') | Triggered when socket is connected | event | no | Android,iOS | yes |
+| on('data') | Triggered when socket receives data | event | no | Android,iOS | yes |
+| on('drain') | Triggered when the buffer becomes empty, indicating that data can be written to the socke | event | no | Android,iOS | yes |
+| on('error') | Triggered when an error occurs on the socket | event | no | Android,iOS | yes |
+| on('timeout') | Triggered When the connection or data transmission times out | event | no | Android,iOS | yes |
### TLSServer
-[!TIP] TLSServer继承自Server对象，拥有Server对象的所有属性、方法和事件，以下仅列出其独有的属性。
+[!TIP] TLSServer 继承自 Server 对象，拥有 Server 对象的所有 Properties、方法和事件，以下仅列出其独有的 Properties。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| setSecureContext(options) | Set Security Context | function | no | Android,iOS | yes |
-| on('secureConnection') | Triggered When a secure TLS connection is established | event | no | Android,iOS | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | ----------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| setSecureContext(options) | Set Security Context | function | no | Android,iOS | yes |
+| on('secureConnection') | Triggered When a secure TLS connection is established | event | no | Android,iOS | yes |
### TLSSocket
-[!TIP] TLSSocket继承自Socket对象，拥有Socket对象的所有属性、方法和事件，以下仅列出其独有的属性。
+[!TIP] TLSSocket 继承自 Socket 对象，拥有 Socket 对象的所有 Properties、方法和事件，以下仅列出其独有的 Properties。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| getCertificate() | Get a Local Certificate Information | function | no | Android | yes |
-| getPeerCertificate() | Get the Certificate Information of the Remote Server | function | no | Android | yes |
-| on('secureConnect') | Triggered When a secure connection is established | event | no | Android,iOS | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------- | ---------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| getCertificate() | Get a Local Certificate Information | function | no | Android | yes |
+| getPeerCertificate() | Get the Certificate Information of the Remote Server | function | no | Android | yes |
+| on('secureConnect') | Triggered When a secure connection is established | event | no | Android,iOS | yes |
-## 遗留问题
+## Known Issues
- [ ] 目前无法实现多线程: [issue#3](https://github.com/react-native-oh-library/react-native-tcp-socket/issues/3)
-- [ ] 获取证书只有异步接口，目前返回值是一个promise，与安卓上同步接口不一致: [issue#4](https://github.com/react-native-oh-library/react-native-tcp-socket/issues/4)
+- [ ] 获取证书只有异步接口，目前返回值是一个 promise，与安卓上同步接口不一致: [issue#4](https://github.com/react-native-oh-library/react-native-tcp-socket/issues/4)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/Rapsssito/react-native-tcp-socket/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/Rapsssito/react-native-tcp-socket/blob/master/LICENSE).
diff --git a/en/react-native-theme-control.md b/en/react-native-theme-control.md
index 6e9a0495f7d7b3e2301349d1f4db54bc0f1d6a67..4341f3ac0e3379231a2cef6d471297ad8a3ca4ce 100644
--- a/en/react-native-theme-control.md
+++ b/en/react-native-theme-control.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-theme-control
@@ -12,17 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-theme-control)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-theme-control)
+## 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-theme-control/Releases](https://github.com/react-native-oh-library/react-native-theme-control/releases).
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-theme-control/Releases](https://github.com/react-native-oh-library/react-native-theme-control/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,11 +38,11 @@ yarn add @react-native-oh-tpl/react-native-theme-control@file:#
-下面的代码展示了这个库的基本使用场景：
+The following code shows the basic use scenario of the repository:
-> [!WARNING] 使用时 import 的库名不变。
+> [!WARNING] The name of the imported repository remains unchanged.
-```js
+```js
import * as React from 'react';
import { Text, useColorScheme, View } from 'react-native';
@@ -101,17 +99,17 @@ useThemePreference(): {themePreference}
}
```
-## 使用 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](/en/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
{
@@ -122,44 +120,40 @@ useThemePreference(): {themePreference}
}
```
-### 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-theme-control": "file:../../node_modules/@react-native-oh-tpl/react-native-theme-control/harmony/themecontrol.har",
-
+
}
```
-点击右上角的 `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](/en/link-source-code.md).
+### 3. Introducing RNThemeControlPackage to ArkTS
-### 3.在 ArkTs 侧引入 RNThemeControlPackage
-
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -173,9 +167,10 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 4.在 entry/src/main/ets/abilityStage 新建MyAbilityStage.ets
+### 4.在 entry/src/main/ets/abilityStage 新建 MyAbilityStage.ets
+
+Open the `entry/src/main/ets/abilityStage/MyAbilityStage.ets` file and add the following code:
-打开 `entry/src/main/ets/abilityStage/MyAbilityStage.ets`，添加：
```diff
import appRecovery from '@ohos.app.ability.appRecovery';
import AbilityStage from '@ohos.app.ability.AbilityStage';
@@ -198,9 +193,11 @@ export default class MyAbilityStage extends AbilityStage {
}
}
```
-### 5.在 entry/src/main/ets/entryability/EntryAbility.ets 配置生命周期调用
-打开 `entry/src/main/ets/abilityStage/MyAbilityStage.ets`，添加：
+### 5.在 entry/src/main/ets/entryability/EntryAbility.ets 配置生命周期调用
+
+Open the `entry/src/main/ets/abilityStage/MyAbilityStage.ets` file and add the following code:
+
```diff
+ import {RNAbility} from 'rnoh';
+ import Want from '@ohos.app.ability.Want';
@@ -217,50 +214,45 @@ export default class MyAbilityStage extends AbilityStage {
}
```
-### 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
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-theme-control Releases](https://github.com/react-native-oh-library/react-native-theme-control/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-theme-control Releases](https://github.com/react-native-oh-library/react-native-theme-control/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.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-------------------------|-------------------------------------|-----------|----------|--------------|-------------------|
-| getThemePreference | Get Theme Preferences | function | No | IOS/Android | yes |
-| setNavbarAppearance | Set Navigation Bar Appearance | function | No | IOS/Android | yes |
-| setAppBackground | Set the background color of the app | function | No | IOS/Android | yes |
-| setTheme | Set Theme | function | No | IOS/Android | yes |
-| recoverApplicationTheme | Restoring Theme Storage | function | No | IOS/Android | yes |
+> [!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 |
+| ----------------------- | ----------------------------------- | -------- | -------- | ----------- | ----------------- |
+| getThemePreference | Get Theme Preferences | function | No | IOS/Android | yes |
+| setNavbarAppearance | Set Navigation Bar Appearance | function | No | IOS/Android | yes |
+| setAppBackground | Set the background color of the app | function | No | IOS/Android | yes |
+| setTheme | Set Theme | function | No | IOS/Android | yes |
+| recoverApplicationTheme | Restoring Theme Storage | function | No | IOS/Android | yes |
-## 其他
+## Known Issues
-## 开源协议
+## Others
-本项目基于 [The MIT License (MIT)](https://github.com/vonovak/react-native-theme-control/blob/main/LICENSE) ，请自由地享受和参与开源。
+## License
+This project is licensed under [The MIT License (MIT)](https://github.com/vonovak/react-native-theme-control/blob/main/LICENSE).
diff --git a/en/react-native-theme-switch-animation.md b/en/react-native-theme-switch-animation.md
index c05d1c1ffe859ae3a3fad899e80964d9f1c8faba..af107c5171b4192ed29ad28fb12e0d5a696cadec 100644
--- a/en/react-native-theme-switch-animation.md
+++ b/en/react-native-theme-switch-animation.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-theme-switch-animation
@@ -12,12 +12,11 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-theme-switch-animation)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-theme-switch-animation)
+## Installation and Usage
-## 安装与使用
-
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-theme-switch-animation Releases](https://github.com/react-native-oh-library/react-native-theme-switch-animation/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-theme-switch-animation Releases](https://github.com/react-native-oh-library/react-native-theme-switch-animation/releases).
@@ -35,71 +34,71 @@ yarn add @react-native-oh-tpl/react-native-theme-switch-animation@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 { StyleSheet, View, Button, Text } from 'react-native';
-import switchTheme from 'react-native-theme-switch-animation';
+import * as React from "react";
+import { StyleSheet, View, Button, Text } from "react-native";
+import switchTheme from "react-native-theme-switch-animation";
export function ReactNativeThemeSwitchAnimationDemo() {
- const [theme, setTheme] = React.useState('light');
-
+ const [theme, setTheme] = React.useState("light");
+
return (
+
-
-
- tests
-
-
-
-
- {
- switchTheme({
- switchThemeFunction: () => {
- setTheme(theme === 'light' ? 'dark' : 'light');
- },
- animationConfig: {
- type: 'inverted-circular',
- duration: 2000,
- startingPoint: {
- cxRatio: 0.5,
- cyRatio: 0.5,
- },
+ tests
+
+
+
+
+ {
+ switchTheme({
+ switchThemeFunction: () => {
+ setTheme(theme === "light" ? "dark" : "light");
+ },
+ animationConfig: {
+ type: "inverted-circular",
+ duration: 2000,
+ startingPoint: {
+ cxRatio: 0.5,
+ cyRatio: 0.5,
},
- });
- }}
- />
-
+ },
+ });
+ }}
+ />
+
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
+ alignItems: "center",
+ justifyContent: "center",
},
box: {
width: 60,
@@ -107,21 +106,19 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
});
-
```
-## 使用 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](/en/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
{
@@ -132,18 +129,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -153,21 +147,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)
-### 3.在 ArkTs 侧引入 RNThemeSwitch Package
+> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
-打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：
+### 3. Introducing RNThemeSwitch Package to ArkTS
+
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -181,68 +176,70 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 4.运行
-点击右上角的 `sync` 按钮
+### 4. Running
+
+Click the `sync` button in the upper right corner.
-或者在终端执行：
+Alternatively, run the following instruction on the terminal:
```bash
cd entry
ohpm install
```
-然后编译、运行即可。
+Then build and run the code.
-## 约束与限制
+## Constraints
-### 注意事项
+### Precautions
-本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-safe-area-context的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-safe-area-context. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-如未引入react-native-safe-area-context请参照[@react-native-oh-tpl/react-native-safe-area-context 文档](/zh-cn/react-native-safe-area-context.md)进行引入
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-safe-area-context](/en/react-native-safe-area-context.md) to add it to your project.
-### 兼容性
+### 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-theme-switch-animation Releases](https://github.com/react-native-oh-library/react-native-theme-switch-animation/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-theme-switch-animation Releases](https://github.com/react-native-oh-library/react-native-theme-switch-animation/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.
**switchTheme Function Props**
-| Prop | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ----- | -------- | -------- | -------- | -------- |
-| `switchThemeFunction` |Adds the function you use in your app to switch themes, doesn't matter if you use redux/context/zustand/mobx or any other way | () => void | no | All | yes |
-| `animationConfig` | Configuration for the animation -> type, duration, starting point | AnimationConfig | no | All | yes |
+| Prop | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------- | -------- | -------- | ----------------- |
+| `switchThemeFunction` | Adds the function you use in your app to switch themes, doesn't matter if you use redux/context/zustand/mobx or any other way | () => void | no | All | yes |
+| `animationConfig` | Configuration for the animation -> type, duration, starting point | AnimationConfig | no | All | yes |
**animationConfig options**
-| Prop | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ----- | -------- | -------- | -------- | -------- |
-| `type` | Specifies animation type | fade circular inverted-circular | no | All | yes |
-| `duration` | Specifies duration in milliseconds | number | no | All | yes |
-| `startingPoint` | Configuration for the circular animation, where does the animation start in the screen | StartingPointConfig | no | All | yes |
+| Prop | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | -------------------------------------------------------------------------------------- | ------------------------------- | -------- | -------- | ----------------- |
+| `type` | Specifies animation type | fade circular inverted-circular | no | All | yes |
+| `duration` | Specifies duration in milliseconds | number | no | All | yes |
+| `startingPoint` | Configuration for the circular animation, where does the animation start in the screen | StartingPointConfig | no | All | yes |
**startingPoint options**
-| Prop | Description | Type | Required | Platform | HarmonyOS Support |
-| ----- | ----- | -------- | -------- | -------- | -------- |
-| `cx` | Specifies starting x point for circular and inverted-circular animation (should not exceed your screen width) |number| no | All | yes |
-| `cy` | Specifies starting y point for circular and inverted-circular animation (should not exceed your screen height) |number| no | All | yes |
-| `cxRatio` | Specifies starting percentage of x point for circular and inverted-circular animation (should be number between -1 and 1) |number| no | All | yes |
-| `cyRatio` | Specifies starting percentage of y point for circular and inverted-circular animation (should be number between -1 and 1) |number| no | All | yes |
+| Prop | Description | Type | Required | Platform | HarmonyOS Support |
+| --------- | ------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- |
+| `cx` | Specifies starting x point for circular and inverted-circular animation (should not exceed your screen width) | number | no | All | yes |
+| `cy` | Specifies starting y point for circular and inverted-circular animation (should not exceed your screen height) | number | no | All | yes |
+| `cxRatio` | Specifies starting percentage of x point for circular and inverted-circular animation (should be number between -1 and 1) | number | no | All | yes |
+| `cyRatio` | Specifies starting percentage of y point for circular and inverted-circular animation (should be number between -1 and 1) | number | no | All | yes |
+
+## Known Issues
-## 遗留问题
+- [ ] circular 动画效果动画开始前有一个闪屏的问题，后续需要提供在图片上剪裁出一个圆形，透过圆形可以看到下方节点的接口或方法。[issue#6](https://github.com/react-native-oh-library/react-native-theme-switch-animation/issues/6)
-- [ ] circular动画效果动画开始前有一个闪屏的问题，后续需要提供在图片上剪裁出一个圆形，透过圆形可以看到下方节点的接口或方法。[issue#6](https://github.com/react-native-oh-library/react-native-theme-switch-animation/issues/6)
+## Others
-## 其他
+## License
-## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/WadhahEssam/react-native-theme-switch-animation/blob/main/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/WadhahEssam/react-native-theme-switch-animation/blob/main/LICENSE).
diff --git a/en/react-native-tts.md b/en/react-native-tts.md
index 2295efcb5ecf53c218a8271093b8a71807596745..1153ea642a59b3be63171fe1b03f48305b7fbd60 100644
--- a/en/react-native-tts.md
+++ b/en/react-native-tts.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-tts
@@ -13,16 +13,15 @@
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-tts)
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-tts)
+## 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-tts Releases](https://github.com/react-native-oh-library/react-native-tts/releases).
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-tts Releases](https://github.com/react-native-oh-library/react-native-tts/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,29 +39,29 @@ yarn add @react-native-oh-tpl/react-native-tts@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 {useState, useCallback} from 'react';
-import {Text, View, StyleSheet, SafeAreaView} from 'react-native';
-import Tts from 'react-native-tts';
+import { useState, useCallback } from "react";
+import { Text, View, StyleSheet, SafeAreaView } from "react-native";
+import Tts from "react-native-tts";
const cnText = `炎炎夏日，阳光如烈火般炙烤大地，空气中弥漫着热浪的气息。树荫下，蝉鸣声如同热浪中跳跃的音符，微风吹过，带来一丝清凉。远处的田野上，金黄的麦浪随风起伏，仿佛在舞动着夏天的节奏。天空湛蓝如洗，白云悠然飘过，似是一幅宁静而美丽的夏日画卷。`;
export function TTSDemo() {
- const [speakText, setSpeakText] = useState(cnText);
+ const [speakText, setSpeakText] = useState < string > cnText;
const addEvent = useCallback(() => {
- Tts.addEventListener('tts-start', res => {
- console.log('tts-start', res);
+ Tts.addEventListener("tts-start", (res) => {
+ console.log("tts-start", res);
});
}, []);
const removeEvent = useCallback(() => {
- Tts.addEventListener('tts-start', res => {
- console.log('tts-start', res);
+ Tts.addEventListener("tts-start", (res) => {
+ console.log("tts-start", res);
});
}, []);
@@ -76,7 +75,7 @@ export function TTSDemo() {
const getInitStatus = useCallback(() => {
Tts.getInitStatus().then(() => {
- console.log('初始化已完成');
+ console.log("initialization completed");
});
}, []);
@@ -97,7 +96,7 @@ export function TTSDemo() {
}, []);
const queryVoices = useCallback(() => {
- Tts.voices().then(res => {
+ Tts.voices().then((res) => {
const resTr = JSON.stringify(res);
setSpeakText(resTr);
});
@@ -106,7 +105,7 @@ export function TTSDemo() {
return (
<>
- react-native-tts功能验证
+ react-native-tts functional verification
@@ -152,14 +151,14 @@ const styles = StyleSheet.create({
},
content: {
flex: 1,
- display: 'flex',
+ display: "flex",
},
btnWrap: {
- width: 'auto',
- backgroundColor: 'gray',
- display: 'flex',
- flexDirection: 'row',
- flexWrap: 'wrap',
+ width: "auto",
+ backgroundColor: "gray",
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
paddingLeft: 20,
},
text: {
@@ -169,30 +168,29 @@ const styles = StyleSheet.create({
title: {
padding: 10,
fontSize: 30,
- textAlign: 'center',
+ textAlign: "center",
},
button: {
paddingVertical: 6,
paddingHorizontal: 12,
- backgroundColor: 'hsl(193, 95%, 68%)',
+ backgroundColor: "hsl(193, 95%, 68%)",
borderWidth: 2,
- borderColor: 'hsl(193, 95%, 30%)',
+ borderColor: "hsl(193, 95%, 30%)",
},
});
-
```
-## 使用 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](/en/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
{
@@ -203,18 +201,15 @@ const styles = StyleSheet.create({
}
```
-### 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": {
@@ -223,22 +218,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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNTTSPackage
+### 3. Introducing RNTTSPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -253,66 +248,66 @@ 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-tts Releases](https://github.com/react-native-oh-library/react-native-tts/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-tts Releases](https://github.com/react-native-oh-library/react-native-tts/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 | Required | Platform | HarmonyOS Support |
| --------------------- | ----------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| getInitStatus | Returns a promise that resolves when the TTS engine is initialized. | Function | no | All | yes |
-| requestInstallEngine | Requests installation of the TTS engine if not already installed. | Function | no | Android | no |
-| requestInstallData | Requests installation of the TTS data if not already installed. | Function | no | Android | no |
-| setDucking | Sets whether the TTS engine should duck other audio when speaking. | Function | no | All | no |
-| setDefaultEngine | Sets the default TTS engine. | Function | no | Android | no |
-| setDefaultVoice | Sets the default voice for the TTS engine. | Function | no | All | no |
-| setDefaultRate | Sets the default speech rate for the TTS engine. | Function | no | All | yes |
-| setDefaultPitch | Sets the default pitch for the TTS engine. | Function | no | All | yes |
-| setDefaultLanguage | Sets the default language for the TTS engine. | Function | no | All | no |
-| setIgnoreSilentSwitch | Sets whether to ignore the silent button. | Function | no | iOS |no|
-| voices | Retrieves a list of available voices from the TTS engine. | Function | no | All | yes |
-| engines | Retrieves a list of available TTS engines. | Function | no | Android | no |
-| speak | Speaks the given utterance and returns a promise with the utterance ID. | Function | no | All | yes |
-| stop | Stops the current TTS utterance. | Function | no | All | yes |
-| pause | Pause the current TTS utterance. | Function | no | All | yes |
-| resume | Resume the current TTS utterance. | Function | no | All | yes |
-| addEventListener | Adding an Event Listener | Function | no | All | yes |
-| removeEventListener | Remove Event Listener | Function | no | All | yes |
-
-## 遗留问题
+| getInitStatus | Returns a promise that resolves when the TTS engine is initialized. | Function | no | All | yes |
+| requestInstallEngine | Requests installation of the TTS engine if not already installed. | Function | no | Android | no |
+| requestInstallData | Requests installation of the TTS data if not already installed. | Function | no | Android | no |
+| setDucking | Sets whether the TTS engine should duck other audio when speaking. | Function | no | All | no |
+| setDefaultEngine | Sets the default TTS engine. | Function | no | Android | no |
+| setDefaultVoice | Sets the default voice for the TTS engine. | Function | no | All | no |
+| setDefaultRate | Sets the default speech rate for the TTS engine. | Function | no | All | yes |
+| setDefaultPitch | Sets the default pitch for the TTS engine. | Function | no | All | yes |
+| setDefaultLanguage | Sets the default language for the TTS engine. | Function | no | All | no |
+| setIgnoreSilentSwitch | Sets whether to ignore the silent button. | Function | no | iOS | no |
+| voices | Retrieves a list of available voices from the TTS engine. | Function | no | All | yes |
+| engines | Retrieves a list of available TTS engines. | Function | no | Android | no |
+| speak | Speaks the given utterance and returns a promise with the utterance ID. | Function | no | All | yes |
+| stop | Stops the current TTS utterance. | Function | no | All | yes |
+| pause | Pause the current TTS utterance. | Function | no | All | yes |
+| resume | Resume the current TTS utterance. | Function | no | All | yes |
+| addEventListener | Adding an Event Listener | Function | no | All | yes |
+| removeEventListener | Remove Event Listener | Function | no | All | yes |
+
+## Known Issues
- [ ] 三方引擎相关功能无法实现的问题：[issue#2](https://github.com/react-native-oh-library/react-native-tts/issues/2)
- [ ] 语言类型只支持中文的问题：[issue#3](https://github.com/react-native-oh-library/react-native-tts/issues/3)
-- [ ] setDucking无法实现的问题：[issue#4](https://github.com/react-native-oh-library/react-native-tts/issues/4)
-- [ ] setIgnoreSilentSwitch无法实现的问题：[issue#5](https://github.com/react-native-oh-library/react-native-tts/issues/5)
-- [ ] setDefaultVoice无法实现的问题：[issue#6](https://github.com/react-native-oh-library/react-native-tts/issues/6)
+- [ ] setDucking 无法实现的问题：[issue#4](https://github.com/react-native-oh-library/react-native-tts/issues/4)
+- [ ] setIgnoreSilentSwitch 无法实现的问题：[issue#5](https://github.com/react-native-oh-library/react-native-tts/issues/5)
+- [ ] setDefaultVoice 无法实现的问题：[issue#6](https://github.com/react-native-oh-library/react-native-tts/issues/6)
- [ ] 边合成边播放的问题：[issue#7](https://github.com/react-native-oh-library/react-native-tts/issues/7)
-- [ ] 参数skipTransform、onWordBoundary无效的问题：[issue#8](https://github.com/react-native-oh-library/react-native-tts/issues/8)
+- [ ] 参数 skipTransform、onWordBoundary 无效的问题：[issue#8](https://github.com/react-native-oh-library/react-native-tts/issues/8)
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/ak1394/react-native-tts/blob/master/README.md#license)，请自由地享受和参与开源。
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://github.com/ak1394/react-native-tts/blob/master/README.md#license).
diff --git a/en/react-native-typography.md b/en/react-native-typography.md
index 3e710d97e5d41519e755a111edcaaa5801aa96cb..df15fa856cec7705bb427a10b65f7946348c201c 100644
--- a/en/react-native-typography.md
+++ b/en/react-native-typography.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-typography
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-typography)
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-typography)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/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-typography Releases](https://github.com/react-native-oh-library/react-native-typography/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-typography@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, Text } from "react-native";
@@ -58,19 +58,19 @@ export function TypographyExample1() {
}
```
-## 约束与限制
+## 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-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/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 | Required | Platform | HarmonyOS Support |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- |
@@ -87,15 +87,15 @@ export function TypographyExample1() {
| systemDenseWeights | systemWeights`s Dense scripts | object | no | All | yes |
| systemTallWeights | systemWeights`s Tall scripts | object | no | All | yes |
| sanFranciscoWeights | San Francisco typeface | object | no | iOS | yes |
-| robotoWeights | These weights are **only intended for Android**, as they directly reference the native Roboto typeface. | object | no | Android | yes |
+| robotoWeights | These weights are **only intended for Android**, as they directly reference the native Roboto typeface. | object | no | Android | yes |
| webWeights | These weights are **only intended for the web**, and render [react-native-web](https://github.com/necolas/react-native-web)'s system font stack. | object | no | Web | yes |
| iOSColors | Colors iOS | object | no | iOS | yes |
| materialColors | Colors Material | object | no | All | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/hectahertz/react-native-typography/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/hectahertz/react-native-typography/blob/master/LICENSE).
diff --git a/en/react-native-udp.md b/en/react-native-udp.md
index ade3443c8fec4e3298d0df5e8f3769cd073d0eeb..40afe8c64062cd13638634c6748b75c28a1a7968 100644
--- a/en/react-native-udp.md
+++ b/en/react-native-udp.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-udp
@@ -13,16 +13,15 @@
+> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-udp)
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-udp)
+## 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-udp Releases](https://github.com/react-native-oh-library/react-native-udp/releases).
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-udp Releases](https://github.com/react-native-oh-library/react-native-udp/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 (#).
#### **npm**
@@ -36,15 +35,15 @@ npm install @react-native-oh-tpl/react-native-udp@file:#
yarn add @react-native-oh-tpl/react-native-udp@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 {ScrollView, StyleSheet, Text, View} from 'react-native';
+import React, { Component } from "react";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
-import dgram from 'react-native-udp';
+import dgram from "react-native-udp";
function randomPort() {
return (Math.random() * 60536) | (0 + 5000); // 60536-65536
@@ -64,7 +63,7 @@ class App extends Component {
super(props);
this.updateChatter = this.updateChatter.bind(this);
- this.state = {chatter: []};
+ this.state = { chatter: [] };
}
updateChatter(msg) {
@@ -76,45 +75,45 @@ class App extends Component {
componentDidMount() {
let self = this;
- let a = dgram.createSocket('udp4');
+ let a = dgram.createSocket("udp4");
let aPort = randomPort();
- a.bind(aPort, function(err) {
+ a.bind(aPort, function (err) {
if (err) throw err;
- self.updateChatter('a bound to ' + JSON.stringify(a.address()));
+ self.updateChatter("a bound to " + JSON.stringify(a.address()));
});
- let b = dgram.createSocket('udp4');
+ let b = dgram.createSocket("udp4");
var bPort = randomPort();
- b.bind(bPort, function(err) {
+ b.bind(bPort, function (err) {
if (err) throw err;
- self.updateChatter('b bound to ' + JSON.stringify(b.address()));
+ self.updateChatter("b bound to " + JSON.stringify(b.address()));
});
- a.on('message', function(data, rinfo) {
+ a.on("message", function (data, rinfo) {
var str = String.fromCharCode.apply(null, new Uint8Array(data));
self.updateChatter(
- 'a received echo ' + str + ' ' + JSON.stringify(rinfo),
+ "a received echo " + str + " " + JSON.stringify(rinfo)
);
a.close();
b.close();
});
- b.on('message', function(data, rinfo) {
+ b.on("message", function (data, rinfo) {
var str = String.fromCharCode.apply(null, new Uint8Array(data));
- self.updateChatter('b received ' + str + ' ' + JSON.stringify(rinfo));
+ self.updateChatter("b received " + str + " " + JSON.stringify(rinfo));
// echo back
- b.send(data, 0, data.length, aPort, '127.0.0.1', function(err) {
+ b.send(data, 0, data.length, aPort, "127.0.0.1", function (err) {
if (err) throw err;
- self.updateChatter('b echoed data');
+ self.updateChatter("b echoed data");
});
});
- b.once('listening', function() {
- var msg = toByteArray('hello');
- a.send(msg, 0, msg.length, bPort, '127.0.0.1', function(err) {
+ b.once("listening", function () {
+ var msg = toByteArray("hello");
+ a.send(msg, 0, msg.length, bPort, "127.0.0.1", function (err) {
if (err) throw err;
- self.updateChatter('a sent data');
+ self.updateChatter("a sent data");
});
});
}
@@ -139,18 +138,18 @@ class App extends Component {
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#F5FCFF",
},
welcome: {
fontSize: 20,
- textAlign: 'center',
+ textAlign: "center",
margin: 10,
},
instructions: {
- textAlign: 'center',
- color: '#333333',
+ textAlign: "center",
+ color: "#333333",
marginBottom: 5,
},
});
@@ -158,17 +157,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](/en/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
{
@@ -179,18 +178,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": {
@@ -199,24 +195,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
```
-方法二：直接链接源码
-
-> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
+Method 2: Directly link to the source code.
+> [!TIP] or details, see [Directly Linking Source Code](/en/link-source-code.md).
+### 3. Introducing RNUdpPackage to ArkTS
-### 3.在 ArkTs 侧引入 RNUdpPackage
-
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -231,53 +225,47 @@ 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
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-udp Releases](https://github.com/react-native-oh-library/react-native-udp/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-udp Releases](https://github.com/react-native-oh-library/react-native-udp/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 |
-| -------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- |
-| createSocket | Creates a Socket object. | Function | false | Android/iOS | yes |
-| bind | For UDP sockets, causes the `UdpSocket` to listen for datagram messages on a named `port`. | Function | false | Android/iOS | yes |
-| send | Broadcasts a datagram on the socket. | Function | false | Android/iOS | yes |
-| address | Returns an object containing the address information for a socket. | Function | false | Android/iOS | yes |
-| setBroadcast | Sets or clears the `SO_BROADCAST` socket option. | Function | false | Android/iOS | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- |
+| createSocket | Creates a Socket object. | Function | false | Android/iOS | yes |
+| bind | For UDP sockets, causes the `UdpSocket` to listen for datagram messages on a named `port`. | Function | false | Android/iOS | yes |
+| send | Broadcasts a datagram on the socket. | Function | false | Android/iOS | yes |
+| address | Returns an object containing the address information for a socket. | Function | false | Android/iOS | yes |
+| setBroadcast | Sets or clears the `SO_BROADCAST` socket option. | Function | false | Android/iOS | yes |
| addMembership | Tells the kernel to join a multicast group at the given `multicastAddress` and `multicastInterface` using the `IP_ADD_MEMBERSHIP` socket option. | Function | false | Android/iOS | yes |
-| dropMembership | Instructs the kernel to leave a multicast group at `multicastAddress` using the `IP_DROP_MEMBERSHIP` socket option. | Function | false | Android/iOS | yes |
-
-
-
-
+| dropMembership | Instructs the kernel to leave a multicast group at `multicastAddress` using the `IP_DROP_MEMBERSHIP` socket option. | Function | false | Android/iOS | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/tradle/react-native-udp/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/tradle/react-native-udp/blob/master/LICENSE).
diff --git a/en/react-native-version-number.md b/en/react-native-version-number.md
index 9dbad354540f758fc2cde6960093594a910c80e0..ee5a7a97d4df63002aa86472fda12844ef13bb84 100644
--- a/en/react-native-version-number.md
+++ b/en/react-native-version-number.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-native-version-number
@@ -14,15 +14,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-version-number)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-version-number)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-version-number Releases](https://github.com/react-native-oh-library/react-native-version-number/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-version-number Releases](https://github.com/react-native-oh-library/react-native-version-number/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,9 +40,9 @@ yarn add @react-native-oh-tpl/react-native-version-number@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 { Text, View } from "react-native";
@@ -59,17 +59,17 @@ export default function () {
}
```
-## 使用 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](/en/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
{
@@ -80,18 +80,15 @@ export default function () {
}
```
-### 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": {
@@ -101,22 +98,22 @@ export default function () {
}
```
-点击右上角的 `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](/en/link-source-code.md).
-### 3.在 ArkTs 侧引入 RNVersionNumberPackage
+### 3. Introducing RNVersionNumberPackage to ArkTS
-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
@@ -130,32 +127,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-version-number Releases](https://github.com/react-native-oh-library/react-native-version-number/releases)
+Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-version-number Releases](https://github.com/react-native-oh-library/react-native-version-number/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 |
| ---------------- | ------------ | ------ | -------- | -------- | ----------------- |
@@ -163,10 +160,10 @@ ohpm install
| buildVersion | 构建版本 | string | yes | all | yes |
| bundleIdentifier | 应用标识符 | string | yes | all | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/APSL/react-native-version-number/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/APSL/react-native-version-number/blob/master/LICENSE).
diff --git a/en/react-native-voice-voice.md b/en/react-native-voice-voice.md
index b1159d29e299f298dd0d19124d558c06b4c55ea1..7b3ed1f87641888248bd79c8a19153da4adf6cfa 100644
--- a/en/react-native-voice-voice.md
+++ b/en/react-native-voice-voice.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
@react-native-voice/voice
@@ -12,15 +12,15 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/voice)
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/voice)
-## 安装与使用
+## Installation and Usage
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/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/voice Releases](https://github.com/react-native-oh-library/voice/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,338 +38,345 @@ yarn add @react-native-oh-tpl/voice@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 React, { Component } from "react";
import {
- StyleSheet,
- Text,
- View,
- Image,
- TouchableHighlight,
- ScrollView,
- Button,
-} from 'react-native';
+ StyleSheet,
+ Text,
+ View,
+ Image,
+ TouchableHighlight,
+ ScrollView,
+ Button,
+} from "react-native";
import Voice, {
- SpeechRecognizedEvent,
- SpeechResultsEvent,
- SpeechErrorEvent,
-} from '@react-native-voice/voice';
+ SpeechRecognizedEvent,
+ SpeechResultsEvent,
+ SpeechErrorEvent,
+} from "@react-native-voice/voice";
type Props = {};
type State = {
- recognized: string;
- error: string;
- end: string;
- started: string;
- results: string[];
- partialResults: string[];
- isAvailable: number;
- isRecognizing: number;
+ recognized: string,
+ error: string,
+ end: string,
+ started: string,
+ results: string[],
+ partialResults: string[],
+ isAvailable: number,
+ isRecognizing: number,
};
class VoiceTest extends Component {
- state = {
- recognized: '',
- error: '',
- end: '',
- started: '',
- results: [],
- partialResults: [],
- isAvailable: 0,
- isRecognizing: 0,
- };
-
- constructor(props: Props) {
- super(props);
- Voice.onSpeechStart = this.onSpeechStart;
- Voice.onSpeechRecognized = this.onSpeechRecognized;
- Voice.onSpeechEnd = this.onSpeechEnd;
- Voice.onSpeechError = this.onSpeechError;
- Voice.onSpeechResults = this.onSpeechResults;
- Voice.onSpeechPartialResults = this.onSpeechPartialResults;
- }
-
- componentWillUnmount() {
- Voice.destroy().then(Voice.removeAllListeners);
- }
-
- onSpeechStart = (e: any) => {
- console.log('onSpeechStart: ', e);
- this.setState({
- started: '√',
- });
- };
-
- onSpeechRecognized = (e: SpeechRecognizedEvent) => {
- console.log('onSpeechRecognized: ', e);
- this.setState({
- recognized: '√',
- });
- };
-
- onSpeechEnd = (e: any) => {
- console.log('onSpeechEnd: ', e);
- this.setState({
- end: '√',
- });
- };
+ state = {
+ recognized: "",
+ error: "",
+ end: "",
+ started: "",
+ results: [],
+ partialResults: [],
+ isAvailable: 0,
+ isRecognizing: 0,
+ };
+
+ constructor(props: Props) {
+ super(props);
+ Voice.onSpeechStart = this.onSpeechStart;
+ Voice.onSpeechRecognized = this.onSpeechRecognized;
+ Voice.onSpeechEnd = this.onSpeechEnd;
+ Voice.onSpeechError = this.onSpeechError;
+ Voice.onSpeechResults = this.onSpeechResults;
+ Voice.onSpeechPartialResults = this.onSpeechPartialResults;
+ }
- onSpeechError = (e: SpeechErrorEvent) => {
- console.log('onSpeechError: ', e);
- this.setState({
- error: JSON.stringify(e.error),
- });
- };
+ componentWillUnmount() {
+ Voice.destroy().then(Voice.removeAllListeners);
+ }
- onSpeechResults = (e: SpeechResultsEvent) => {
- console.log('onSpeechResults: ', e);
- this.setState({
- results: e.value,
- });
- };
+ onSpeechStart = (e: any) => {
+ console.log("onSpeechStart: ", e);
+ this.setState({
+ started: "√",
+ });
+ };
+
+ onSpeechRecognized = (e: SpeechRecognizedEvent) => {
+ console.log("onSpeechRecognized: ", e);
+ this.setState({
+ recognized: "√",
+ });
+ };
+
+ onSpeechEnd = (e: any) => {
+ console.log("onSpeechEnd: ", e);
+ this.setState({
+ end: "√",
+ });
+ };
+
+ onSpeechError = (e: SpeechErrorEvent) => {
+ console.log("onSpeechError: ", e);
+ this.setState({
+ error: JSON.stringify(e.error),
+ });
+ };
+
+ onSpeechResults = (e: SpeechResultsEvent) => {
+ console.log("onSpeechResults: ", e);
+ this.setState({
+ results: e.value,
+ });
+ };
+
+ onSpeechPartialResults = (e: SpeechResultsEvent) => {
+ console.log("onSpeechPartialResults: ", e);
+ this.setState({
+ partialResults: e.value,
+ });
+ };
+
+ _startRecognizing = async () => {
+ this.setState({
+ recognized: "",
+ error: "",
+ started: "",
+ results: [],
+ partialResults: [],
+ end: "",
+ });
+
+ try {
+ await Voice.start("en-US");
+ } catch (e) {
+ console.error(e);
+ }
+ };
- onSpeechPartialResults = (e: SpeechResultsEvent) => {
- console.log('onSpeechPartialResults: ', e);
- this.setState({
- partialResults: e.value,
- });
- };
+ _stopRecognizing = async () => {
+ try {
+ await Voice.stop();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ _cancelRecognizing = async () => {
+ try {
+ await Voice.cancel();
+ Voice.start;
+ } catch (e) {
+ console.error(e);
+ }
+ };
- _startRecognizing = async () => {
+ _destroyRecognizer = async () => {
+ try {
+ await Voice.destroy();
+ } catch (e) {
+ console.error(e);
+ }
+ this.setState({
+ recognized: "",
+ error: "",
+ started: "",
+ results: [],
+ partialResults: [],
+ end: "",
+ });
+ };
+
+ _isAvailable = async () => {
+ try {
+ Voice.isAvailable().then((available: 0 | 1) => {
this.setState({
- recognized: '',
- error: '',
- started: '',
- results: [],
- partialResults: [],
- end: '',
+ isAvailable: available ? 1 : 0,
});
+ });
+ } catch (e) {
+ console.error(e);
+ this.setState({
+ isAvailable: 0,
+ });
+ }
+ };
- try {
- await Voice.start('en-US');
- } catch (e) {
- console.error(e);
- }
- };
-
- _stopRecognizing = async () => {
- try {
- await Voice.stop();
- } catch (e) {
- console.error(e);
- }
- };
-
- _cancelRecognizing = async () => {
- try {
- await Voice.cancel();
- Voice.start;
- } catch (e) {
- console.error(e);
- }
- };
-
- _destroyRecognizer = async () => {
- try {
- await Voice.destroy();
- } catch (e) {
- console.error(e);
- }
+ _isRecognizing = async () => {
+ try {
+ Voice.isRecognizing().then((isRecognizing: 0 | 1) => {
this.setState({
- recognized: '',
- error: '',
- started: '',
- results: [],
- partialResults: [],
- end: '',
+ isRecognizing: isRecognizing ? 1 : 0,
});
- };
-
- _isAvailable = async () => {
- try {
- Voice.isAvailable().then((available: 0 | 1) => {
- this.setState({
- isAvailable: available ? 1 : 0,
- });
- });
- } catch (e) {
- console.error(e);
- this.setState({
- isAvailable: 0,
- });
- }
- };
-
- _isRecognizing = async () => {
- try {
- Voice.isRecognizing().then((isRecognizing: 0 | 1) => {
- this.setState({
- isRecognizing: isRecognizing ? 1 : 0,
- });
- });
- } 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}`}
-
-
-
-
-
-
-
-
- {
- this._cancelRecognizing();
- }}>
-
-
-
- {
- this._destroyRecognizer();
- }}>
-
-
- );
+ });
+ } 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}`}
+
+
+
+
+
+
+
+
+ {
+ this._cancelRecognizing();
+ }}
+ >
+
+
+
+ {
+ this._destroyRecognizer();
+ }}
+ >
+
+
+ );
+ }
}
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](/en/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](/en/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)
+> For details, see [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 de3b7d1a6fc0dcf2967982c79b6398f78a406752..eaad6250d31d20ab4b35176a1f1a4eec3e283f52 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,50 @@ 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;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-### 属性
-[!TIP]"Platform"列表示该属性在原三方库上支持的平台。
-
-[!TIP]"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；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
+### Properties
+
+[!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.。
+
+[!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
+
+| 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 |
+
+## 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 5202d3046383c239ea5cc1ed97b6107adcc6dcc2..93c280cc717f883d60d5bd0a539ce83556bcd869 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,9 +34,9 @@ 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)进行引入。
+> [!TIP] 本示例依赖 react-native-gesture-handler 库，参照[@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md)进行引入。
```js
import * as React from 'react';
@@ -199,73 +199,71 @@ const styles = StyleSheet.create({
});
```
-## Link
-本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。
+## Link
-如未引入请参照[@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)进行引入
+The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
-## 约束与限制
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md) to add it to your project.
-### 兼容性
+## 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-header-buttons.md b/en/react-navigation-header-buttons.md
index 131c8f0069d4116007037dae2a3cc25243287eec..35e2c06a826ae665232b1e3ac70cd5a81d3354aa 100644
--- a/en/react-navigation-header-buttons.md
+++ b/en/react-navigation-header-buttons.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
react-navigation-header-buttons
@@ -13,12 +13,13 @@
-> [!TIP] [Github 地址](https://github.com/vonovak/react-navigation-header-buttons)
+> [!TIP] [GitHub address](https://github.com/vonovak/react-navigation-header-buttons)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+
+Go to the project directory and execute the following instruction:
#### **npm**
@@ -32,8 +33,8 @@ npm i react-navigation-header-buttons@12.0.0
yarn add react-navigation-header-buttons@12.0.0
```
+在 tsconfig.json 文件中添加如下代码:
-在tsconfig.json文件中添加如下代码:
```json
"compilerOptions": {
...
@@ -46,7 +47,9 @@ yarn add react-navigation-header-buttons@12.0.0
}
```
-在metro.config.js文件中添加如下代码:
+
+在 metro.config.js 文件中添加如下代码:
+
```js
const config = {
...
@@ -63,13 +66,13 @@ module.exports = mergeConfig(
-下面的代码展示了这个库的基本使用场景：
+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 MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import * as React from "react";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import {
HeaderButtons,
Item,
@@ -80,41 +83,41 @@ import {
HiddenItemProps,
HeaderButtonProps,
HeaderButton,
-} from 'react-navigation-header-buttons';
-import { Text } from 'react-native';
+} from "react-navigation-header-buttons";
+import { Text } from "react-native";
const MaterialHeaderButton = (props: HeaderButtonProps) => (
) => {
+const EditItem = ({ onPress }: Pick) => {
return ) => (
+const ReusableHiddenItem = ({ onPress }: Pick) => (
- alert('search')}
+ onPress={() => alert("search")}
/>
-
alert('Edit')} />
+ alert("Edit")} />
(
alert('hidden1')} />
+ alert("hidden1")} />
alert('hidden2')} />
+ alert("hidden2")} />
),
@@ -125,102 +128,90 @@ export function UsageWithIcons({ navigation }) {
}
```
-## 约束与限制
+## Constraints
-### 兼容性
+### Compatibility
-本文档内容基于以下版本验证通过：
+This document is verified based on the following versions:
1. RNOH: 0.72.26; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.300SP2; ROM:3.0.0.24(Canary3);
2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## Properties
### HeaderButtons
-> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
-
-> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-
-
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| HeaderButtonComponent | component that renders the buttons, HeaderButton by default |`ComponentType`| no | iOS/Android | yes |
-| children | whatever you want to render inside |`ReactNode`| yes | iOS/Android | yes |
-| left | whether the HeaderButtons are on the left from header title |boolean| no | iOS/Android | yes |
-| preset | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. |`’tabHeader’/‘stackHeader’`| no | iOS/Android | 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 |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ----------- | ----------------- |
+| HeaderButtonComponent | component that renders the buttons, HeaderButton by default | `ComponentType` | no | iOS/Android | yes |
+| children | whatever you want to render inside | `ReactNode` | yes | iOS/Android | yes |
+| left | whether the HeaderButtons are on the left from header title | boolean | no | iOS/Android | yes |
+| preset | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. | `’tabHeader’/‘stackHeader’` | no | iOS/Android | yes |
### Item
-> [!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 |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| title | title for the button, required |string| no | iOS/Android | yes |
-| onPress | function to call on press |function| no | iOS/Android | yes |
-| iconName | icon name, used together with the IconComponent prop |string| no | iOS/Android | yes |
-| style | style to apply to the touchable element that wraps the button |` ViewStyle`| no | iOS/Android | yes |
-| buttonStyle | style to apply to the text / icon |` ViewStyle`| no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------------------------------------------------- | ------------ | -------- | ----------- | ----------------- |
+| title | title for the button, required | string | no | iOS/Android | yes |
+| onPress | function to call on press | function | no | iOS/Android | yes |
+| iconName | icon name, used together with the IconComponent prop | string | no | iOS/Android | yes |
+| style | style to apply to the touchable element that wraps the button | ` ViewStyle` | no | iOS/Android | yes |
+| buttonStyle | style to apply to the text / icon | ` ViewStyle` | no | iOS/Android | yes |
### OverflowMenu
-> [!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 |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| OverflowIcon | React element or component for the overflow icon |` ReactElement / ComponentType`| no | iOS/Android | yes |
-| style | optional styles for overflow button|`ViewStyle`| no | iOS/Android | yes |
-| onPress | function that is called when overflow menu is pressed. |function| no | iOS/Android | yes |
-| left | whether the OverflowMenu is on the left from header title |boolean| no | iOS/Android | yes |
-| children | the overflow items|`ReactNode`| yes | iOS/Android | yes |
-| preset | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. |` 'tabHeader' / 'stackHeader'`| no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | ----------- | ----------------- |
+| OverflowIcon | React element or component for the overflow icon | ` ReactElement / ComponentType` | no | iOS/Android | yes |
+| style | optional styles for overflow button | `ViewStyle` | no | iOS/Android | yes |
+| onPress | function that is called when overflow menu is pressed. | function | no | iOS/Android | yes |
+| left | whether the OverflowMenu is on the left from header title | boolean | no | iOS/Android | yes |
+| children | the overflow items | `ReactNode` | yes | iOS/Android | yes |
+| preset | headers are typically rendered in Stack Navigator, however, you can also render them in a Tab Navigator header. Pass 'tabHeader' if button margins are missing. | ` 'tabHeader' / 'stackHeader'` | no | iOS/Android | yes |
### HiddenItem
-> [!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 |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| title |title for the button, required |string| no | iOS/Android | yes |
-| style | style to apply to the touchable element that wraps the text|`ViewStyle`| no | iOS/Android | yes |
-| titleStyle | style to apply to the text |`TextStyle`| no | iOS/Android | yes |
-| onPress |function to call on press |function| no | iOS/Android | yes |
-| disabled | disabled 'item' is greyed out and onPress is not called on touch |boolean| no | iOS/Android | yes |
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ---------------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- |
+| title | title for the button, required | string | no | iOS/Android | yes |
+| style | style to apply to the touchable element that wraps the text | `ViewStyle` | no | iOS/Android | yes |
+| titleStyle | style to apply to the text | `TextStyle` | no | iOS/Android | yes |
+| onPress | function to call on press | function | no | iOS/Android | yes |
+| disabled | disabled 'item' is greyed out and onPress is not called on touch | boolean | no | iOS/Android | yes |
### HeaderButton
-> [!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 |
+| ------------ | ---------------------------------------------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- |
+| title | title for the button, required | string | no | iOS/Android | yes |
+| style | style to apply to the touchable element that wraps the text | `ViewStyle` | no | iOS/Android | yes |
+| onPress | function to call on press | function | no | iOS/Android | yes |
+| renderButton | You can fully customize what it renders inside of the PlatformPressable using the renderButton | ReactNode | no | iOS/Android | yes |
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-| title |title for the button, required |string| no | iOS/Android | yes |
-| style | style to apply to the touchable element that wraps the text|`ViewStyle`| no | iOS/Android | yes |
-| onPress |function to call on press |function| no | iOS/Android | yes |
-| renderButton |You can fully customize what it renders inside of the PlatformPressable using the renderButton |ReactNode | no | iOS/Android | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/vonovak/react-navigation-header-buttons/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/vonovak/react-navigation-header-buttons/blob/master/LICENSE).
diff --git a/en/react-navigation.md b/en/react-navigation.md
index 8a30e65ea1f8242f2f687b55973373e6bf4e6f6f..6e08d8bb0863eb7bdbe45d6fb44bf1b1e2582830 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 | - | [链接](/en/react-navigation-bottom-tabs.md) |
+| 2 | [@react-navigation/core](https://github.com/react-navigation/react-navigation/tree/6.x/packages/core) | 6.4.16 | - | [链接](/en/react-navigation-core.md) |
+| 3 | [@react-navigation/devtools](https://github.com/react-navigation/react-navigation/tree/6.x/packages/devtools) | 6.0.26 | - | [链接](/en/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) | [链接](/en/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) | [链接](/en/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 | - | [链接](/en/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 | - | [链接](/en/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) | [链接](/en/react-navigation-native-stack.md) |
+| 9 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.17 | - | [链接](/en/react-navigation-native.md) |
+| 10 | [@react-navigation/routers](https://github.com/react-navigation/react-navigation/tree/6.x/packages/routers) | 6.1.9 | - | [链接](/en/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) | [链接](/en/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) | [链接](/en/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 | - | [链接](/en/flipper-plugin-react-navigation.md) |
## 依赖关系
+## 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 4dbccfc6d8b03f9c419408e3f6b897363562d497..922551c8e2d277085163d56248382caebb3db654 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,54 +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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
## 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( { | no | all | yes |
-| measureFunction | Allows you to wrap any synchronous function, measure its performance and write results to the output file | async function measureFunction( { | 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( { | no | all | yes |
+| measureFunction | Allows you to wrap any synchronous function, measure its performance and write results to the output file | async function measureFunction( { | 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**
@@ -187,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 1067d4c4b03464ed594dafa8ca627d65af46ecc0..30650c21356fc4bf0b85b87230abb4b1eb09e17e 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](/en/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)
+For details, see [rn-emoji-keyboard docs](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).
diff --git a/en/rn-sliding-up-panel.md b/en/rn-sliding-up-panel.md
index e20cb43855f0c47930a078015c3bfbbab60c58dc..d7e3a6fa66d4150eb36d31dafa08fe14e4dc8089 100644
--- a/en/rn-sliding-up-panel.md
+++ b/en/rn-sliding-up-panel.md
@@ -1,4 +1,4 @@
-> 模板版本：v0.2.2
+> Template version: v0.2.2
rn-sliding-up-panel
@@ -12,11 +12,11 @@
-> [!TIP] [Github 地址](https://github.com/octopitus/rn-sliding-up-panel)
+> [!TIP] [ GitHub address](https://github.com/octopitus/rn-sliding-up-panel)
-## 安装与使用
+## Installation and Usage
-进入到工程目录并输入以下命令：
+Go to the project directory and execute the following instruction:
@@ -34,9 +34,9 @@ yarn add rn-sliding-up-panel@2.4.6
-下面的代码展示了这个库的基本使用场景：
+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, { createRef } from 'react';
@@ -171,59 +171,59 @@ 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;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+2. RNOH: 0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
-## 属性
+## 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.
### Props
-| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
-| --- | --- | --- | --- | --- | --- | --- |
-| animatedValue | An **Animated.Value** number between the top and bottom of draggable range. This number represents the position of the panel. If you update this prop, the panel will correspondingly update to the frame at that progress value. Default to **Animated.Value(0)** (Hidden at bottom of screen). | Animated.Value | 0 | No | All | yes |
-| draggableRange | Boundary limits for draggable area. `top` default to visible height of device, `bottom` default to 0. | {top: number, bottom: number} | 0 | No | All | yes |
-| snappingPoints | Must be an incremental array of number and all values must be within the `top` & `bottom` of draggableRange. | number[] | null | No | All | yes |
-| minimumVelocityThreshold | Velocity threshold in **pixel/s** to trigger the fling animation after you release finger. Default is 0.1. | number | 0.1 | No | All | yes |
-| minimumDistanceThreshold | Distance threshold in **pixel** (virtual, not physical) to trigger the fling animation after you release finger. Default is 0.24. | number | 0.24 | No | All | yes |
-| height | Height of panel. Typically this should equal to the top value of `draggablerange.` | number | null | No | All | yes |
-| friction | Determines how quickly the fling animation settles down and stops. The higher the value, the faster the velocity decreases. Default is 0.998. | number | 0.998 | No | All | yes |
-| backdropOpacity | Opacity of the backdrop when the panel is active. Default is 0.75. | number | 0.75 | No | All | yes |
-| containerStyle | Custom style for the container. | Style | null | No | All | yes |
-| backdropStyle | Custom style for the backdrop. | Style | null | No | All | yes |
-| showBackdrop | Controls the visibility of backdrop. Default `true`. | boolean | true | No | All | yes |
-| allowMomentum | If `false`, panel will not continue to move when you release your finger. | boolean | null | No | All | yes |
-| allowDragging | Default `true`. Setting this to `false` to disable dragging. | boolean | true | No | All | yes |
-| avoidKeyboard | If `true` every time animated value changes keyboard will be dismissed. Default `true`. | boolean | true | No | All | yes |
-| onBackButtonPress | By default when you press back button (Android) the panel will be closed (Move to `bottom` position of `draggableRange`). Implement this function if you want to custom the behavior. Returning `true` means the event has been handled. | () => boolean | null | No | All | yes |
-| onDragStart | Called when the panel is about to start dragging. | (position: number, gestureState: GestureState) => void | null | No | All | yes |
-| onDragEnd | Called when you release your finger. | (position: number: gestureState: GestureState) => void | null | No | All | yes |
-| onMomentumDragStart | Called when the momentum drag starts. Works exactly the same way of [ScrollView#onMomentumScrollBegin](https://facebook.github.io/react-native/docs/scrollview#onmomentumscrollbegin). | (position: number) => void | null | No | All | yes |
-| onMomentumDragEnd | Called when the momentum drag ends. Works exactly the same way of [ScrollView#onMomentumScrollEnd](https://facebook.github.io/react-native/docs/scrollview#onmomentumscrollend). | (position: number) => void | null | No | All | yes |
-| onBottomReached | Called when the panel is hidden / reaches the bottom of the screen. | () => void | null | No | All | yes |
-| children | Accepts passing a function as component. Invoked with `dragHandlers` (that can be passed into another View like this ``) when the panel is mounted. Useful when you want only a part of your content becomes the drag handler. | React.Element \| Function | null | No | All | yes |
+| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | ------- | -------- | -------- | ----------------- |
+| animatedValue | An **Animated.Value** number between the top and bottom of draggable range. This number represents the position of the panel. If you update this prop, the panel will correspondingly update to the frame at that progress value. Default to **Animated.Value(0)** (Hidden at bottom of screen). | Animated.Value | 0 | No | All | yes |
+| draggableRange | Boundary limits for draggable area. `top` default to visible height of device, `bottom` default to 0. | {top: number, bottom: number} | 0 | No | All | yes |
+| snappingPoints | Must be an incremental array of number and all values must be within the `top` & `bottom` of draggableRange. | number[] | null | No | All | yes |
+| minimumVelocityThreshold | Velocity threshold in **pixel/s** to trigger the fling animation after you release finger. Default is 0.1. | number | 0.1 | No | All | yes |
+| minimumDistanceThreshold | Distance threshold in **pixel** (virtual, not physical) to trigger the fling animation after you release finger. Default is 0.24. | number | 0.24 | No | All | yes |
+| height | Height of panel. Typically this should equal to the top value of `draggablerange.` | number | null | No | All | yes |
+| friction | Determines how quickly the fling animation settles down and stops. The higher the value, the faster the velocity decreases. Default is 0.998. | number | 0.998 | No | All | yes |
+| backdropOpacity | Opacity of the backdrop when the panel is active. Default is 0.75. | number | 0.75 | No | All | yes |
+| containerStyle | Custom style for the container. | Style | null | No | All | yes |
+| backdropStyle | Custom style for the backdrop. | Style | null | No | All | yes |
+| showBackdrop | Controls the visibility of backdrop. Default `true`. | boolean | true | No | All | yes |
+| allowMomentum | If `false`, panel will not continue to move when you release your finger. | boolean | null | No | All | yes |
+| allowDragging | Default `true`. Setting this to `false` to disable dragging. | boolean | true | No | All | yes |
+| avoidKeyboard | If `true` every time animated value changes keyboard will be dismissed. Default `true`. | boolean | true | No | All | yes |
+| onBackButtonPress | By default when you press back button (Android) the panel will be closed (Move to `bottom` position of `draggableRange`). Implement this function if you want to custom the behavior. Returning `true` means the event has been handled. | () => boolean | null | No | All | yes |
+| onDragStart | Called when the panel is about to start dragging. | (position: number, gestureState: GestureState) => void | null | No | All | yes |
+| onDragEnd | Called when you release your finger. | (position: number: gestureState: GestureState) => void | null | No | All | yes |
+| onMomentumDragStart | Called when the momentum drag starts. Works exactly the same way of [ScrollView#onMomentumScrollBegin](https://facebook.github.io/react-native/docs/scrollview#onmomentumscrollbegin). | (position: number) => void | null | No | All | yes |
+| onMomentumDragEnd | Called when the momentum drag ends. Works exactly the same way of [ScrollView#onMomentumScrollEnd](https://facebook.github.io/react-native/docs/scrollview#onmomentumscrollend). | (position: number) => void | null | No | All | yes |
+| onBottomReached | Called when the panel is hidden / reaches the bottom of the screen. | () => void | null | No | All | yes |
+| children | Accepts passing a function as component. Invoked with `dragHandlers` (that can be passed into another View like this ``) when the panel is mounted. Useful when you want only a part of your content becomes the drag handler. | React.Element \| Function | null | No | All | yes |
### Methods
-| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
-| --- | --- | --- | --- | --- | --- | --- |
-| show | Calling `show()` without any parameter will showmove the panel to top position (of draggableRange). | Function(value?: number \| Object) | null | No | All | yes |
-| hide | Move the panel to the bottom position of draggable range. Note: This method is triggered if you touch the backdrop (If it's visible). | Function | null | No | All | yes |
-| scrollIntoView | Typically you don't need to use this method, But if an element is stuck under the keyboard or out of view, you can use this ensure it is visible within the viewable area. | Function(node: number) | null | No | All | yes |
+| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------- | -------- | -------- | ----------------- |
+| show | Calling `show()` without any parameter will showmove the panel to top position (of draggableRange). | Function(value?: number \| Object) | null | No | All | yes |
+| hide | Move the panel to the bottom position of draggable range. Note: This method is triggered if you touch the backdrop (If it's visible). | Function | null | No | All | yes |
+| scrollIntoView | Typically you don't need to use this method, But if an element is stuck under the keyboard or out of view, you can use this ensure it is visible within the viewable area. | Function(node: number) | null | No | All | yes |
-## 遗留问题
+## Known Issues
-## 其他
+## Others
-## 开源协议
+## License
-本项目基于 [The MIT License (MIT)](https://github.com/octopitus/rn-sliding-up-panel/blob/master/LICENSE) ，请自由地享受和参与开源。
+This project is licensed under [The MIT License (MIT)](https://github.com/octopitus/rn-sliding-up-panel/blob/master/LICENSE).