diff --git a/en/Parse-SDK-JS.md b/en/Parse-SDK-JS.md index f9840c42b42ce6f44dadd600665bb360d5ccb853..8d4d5d6eb7ab89561c684a8dee6cc5762461fe09 100644 --- a/en/Parse-SDK-JS.md +++ b/en/Parse-SDK-JS.md @@ -16,9 +16,9 @@ ## Installation and Usage -> [!TIP] 需要配套的服务和三方依赖 +> [!TIP] It requires supporting services and third-party dependencies -Parse JS SDK 兼容以下版本的 Parse Server,Parse Server 服务端搭建可参考[https://github.com/parse-community/parse-server/blob/alpha/README.md](https://github.com/parse-community/parse-server/blob/alpha/README.md)。 +The Parse JS SDK is compatible with the following versions of Parse Server. For the setup of the Parse Server server, please refer to[https://github.com/parse-community/parse-server/blob/alpha/README.md](https://github.com/parse-community/parse-server/blob/alpha/README.md)。 | Parse JS SDK | Parse Server | | :--------------: | :--------------: | @@ -27,6 +27,12 @@ Parse JS SDK 兼容以下版本的 Parse Server,Parse Server 服务端搭建 > [!TIP] This library depends on[@react-native-oh-tpl/async-storage](/zh-cn/react-native-async-storage-async-storage.md)、[@react-native-oh-tpl/react-native-get-random-values](/zh-cn/react-native-get-random-values.md) +Please go to the Releases release address of the third-party library to view the supporting version information: @react-native-ohos/pull-to-refresh Releases. + +|Version |Support RN version| +| --------|---------- | +| 5.3.0 | 0.72/0.77 | + Go to the project directory and execute the following instruction: @@ -209,116 +215,117 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/async- This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API -不同版本对应的 API 也不同,详情请查看[Parse-SDK-JS 官方文档](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/index.html)。 +The apis corresponding to different versions are also different. For details, please refer to the official documentation of [Parse-SDK-JS](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/index.html)。 > [!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. -**Parse**: Parse 是 Parse-SDK-JS 的核心对象,包含所有 Parse API 类和函数。 +**Parse**: Parse is the core object of Parse-SDK-JS, containing all Parse API classes and functions. | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------- | -------- | ----------- | ----------------- | -| initialize | 初始化 Parse SDK,设置应用程序的 ID 和密钥。通常在应用程序的入口处调用。 | (applicationId: string, javaScriptKey?: string, masterKey?: string) => void | yes | iOS/Android | yes | -| setAsyncStorage | 设置 Parse SDK 使用的 AsyncStorage 实例,用于存储会话令牌等信息。 | (storage:AsyncStorage) => void | yes | iOS/Android | yes | +| initialize | Initialize the Parse SDK and set the ID and key of the application. It is usually called at the entrance of the application. | (applicationId: string, javaScriptKey?: string, masterKey?: string) => void | yes | iOS/Android | yes | +| setAsyncStorage | Set the AsyncStorage instance used by the Parse SDK to store session tokens and other information. | (storage:AsyncStorage) => void | yes | iOS/Android | yes | -**Parse.ACL**: 访问权限对象。 +**Parse.ACL**: Access permission object. | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | ---------------------------------------------- | ------------------------------------------ | -------- | ----------- | ----------------- | -| setPublicReadAccess | 设置是否允许公共(未认证用户)读取对象。 | (allowed: boolean) => void | no | iOS/Android | yes | -| setPublicWriteAccess | 设置是否允许公共(未认证用户)写入对象。 | (allowed: boolean) => void | no | iOS/Android | yes | -| getPublicReadAccess | 获取是否允许公共(未认证用户)读取对象。 | () => boolean | no | iOS/Android | yes | -| getPublicWriteAccess | 获取是否允许公共(未认证用户)写入对象的权限。 | () => boolean | no | iOS/Android | yes | -| setReadAccess | 设置特定用户是否有读取对象的权限。 | (userId: string, allowed: boolean) => void | no | iOS/Android | yes | -| setWriteAccess | 设置特定用户是否有写入对象的权限。 | (userId: string, allowed: boolean) => void | no | iOS/Android | yes | -| getReadAccess | 获取特定用户是否有读取对象的权限。 | (userId: string) => boolean | no | iOS/Android | yes | -| getWriteAccess | 获取特定用户是否有写入对象的权限。 | (userId: string) => boolean | no | iOS/Android | yes | +| setPublicReadAccess | Set whether to allow public (unauthenticated users) to read the object. | (allowed: boolean) => void | no | iOS/Android | yes | +| setPublicWriteAccess | Set whether to allow public (unauthenticated users) to write to the object. | (allowed: boolean) => void | no | iOS/Android | yes | +| getPublicReadAccess | Obtain whether public (unauthenticated users) are allowed to read the object. | () => boolean | no | iOS/Android | yes | +| getPublicWriteAccess | Obtain the permission to allow public (unauthenticated users) to write to the object. | () => boolean | no | iOS/Android | yes | +| setReadAccess | Set whether a specific user has the permission to read objects. | (userId: string, allowed: boolean) => void | no | iOS/Android | yes | +| setWriteAccess | Set whether a specific user has the permission to write objects. | (userId: string, allowed: boolean) => void | no | iOS/Android | yes | +| getReadAccess | Obtain whether a specific user has the permission to read objects. | (userId: string) => boolean | no | iOS/Android | yes | +| getWriteAccess | Obtain whether a specific user has the permission to write objects. | (userId: string) => boolean | no | iOS/Android | yes | -**Parse.Object**: 通常情况下,您不会直接调用此方法。建议您使用 Parse.Object 的子类,通过调用 `extend` 方法创建子类对象。 +**Parse.Object**: Under normal circumstances, you won't call this method directly. It is recommended that you use a subclass of Parse.Object and create a subclass object by calling the 'extend' method。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | ----------- | ----------------- | -| set | 设置数据对象的属性值,其中 `key` 是属性名,`value` 是对应的属性值。 | (key: string\|object, value: string\|object, options: object) => ParseObject | no | iOS/Android | yes | -| get | 获取数据对象的指定属性值,通过 `key` 指定属性名。 | (attr: string) => any | no | iOS/Android | yes | -| unset | 移除数据对象的指定属性值,通过 `key` 指定属性名。 | (attr: string) => ParseObject | no | iOS/Android | yes | -| increment | 增加指定属性的数值类型值,`amount` 是增加的数量。 | (attr: String, amount: Number) => ParseObject | no | iOS/Android | yes | -| add | 添加一个值到数组类型的属性中,`value` 是要添加的值。 | (attr: string, item) => ParseObject | no | iOS/Android | yes | -| remove | 从数组类型的属性中移除一个值,`value` 是要移除的值。 | (attr: string, item) => ParseObject | no | iOS/Android | yes | -| save | 将数据对象保存到 Parse 服务器上,如果对象不存在则创建,存在则更新。 | () => Promise | no | iOS/Android | yes | -| fetch | 从 Parse 服务器上获取最新的数据对象信息。 | (options: object) => Promise | no | iOS/Android | yes | -| destroy | 从 Parse 服务器上删除当前数据对象。 | (options: object) => Promise | no | iOS/Android | yes | -| fetchWithInclude | 在获取对象时,包含在查询中指定的关联对象。 | (keys: string\|Array>, options: object) => Promise | no | iOS/Android | yes | -| saveAll | 批量保存一组数据对象到 Parse 服务器。 | (list: Array, options: object) => Array. | no | iOS/Android | yes | -| destroyAll | 批量删除一组数据对象。 | (list: Array, options: object) => Promise | no | iOS/Android | yes | - -**Parse.Query**: Parse.Query 定义了一个用于获取 Parse.Object 的查询。 +| set | Set the attribute values of the data object, where 'key' is the attribute name and 'value' is the corresponding attribute value. | (key: string\|object, value: string\|object, options: object) => ParseObject | no | iOS/Android | yes | +| get | Obtain the specified attribute value of the data object and specify the attribute name through the 'key'. | (attr: string) => any | no | iOS/Android | yes | +| unset | Remove the specified attribute value of the data object and specify the attribute name through the 'key'. | (attr: string) => ParseObject | no | iOS/Android | yes | +| increment | Increase the numeric type value of the specified attribute. 'amount' is the increased quantity. | (attr: String, amount: Number) => ParseObject | no | iOS/Android | yes | +| add | Add a value to an array type property. 'value' is the value to be added. | (attr: string, item) => ParseObject | no | iOS/Android | yes | +| remove | Remove a value from an array type property. 'value' is the value to be removed. | (attr: string, item) => ParseObject | no | iOS/Android | yes | +| save | Save the data object to the Parse server. If the object does not exist, create it; if it exists, update it. | () => Promise | no | iOS/Android | yes | +| fetch | Obtain the latest data object information from the Parse server. | (options: object) => Promise | no | iOS/Android | yes | +| destroy | Delete the current data object from the Parse server. | (options: object) => Promise | no | iOS/Android | yes | +| fetchWithInclude | When obtaining an object, include the associated object specified in the query. | (keys: string\|Array>, options: object) => Promise | no | iOS/Android | yes | +| saveAll | Batch save a group of data objects to the Parse server. | (list: Array, options: object) => Array. | no | iOS/Android | yes | +| destroyAll | Batch delete a group of data objects. | (list: Array, options: object) => Promise | no | iOS/Android | yes | + +**Parse.Query**: Parse.Query defines a query used to obtain Parse.Object. | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | -| equalTo | 添加一个相等条件,查询字段 `key` 的值等于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| notEqualTo | 添加一个不等条件,查询字段 `key` 的值不等于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| lessThan | 添加一个小于条件,查询字段 `key` 的值小于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| greaterThan | 添加一个大于条件,查询字段 `key` 的值大于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| lessThanOrEqualTo | 添加一个小于或等于条件,查询字段 `key` 的值小于或等于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| greaterThanOrEqualTo | 添加一个大于或等于条件,查询字段 `key` 的值大于或等于 `value`。 | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| containedIn | 添加一个包含于条件,查询字段 `key` 的值包含在 `values` 数组中。 | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| notContainedIn | 添加一个不包含于条件,查询字段 `key` 的值不包含在 `values` 数组中。 | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| exists | 添加一个存在条件,查询字段 `key` 的值存在(非 `null` 或 `undefined`)。 | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| doesNotExist | 添加一个不存在条件,查询字段 `key` 的值不存在(为 `null` 或 `undefined`)。 | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| containsAll | 添加一个包含所有条件,查询字段 `key` 的值必须包含 `values` 数组中的所有元素。 | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| startsWith | 添加一个以指定前缀开始的条件,查询字段 `key` 的值必须以 `prefix` 字符串开头。 | (key: string, prefix: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| endsWith | 添加一个以指定后缀结束的条件,查询字段 `key` 的值必须以 `suffix` 字符串结尾。 | (key: string, suffix: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| near | 添加一个接近条件,查询地理位置字段 `key` 的值接近于指定的地理坐标点 `point`。 | (key: string, point: Parse.GeoPoint) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| withinRadians | 添加一个在指定弧度内的条件,查询地理位置字段 `key` 的值在以 `point` 为中心、半径为 `maxDistance` 的圆形范围内。 | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| withinMiles | 添加一个在指定英里内的条件,查询地理位置字段 `key` 的值在以 `point` 为中心、半径为 `maxDistance` 英里的圆形范围内。 | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| withinKilometers | 添加一个在指定公里内的条件,查询地理位置字段 `key` 的值在以 `point` 为中心、半径为 `maxDistance` 公里的圆形范围内。 | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| withinGeoBox | 添加一个在指定矩形区域内的条件,查询地理位置字段 `key` 的值必须在由 `southwest` 和 `northeast` 定义的矩形内。 | (key: string, southwest: Parse.GeoPoint, northeast: Parse.GeoPoint) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| include | 添加一个包含关联对象条件 | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| select | 仅返回查询结果中指定字段的信息。 | (keys: string[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| limit | 限制返回结果的数量。 | (count: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| skip | 跳过指定数量的查询结果。 | (count: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| ascending | 按照指定字段升序排序查询结果。 | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| descending | 按照指定字段降序排序查询结果。 | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| find | 按照指定字段降序排序查询结果。 | (options?: Parse.Query.FindOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| first | 执行查询并返回符合条件的第一个对象。 | (options?: Parse.Query.FindOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | -| count | 计算符合条件的对象的数量。 | (options?: Parse.Query.CountOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | - -**Parse.Role**: 表示 Parse 服务器上的角色对象。 +| equalTo | Add an equality condition to make the value of the query field 'key' equal to 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| notEqualTo | Add an unequal condition, and the value of the query field 'key' is not equal to 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| lessThan | Add a less than condition, and the value of the query field 'key' is less than 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| greaterThan | Add a greater than condition to query that the value of the field 'key' is greater than that of 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| lessThanOrEqualTo | Add a less than or equal to condition, and the value of the query field 'key' is less than or equal to 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| greaterThanOrEqualTo | Add a greater than or equal to condition, and the value of the query field 'key' is greater than or equal to 'value'. | (key: string, value: any) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| containedIn | Add a condition that includes the value of the query field 'key' in the 'values' array. | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| notContainedIn | Add a condition that does not include the value of the query field 'key' in the 'values' array. | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| exists | Add a existence condition that the value of the query field 'key' exists (not 'null' or 'undefined'). | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| doesNotExist | Add a non-existence condition where the value of the query field 'key' does not exist (either 'null' or 'undefined'). | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| containsAll | Add a query field 'key' that contains all conditions. The value of the query field 'key' must include all elements in the 'values' array. | (key: string, value: any[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| startsWith | Add a condition starting with the specified prefix. The value of the query field 'key' must start with the 'prefix' string. | (key: string, prefix: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| endsWith | Add a condition that ends with the specified suffix. The value of the query field 'key' must end with the 'suffix' string. | (key: string, suffix: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| near | Add a proximity condition to query that the value of the geographical location field 'key' is close to the specified geographical coordinate point 'point'. | (key: string, point: Parse.GeoPoint) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| withinRadians | Add a condition within the specified arc to query that the value of the geographical location field 'key' is within the circular range centered on 'point' with a radius of 'maxDistance'. | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| withinMiles | Add a condition within the specified mile to query that the value of the geographical location field 'key' is within a circular range centered on 'point' with a radius of 'maxDistance' miles. | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| withinKilometers | Add a condition within the specified kilometers to query that the value of the geographical location field 'key' is within a circular range centered on 'point' with a radius of 'maxDistance' kilometers. | (key: string, point: Parse.GeoPoint, maxDistance: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| withinGeoBox | Add a condition within the specified rectangular area to query that the value of the geographical location field 'key' must be within the rectangle defined by 'southwest' and 'northeast'. | (key: string, southwest: Parse.GeoPoint, northeast: Parse.GeoPoint) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| include | Add a condition containing the associated object | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| select | Only return the information of the specified fields in the query results. | (keys: string[]) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| limit | Limit the number of returned results. | (count: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| skip | Skip the specified number of query results. | (count: number) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| ascending | Sort the query results in ascending order according to the specified fields. | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| descending | Sort the query results in descending order according to the specified fields. | (key: string) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| find | Sort the query results in descending order according to the specified fields. | (options?: Parse.Query.FindOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| first | Execute the query and return the first object that meets the conditions. | (options?: Parse.Query.FindOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | +| count | Calculate the number of objects that meet the conditions. | (options?: Parse.Query.CountOptions) => [Parse.Query](https://parseplatform.org/Parse-SDK-JS/api/5.3.0/Parse.Query.html) | no | iOS/Android | yes | + +**Parse.Role**: Represents the role object on the Parse server. | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------------- | --------------------------------------------- | -------- | ----------- | ----------------- | -| getName | 获取角色的名称。 | () => String | no | iOS/Android | yes | -| getUsers | 获取分配给角色的用户列表。 | () => Array | no | iOS/Android | yes | -| getRoles | 获取分配给角色的子角色列表。 | () => Array | no | iOS/Android | yes | -| getRolesByName | 根据角色名称获取角色对象列表。 | (Array) => Promise> | no | iOS/Android | yes | -| save | 将角色对象保存到 Parse 服务器。 | (obj: Object) => Promise> | no | iOS/Android | yes | -| destroy | 从 Parse 服务器上删除角色对象。 | (obj: Object) => Promise> | no | iOS/Android | yes | +| getName | Get the name of the character. | () => String | no | iOS/Android | yes | +| getUsers | Obtain the list of users assigned to the role. | () => Array | no | iOS/Android | yes | +| getRoles | Get the list of sub-roles assigned to the role. | () => Array | no | iOS/Android | yes | +| getRolesByName | Obtain the list of role objects based on the role name. | (Array) => Promise> | no | iOS/Android | yes | +| save | Save the role object to the Parse server. | (obj: Object) => Promise> | no | iOS/Android | yes | +| destroy | Delete the role object from the Parse server. | (obj: Object) => Promise> | no | iOS/Android | yes | -**Parse.User**: 表示 Parse 服务器上的用户对象,可进行注册、登录、登出等操作。 +**Parse.User**: It represents the user object on the Parse server and can perform operations such as registration, login, and logout. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------- | --------------------------------------------------------- | ------------------------------------------------------------ | -------- | ----------- | ----------------- | -| signUp | 注册新用户到 Parse 服务器。 | ({username: string, password: string, email: string}) => Promise | no | iOS/Android | yes | -| logIn | 登录用户。 | (username: string, password: string) => Promise | no | iOS/Android | yes | -| current | 获取当前已登录的用户对象,如果没有用户登录则返回 `null`。 | () => Parse.User | no | iOS/Android | yes | -| logOut | 登出当前用户。 | () => Promise | no | iOS/Android | yes | -| become | 通过会话令牌 sessionToken 来认证用户。 | (sessionToken: string) => Promise | no | iOS/Android | yes | -| save | 将用户对象保存到 Parse 服务器。 | (user: Object) => Promise | no | iOS/Android | yes | -| destroy | 从 Parse 服务器上删除用户对象。 | (user: Object) => Promise | no | iOS/Android | yes | +| signUp | Register a new user to the Parse server. | ({username: string, password: string, email: string}) => Promise | no | iOS/Android | yes | +| logIn | Logged-in user. | (username: string, password: string) => Promise | no | iOS/Android | yes | +| current | Get the currently logged-in user object. If no user is logged in, return 'null'. | () => Parse.User | no | iOS/Android | yes | +| logOut | Log out of the current user. | () => Promise | no | iOS/Android | yes | +| become | Authenticate users through session tokens. | (sessionToken: string) => Promise | no | iOS/Android | yes | +| save | Save the user object to the Parse server. | (user: Object) => Promise | no | iOS/Android | yes | +| destroy | Delete the user object from the Parse server. | (user: Object) => Promise | no | iOS/Android | yes | -**Parse.Cloud**: 可以通过 Cloud API 执行自定义的云代码。以下是支持的主要 Cloud API 及其相关信息: +**Parse.Cloud**: Custom Cloud code can be executed through the Cloud API. The following are the main supported Cloud apis and their related information: | Name | Description | Type | Required | Platform | HarmonyOS Support | | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | -| run | 调用指定名称的云函数并获取其返回值。`functionName` 是云函数的名称,`data` 是传递给云函数的参数对象,`options` 是一个可选的配置对象,用于设置云函数调用的详细选项,如超时等。 | (functionName: string, data?: object, options?: Parse.Cloud.HttpOptions) => Promise | no | iOS/Android | yes | -| afterSave | 注册一个在保存对象后触发的云函数。`className` 是对象的类名,`func` 是一个异步函数或返回 void 的函数,接收一个 `Parse.Cloud.AfterSaveRequest` 对象作为参数,可以在保存对象后执行自定义逻辑。 | (className: string, func: (request: Parse.Cloud.AfterSaveRequest) => Promise\|void) => void | no | iOS/Android | yes | -| beforeSave | 注册一个在保存对象之前触发的云函数。`className` 是对象的类名,`func` 是一个异步函数或返回 void 的函数,接收一个 `Parse.Cloud.BeforeSaveRequest` 对象作为参数,可以在保存对象前执行自定义逻辑。 | (className: string, func: (request: Parse.Cloud.BeforeSaveRequest) => Promise\|void) => void | no | iOS/Android | yes | -| afterDelete | 注册一个在删除对象后触发的云函数。`className` 是对象的类名,`func` 是一个异步函数或返回 void 的函数,接收一个 `Parse.Cloud.AfterDeleteRequest` 对象作为参数,可以在删除对象后执行自定义逻辑。 | (className: string, func: (request: Parse.Cloud.AfterDeleteRequest) => Promise\|void) => void | no | iOS/Android | yes | -| beforeDelete | 注册一个在删除对象之前触发的云函数。`className` 是对象的类名,`func` 是一个异步函数或返回 void 的函数,接收一个 `Parse.Cloud.BeforeDeleteRequest` 对象作为参数,可以在删除对象前执行自定义逻辑。 | (className: string, func: (request: Parse.Cloud.BeforeDeleteRequest) => Promise\|void) => void | no | iOS/Android | yes | +| run | Call the cloud function with the specified name and obtain its return value. 'functionName' is the name of the cloud function, 'data' is the parameter object passed to the cloud function, and 'options' is an optional configuration object used to set detailed options for cloud function calls, such as timeouts, etc. | (functionName: string, data?: object, options?: Parse.Cloud.HttpOptions) => Promise | no | iOS/Android | yes | +| afterSave | Register a cloud function that is triggered after saving the object. ` className ` is the name of the class of an object, ` func ` is an asynchronous function or return void function, receives a ` Parse. Cloud. AfterSaveRequest ` objects as parameters, can perform custom logic after save objects. | (className: string, func: (request: Parse.Cloud.AfterSaveRequest) => Promise\|void) => void | no | iOS/Android | yes | +| beforeSave | Register a cloud function that is triggered before saving the object. ` className ` is the name of the class of an object, ` func ` is an asynchronous function or return void function, receives a ` Parse. Cloud. BeforeSaveRequest ` objects as parameters, can perform custom logic in front of the object. | (className: string, func: (request: Parse.Cloud.BeforeSaveRequest) => Promise\|void) => void | no | iOS/Android | yes | +| afterDelete | Register a cloud function that is triggered after deleting an object. ` className ` is the name of the class of an object, ` func ` is an asynchronous function or return void function, receives a ` Parse. Cloud. AfterDeleteRequest ` objects as parameters, can perform custom logic after delete the object. | (className: string, func: (request: Parse.Cloud.AfterDeleteRequest) => Promise\|void) => void | no | iOS/Android | yes | +| beforeDelete | Register a cloud function that is triggered before deleting an object. ` className ` is the name of the class of an object, ` func ` is an asynchronous function or return void function, receives a ` Parse. Cloud. BeforeDeleteRequest ` objects as parameters, can perform custom logic before delete the object. | (className: string, func: (request: Parse.Cloud.BeforeDeleteRequest) => Promise\|void) => void | no | iOS/Android | yes | ## Known Issues diff --git a/en/react-native-progress.md b/en/react-native-progress.md index 32849230460d8cce2fb067f1eb8676e5767788bf..514d371b847654c4427dd59a10d084a1d760b64e 100644 --- a/en/react-native-progress.md +++ b/en/react-native-progress.md @@ -4,7 +4,7 @@

react-native-progress

- + Supported platforms @@ -14,9 +14,15 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-progress) +| Version | Package Name | Repository | Release | Support RN version | +| ------- | ------------ | ----------- |----------|--------------------| +| 5.0.1 | @react-native-oh-tpl/react-native-progress |[Github](https://github.com/react-native-oh-library/react-native-progress) | [Github Releases](https://github.com/react-native-oh-library/react-native-progress) | 0.72 | +| 5.1.0 | @react-native-ohos/react-native-progress |[GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-progress) |[GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-audio/releases) | 0.77 | + ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +Please go to the Releases release address of the third-party library to view the supporting version information: [@react-native-ohos/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases). + Go to the project directory and execute the following instruction: @@ -27,13 +33,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-progress + +# V0.77 +npm install @react-native-ohos/react-native-progress ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-progress +# V0.72 +yarn install @react-native-oh-tpl/react-native-progress + +#V0.77 +yarn install @react-native-ohos/react-native-progress ``` @@ -140,7 +154,10 @@ The HarmonyOS implementation of this library depends on the native code from @re 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-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases) +Please go to the Releases release address of the third-party library to view the supporting version information: [@react-native-ohos/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases). + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## Properties diff --git a/en/react-native-sticky-parallax-header.md b/en/react-native-sticky-parallax-header.md index 7ed9cf630d04f609b80e7f02b4297d9d6499f6d6..12e6a604bd7b0e0992ad37f67d1e59d13bab0340 100644 --- a/en/react-native-sticky-parallax-header.md +++ b/en/react-native-sticky-parallax-header.md @@ -12,11 +12,17 @@

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-sticky-parallax-header) +> [!TIP] [GitHub address](https://github.com/netguru/sticky-parallax-header) + +| Version | Package Name | Repository | Release | Support RN version | +| ------- | ------------ | ----------- |----------|--------------------| +| 1.1.1 | @react-native-oh-tpl/react-native-sticky-parallax-header | [Github](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)| [GitHub Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.72 | +| 1.2.0 | @react-native-ohos/react-native-sticky-parallax-header | [Github ](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)|[GitHub Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.77 | + ## 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-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases). +Please go to the Releases address of the third-party library to view the corresponding version information:[@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: @@ -27,13 +33,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-sticky-parallax-header + +#0.77 +npm install @react-native-ohos/react-native-sticky-parallax-header ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-sticky-parallax-header +# 0.72 +yarn install @react-native-oh-tpl/react-native-sticky-parallax-header + +#0.77 +yarn install @react-native-ohos/react-native-sticky-parallax-header ``` @@ -157,7 +171,10 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- 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. -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). +Please go to the Releases address of the third-party library to view the corresponding version information:[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases). + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## Headers diff --git a/en/react-native-text-gradient.md b/en/react-native-text-gradient.md index 1b80fbdd6c9cb01caf91afebf50fe4b9a3aa3c7e..fce166e198b1be644ee774620092a810fa89decc 100644 --- a/en/react-native-text-gradient.md +++ b/en/react-native-text-gradient.md @@ -14,16 +14,16 @@ > [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-text-gradient) +| Version | Package Name | Repository | Release | Support RN version | +| ------- | ------------ | ----------- |----------|--------------------| +| 0.1.7 | @react-native-oh-tpl/react-native-text-gradient |[GitHub ](https://github.com/react-native-oh-library/react-native-text-gradient)| [GitHub Release ](https://github.com/react-native-oh-library/react-native-text-gradient/releases)| 0.72 | +| 0.2.0 | @react-native-ohos/react-native-text-gradient | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-text-gradient) | [GitCode Release](https://gitcode.com/openharmony-sig/rntpc_react-native-text-gradient/releases)| 0.77 | + ## Installation and Usage Please go to the corresponding Release release address of the third-party library to view the version information of the Release package: -| version | Releases info | Support RN version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.1.7-0.0.4 | [@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) | 0.72 | -| 0.2.0 | [@react-native-ohos/react-native-text-gradient Releases]() | 0.77 | - Go to the project directory and execute the following instruction: diff --git a/en/victory-native-xl.md b/en/victory-native-xl.md index 132cddee88a2cd2335b01ecf6ce551413a4e99f4..875469a293b75277767d8c344c4694c68adee5a5 100644 --- a/en/victory-native-xl.md +++ b/en/victory-native-xl.md @@ -15,22 +15,36 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/victory-native-xl) +| Version | Package Name | Repository | Release | Support RN version | +| ------- | ------------ | ----------- |----------|--------------------| +| 41.1.0 | @react-native-oh-tpl/victory-native-xl | [Github](https://github.com/react-native-oh-library/victory-native-xl)| [Github Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) | 0.72 | +| 41.17.5 | @react-native-ohos/victory-native-xl | [Github](https://github.com/react-native-oh-library/victory-native-xl)| [Github Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) | 0.77 | + ## 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/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/en/tgz-usage-en.md)安装tgz包。 +Please go to the Releases address of the third-party library to view the corresponding version information:[@react-native-oh-tpl/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases). + Go to the project directory and execute the following instruction: #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/victory-native-xl + +# V0.77 +npm install @react-native-ohos/victory-native-xl ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/victory-native-xl + +# V0.77 +yarn add @react-native-ohos/victory-native-xl ``` The following code shows the basic use scenario of the repository: @@ -95,7 +109,10 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- 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/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) +Please go to the Releases address of the third-party library to view the corresponding version information:[@react-native-oh-tpl/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases). + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## Properties (If Any) @@ -107,118 +124,129 @@ See details [victory-native-xl](https://github.com/FormidableLabs/victory-native ### Cartesian Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes -| xKey | A string value indicating the key of each data[number] object to be used on the independent (x) axis for charting. E.g. "day" if you want to use the "day" field of the data points for the x-axis | string | yes | all | yes -| yKeys | A string[] array of string indicating the keys of each data[number] object to be used on the dependent (y) axis for charting. E.g. yKeys={["lowTmp", "highTmp"]} if you want to chart both high and low temperatures on the y-axis and those values have keys of lowTmp and highTmp respectively | string[] | yes | all | yes -| children | The children prop is a render function whose sole argument is an object that exposes transformed data for you to use in your drawing operations. For example, the children render function's argument has a points field that exposes a version of your input data that's transformed to be plotted on the Canvas (see the Example section above for an example of this)| function | yes | all | yes -| padding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the Skia canvas and where the charting bounds will occur | number | no | all | yes -| domain | An object of shape { x?: [number] \| [number, number]; y?: [number] \| [number, number] } that can be specified to control the upper and lower bounds of each axis. It defaults to the min and max of each range respectively | object | no | all | yes -| domainPadding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the charting area (e.g. where the axes lie) and where chart elements will be plotted | object | no | all | yes -| axisOptions | The axisOptions is an optional prop allows you to configure the axes and grid of the chart. If it is not present then the chart will not render any axes or grid | object | no | all | yes -| chartPressState | The chartPressState prop allows you to pass in Reanimated SharedValues that will be used to track the user's "press" gesture on the chart. This is generally used for creating some sort of tooltip/active value indicator. See the Chart Gestures page for more in-depth information on how to use this prop | object | no | all | yes -| renderOutside | The renderOutside prop is identical to the children prop in form, but it will render elements at the root of the Skia canvas (not inside of a clipping group). This allows you to render elements outside of the bounds of any axes that you have configured | object | no | all | yes -| onChartBoundsChange | The onChartBoundsChange prop is a function of the shape onChartBoundsChange?: (bounds: ChartBounds) => void; that exposes the chart bounds, useful if you need access to the chart's bounds for your own custom drawing purposes | function | no | all | yes -| gestureLongPressDelay | The gestureLongPressDelay prop allows you to set the delay in milliseconds before the pan gesture is activated. Defaults to 100 | number | no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes | +| xKey | A string value indicating the key of each data[number] object to be used on the independent (x) axis for charting. E.g. "day" if you want to use the "day" field of the data points for the x-axis | string | yes | all | yes | +| yKeys | A string[] array of string indicating the keys of each data[number] object to be used on the dependent (y) axis for charting. E.g. yKeys={["lowTmp", "highTmp"]} if you want to chart both high and low temperatures on the y-axis and those values have keys of lowTmp and highTmp respectively | string[] | yes | all | yes | +| children | The children prop is a render function whose sole argument is an object that exposes transformed data for you to use in your drawing operations. For example, the children render function's argument has a points field that exposes a version of your input data that's transformed to be plotted on the Canvas (see the Example section above for an example of this) | function | yes | all | yes | +| padding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the Skia canvas and where the charting bounds will occur | number | no | all | yes | +| domain | An object of shape { x?: [number] \| [number, number]; y?: [number] \| [number, number] } that can be specified to control the upper and lower bounds of each axis. It defaults to the min and max of each range respectively | object | no | all | yes | +| domainPadding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the charting area (e.g. where the axes lie) and where chart elements will be plotted | object | no | all | yes | +| axisOptions | The axisOptions is an optional prop allows you to configure the axes and grid of the chart. If it is not present then the chart will not render any axes or grid | object | no | all | yes | +| chartPressState | The chartPressState prop allows you to pass in Reanimated SharedValues that will be used to track the user's "press" gesture on the chart. This is generally used for creating some sort of tooltip/active value indicator. See the Chart Gestures page for more in-depth information on how to use this prop | object | no | all | yes | +| renderOutside | The renderOutside prop is identical to the children prop in form, but it will render elements at the root of the Skia canvas (not inside of a clipping group). This allows you to render elements outside of the bounds of any axes that you have configured | object | no | all | yes | +| onChartBoundsChange | The onChartBoundsChange prop is a function of the shape onChartBoundsChange?: (bounds: ChartBounds) => void; that exposes the chart bounds, useful if you need access to the chart's bounds for your own custom drawing purposes | function | no | all | yes | +| gestureLongPressDelay | The gestureLongPressDelay prop allows you to set the delay in milliseconds before the pan gesture is activated. Defaults to 100 | number | no | all | yes | +| viewport41.17.5+ | An object of shape { x?: [number, number]; y?: [number, number] } that controls the visible range of the chart. Unlike domain which sets the absolute bounds of the data, viewport determines what portion of the data is currently visible in the chart window. | object | no | all | yes | +| xAxis41.17.5+ | The xAxis is an optional prop allows you to configure the X axis of the chart. If it is not present then the chart will not render any X axis. | object | no | all | yes | +| yAxis41.17.5+ | The yAxis is an optional prop allows you to configure the Y axes of the chart. If it is not present then the chart will not render any Y-axis. To render multiple Y axes, pass in multiple Y axis objects to the array. | object | no | all | yes | +| frame41.17.5+ | The frame is an optional prop allows you to configure the frame of the chart. If it is not present then the chart will not render any frame. | object | no | all | yes | +| chartPressConfig41.17.5+ | The chartPressConfig prop allows you to configure the pan gesture handler used for chart interactions. | object | no | all | yes | +| transformState41.17.5+ | The transformState prop allows you to pass in a transform state object that enables pan and zoom interactions with the chart. | object | no | all | yes | +| transformConfig41.17.5+ | An optional configuration object for customizing transform behavior when transformState is provided. | object | no | all | yes | +| customGestures41.17.5+ | The customGestures prop allows you to provide custom gesture handlers that will work alongside (or instead of) the default chart press gestures. It accepts a ComposedGesture from react-native-gesture-handler. | object | no | all | yes | +| actionsRef41.17.5+ | The actionsRef prop allows you to get programmatic access to certain chart actions. It accepts a ref object that will be populated with methods to control chart behavior. | object | no | all | yes | +| onScaleChange41.17.5+ | A callback 60function that is called whenever the chart's scales change, either due to data updates or zoom/pan transformations. The function receives two parameters: · xScale: The current x-axis scale (a d3 linear scale) · yScale: The current y-axis scale (a d3 linear scale). | function | no | all | yes | +| gestureHandlerConfig41.17.5+ | The gestureHandlerConfig prop allows you to configure the underlying React Native Gesture Handler instance. This is useful for fine-tuning gesture interactions, such as enabling/disabling context menus or adjusting touch behavior on web platforms. | object | no | web | no | ### Line Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes -| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes -| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected line chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts"| boolean | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| strokeWidth| Set the width of the line | number| no | all | yes -| color| Set the color of the line | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes | +| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes | +| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes | +| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected line chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts" | boolean | no | all | yes | +| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes | +| strokeWidth | Set the width of the line | number | no | all | yes | +| color | Set the color of the line | string | no | all | yes | ### Area Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| y0 | A number that indicates where the "bottom" of the area path should run. This number should be in canvas coordinates | number | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes -| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes -| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected area chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts" | boolean | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| color| Set the color of the area | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes | +| y0 | A number that indicates where the "bottom" of the area path should run. This number should be in canvas coordinates | number | no | all | yes | +| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes | +| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes | +| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected area chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts" | boolean | no | all | yes | +| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes | +| color | Set the color of the area | string | no | all | yes | ### Bar Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes -| innerPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars should be "white space". Defaults to 0.2. Use 0 for no gap between bars, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes -| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of the Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes -| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the chartBounds and number of data points. Takes precendence over the barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes -| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| color| Set the color of the bar| string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes | +| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes | +| innerPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars should be "white space". Defaults to 0.2. Use 0 for no gap between bars, and values closer to 1 to make bars increasingly narrow | number | no | all | yes | +| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes | +| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of the Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes | +| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the chartBounds and number of data points. Takes precendence over the barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes | +| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes | +| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes | +| color | Set the color of the bar | string | no | all | yes | +| labels41.17.5+ | The labels prop allows you to enable and customize the data label of the Bar component. The data label text is the Y-axis value associated with the Bar component. | object | no | all | yes | ### BarGroup Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes -| betweenGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bar groups should be "white space". Defaults to 0.2. Use 0 for no gap between groups, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| withinGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars within a group should be "white space". Defaults to 0.2. Use 0 for no gap between bars within a group, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by a combination of the total available width for the group of bars, the number of bars in the group, and the padding between the bars within the group. Takes precedence over barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes -| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes -| onBarSizeChange | That alerts the consumer when the size of the bars/groups changes, useful for if you're building a custom tooltip and need to know the size of the groups/bars | function | no | all | yes -| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of a BarGroup.Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes -| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes -| color| Set the color of the bar | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes | +| betweenGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bar groups should be "white space". Defaults to 0.2. Use 0 for no gap between groups, and values closer to 1 to make bars increasingly narrow | number | no | all | yes | +| withinGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars within a group should be "white space". Defaults to 0.2. Use 0 for no gap between bars within a group, and values closer to 1 to make bars increasingly narrow | number | no | all | yes | +| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by a combination of the total available width for the group of bars, the number of bars in the group, and the padding between the bars within the group. Takes precedence over barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes | +| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes | +| onBarSizeChange | That alerts the consumer when the size of the bars/groups changes, useful for if you're building a custom tooltip and need to know the size of the groups/bars | function | no | all | yes | +| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of a BarGroup.Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes | +| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes | +| color | Set the color of the bar | string | no | all | yes | ### Scatter Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | TA PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| radius | radius of the circle, half the width of the square | number | no | all | yes -| shape | One of the following ScatterShape values that determines the shape of each point to be drawn | ScatterShape | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes -| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes -| style| set style stroke or fill | string| no | all | yes -| strokeWidth| Set the width of the line | number| no | all | yes -| color| Set the color of the bar| string| no | all | yes +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | ------------ | -------- | -------- | ----------------- | +| points | TA PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes | +| radius | radius of the circle, half the width of the square | number | no | all | yes | +| shape | One of the following ScatterShape values that determines the shape of each point to be drawn | ScatterShape | no | all | yes | +| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes | +| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes | +| style | set style stroke or fill | string | no | all | yes | +| strokeWidth | Set the width of the line | number | no | all | yes | +| color | Set the color of the bar | string | no | all | yes | ### Polar Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes -| labelKey | A string value indicating the key of each data[number] object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart | string | yes | all | yes -| valueKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes -| colorKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes -| children | The only supported children of a PolarChart is currently a Pie.Chart See the Pie Chart for more details | object | no | all | yes -| containerStyle | A StyleProp that styles the View which wraps the Canvas of the Polar chart | object | no | all | yes -| canvasStyle | A StyleProp that styles the Canvas upon which the Polar chart is drawn | object | no | all | yes +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes | +| labelKey | A string value indicating the key of each data[number] object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart | string | yes | all | yes | +| valueKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes | +| colorKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes | +| children | The only supported children of a PolarChart is currently a Pie.Chart See the Pie Chart for more details | object | no | all | yes | +| containerStyle | A StyleProp that styles the View which wraps the Canvas of the Polar chart | object | no | all | yes | +| canvasStyle | A StyleProp that styles the Canvas upon which the Polar chart is drawn | object | no | all | yes | ### Pie.Chart **Bar related props for making Capped Bar chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| innerRadius | A number or string (as a percentage) which turns the Pie chart into a Donut chart. The innerRadius prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a Pie chart | number | no | all | yes -| circleSweepDegrees | A number which defines how many degrees of the chart should be drawn. The default is 360 which will draw a full circle. If you want to draw a partial circle, you can set this prop to a value between 0 and 360 | number | no | all | yes -| startAngle | A number which defines the starting angle of the chart. Changing this prop will rotate the chart | number | no | all | yes -| children | The children prop is a render function which maps through the data and whose sole argument is each individual slice of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a Pie.Slice | function | no | all | yes -| angularStrokeWidth | A number which turns width of the Pie chart slice | number | no | all | yes -| angularStrokeColor | A string which turns color of the Pie chart slice | string | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| innerRadius | A number or string (as a percentage) which turns the Pie chart into a Donut chart. The innerRadius prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a Pie chart | number | no | all | yes | +| circleSweepDegrees | A number which defines how many degrees of the chart should be drawn. The default is 360 which will draw a full circle. If you want to draw a partial circle, you can set this prop to a value between 0 and 360 | number | no | all | yes | +| startAngle | A number which defines the starting angle of the chart. Changing this prop will rotate the chart | number | no | all | yes | +| children | The children prop is a render function which maps through the data and whose sole argument is each individual slice of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a Pie.Slice | function | no | all | yes | +| angularStrokeWidth | A number which turns width of the Pie chart slice | number | no | all | yes | +| angularStrokeColor | A string which turns color of the Pie chart slice | string | no | all | yes | + ## Known Issues ## Others +- V41.17.5 A new attribute, gestureHandlerConfig, has been added. This attribute is only supported on the web end and does not require HarmonyOS. For detailed information, please refer to it: + [Cartesian Chart | Victory Native](https://nearform.com/open-source/victory-native/docs/cartesian/cartesian-chart/) 、 [GestureDetector | React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#userselect-web-only) ## License diff --git a/zh-cn/Parse-SDK-JS.md b/zh-cn/Parse-SDK-JS.md index 26681cac3b49426e0e6971849dafd9c50618340e..15315eed220d1217d6f945a96b00578c02a538f7 100644 --- a/zh-cn/Parse-SDK-JS.md +++ b/zh-cn/Parse-SDK-JS.md @@ -28,6 +28,12 @@ Parse JS SDK 兼容以下版本的 Parse Server,Parse Server服务端搭建可 > [!TIP] 本库依赖[@react-native-oh-tpl/async-storage文档](/zh-cn/react-native-async-storage-async-storage.md) 和 [@react-native-oh-tpl/react-native-get-random-values 文档](/zh-cn/react-native-get-random-values.md) +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 5.3.0 | 0.72/0.77 | + 进入到工程目录并输入以下命令: @@ -211,7 +217,7 @@ export default ParseExample; 本文档内容基于以下版本验证通过: 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; - +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API diff --git a/zh-cn/react-native-progress.md b/zh-cn/react-native-progress.md index 3019d118a6f18880b74c94fabddab24de722bfea..48d6dc6cf0226f2876b781ac338ff29c0a1f3ad2 100644 --- a/zh-cn/react-native-progress.md +++ b/zh-cn/react-native-progress.md @@ -4,7 +4,7 @@

react-native-progress

- + Supported platforms @@ -14,9 +14,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-progress) +| 三方库版本 | 包 名 | 仓库地址 | 发布信息 | 支持RN版本 | +| -------- | -------- | --------- |---------|----------| +| 5.0.1 | @react-native-oh-tpl/react-native-progress |[Github](https://github.com/react-native-oh-library/react-native-progress) | [Github Releases](https://github.com/react-native-oh-library/react-native-progress/releases) | 0.72 | +| 5.1.0 | @react-native-ohos/react-native-progress |[GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-progress) |[GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-progress/releases) | 0.77 | + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases)。 + + 进入到工程目录并输入以下命令: @@ -25,13 +32,21 @@ #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-progress + +# V0.77 +npm install @react-native-ohos/react-native-progress ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-progress +# V0.72 +yarn install @react-native-oh-tpl/react-native-progress + +# V0.77 +yarn install @react-native-ohos/react-native-progress ``` @@ -140,6 +155,10 @@ const styles = StyleSheet.create({ 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases) +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; + + ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -148,18 +167,18 @@ const styles = StyleSheet.create({ 详情见[react-native-progress](https://github.com/oblador/react-native-progress?tab=readme-ov-file#properties-for-all-progress-components) -### Properties for all progress components: +### 属性,用于所有进度组件: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------ | ---------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | -| animated | Whether or not to animate changes to `progress`. | boolean | No | All | Yes | -| indeterminate | If set to true, the indicator will spin and `progress` prop will be ignored. | boolean | No | All | Yes | -| indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | number | No | All | Yes | -| progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | number | No | All | Yes | -| color | Fill color of the indicator. | string | No | All | Yes | -| unfilledColor | Color of the remaining progress. | string | No | All | Yes | -| borderWidth | Width of outer border, set to `0` to remove. | number | No | All | Yes | -| borderColor | Color of outer border. | string | No | All | Yes | +| animated | 是否为“进度”添加动画。 | boolean | No | All | Yes | +| indeterminate | 如果设置为true,则指示器将旋转并且“progress”将被忽略。 | boolean | No | All | Yes | +| indeterminateAnimationDuration | 当设置indeterminate时,以毫秒为单位设置动画持续时间。 | number | No | All | Yes | +| progress | 指标所显示的进度。0和1之间的数字。 | number | No | All | Yes | +| color | 指示灯的填充颜色。 | string | No | All | Yes | +| unfilledColor | 剩余进度的颜色。 | string | No | All | Yes | +| borderWidth | 外边框的宽度,设置为“0”以移除。 | number | No | All | Yes | +| borderColor | 外边框的颜色。 | string | No | All | Yes | ### `Progress.Bar`: @@ -167,12 +186,12 @@ All of the props under _Properties_ in addition to the following: | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | ------------------------------------------------------------------------------ | ------------------------------- | -------- | -------- | ----------------- | -| width | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | number \| null | No | All | Yes | -| height | Height of the progress bar. | number | No | All | Yes | -| borderRadius | Rounding of corners, set to `0` to disable. | number | No | All | Yes | -| useNativeDriver | Use native driver for the animations. | boolean | No | All | Yes | -| animationConfig | Config that is passed into the `Animated` function. | function | No | All | Yes | -| animationType | Animation type to animate the progress, one of: `decay`, `timing`, `spring`. | 'decay' \| 'timing' \| 'spring' | No | All | Yes | +| width | 进度条的全宽度,设置为‘ null ’以使用自动伸缩大小。 | number \| null | No | All | Yes | +| height | 进度条的高度。 | number | No | All | Yes | +| borderRadius | 圆角,设置为‘ 0 ’禁用。 | number | No | All | Yes | +| useNativeDriver | 动画使用原生驱动。 | boolean | No | All | Yes | +| animationConfig | 传入‘ Animated ’函数的配置。 | function | No | All | Yes | +| animationType | 动画类型:`decay`, `timing`, `spring`。 | 'decay' \| 'timing' \| 'spring' | No | All | Yes | ### `Progress.Circle`: @@ -180,16 +199,16 @@ All of the props under _Properties_ in addition to the following: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- | -| size | Diameter of the circle. | number | No | All | Yes | -| endAngle | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | number | No | All | Yes | -| thickness | Thickness of the inner circle. | number | No | All | Yes | -| showsText | Whether or not to show a text representation of current progress. | boolean | No | All | Yes | -| formatText | A function returning a string to be displayed for the textual representation. | function | No | All | Yes | -| textStyle | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. | TextStyle | No | All | Yes | -| allowFontScaling | Whether or not to respect device font scale setting. | boolean | No | All | Yes | -| direction | Direction of the circle `clockwise` or `counter-clockwise`. | 'clockwise' \| 'counter-clockwise' | No | All | Yes | -| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes | -| fill | Fill color of the inner circle. | string | No | All | Yes | +| size | 圆的直径。 | number | No | All | Yes | +| endAngle | 确定圆的endAngle。一个介于0和1之间的数字。最终的角度将是数字乘以2π| number | No | All | Yes | +| thickness | 内圆的厚度。 | number | No | All | Yes | +| showsText | 是否显示当前进度的文本表示。 | boolean | No | All | Yes | +| formatText | 返回要显示文本表示的字符串的一个函数。 | function | No | All | Yes | +| textStyle | 进度文本的样式,默认与circle相同的`color`, `fontSize`与`size` prop成比例。 | TextStyle | No | All | Yes | +| allowFontScaling | 是否遵守设备字体比例设置 | boolean | No | All | Yes | +| direction | 圆的方向顺时针或逆时针。 | 'clockwise' \| 'counter-clockwise' | No | All | Yes | +| strokeCap | 圆形的笔画样式为‘ butt ’, ‘ square ’或‘ round ’。 | 'butt' \| 'square' \| 'round' | No | All | Yes | +| fill | 填充内圆的颜色。 | string | No | All | Yes | ### `Progress.Pie`: @@ -197,21 +216,21 @@ All of the props under _Properties_ in addition to the following: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | -------------------- | ------ | -------- | -------- | ----------------- | -| size | Diameter of the pie. | number | No | All | Yes | +| size | 饼图的直径。 | number | No | All | Yes | ### `Progress.CircleSnail`: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ----------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- | -| animating | If the circle should animate. | boolean | No | All | Yes | -| hidesWhenStopped | If the circle should be removed when not animating. | boolean | No | All | Yes | -| size | Diameter of the circle. | number | No | All | Yes | -| color | Color of the circle, use an array of colors for rainbow effect. | string \| string[] | No | All | Yes | -| thickness | Thickness of the circle. | number | No | All | Yes | -| duration | Duration of animation. | number | No | All | Yes | -| spinDuration | Duration of spin (orbit) animation. | number | No | All | Yes | -| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes | -| direction | Direction in which the circle spins, either "clockwise" or "counter-clockwise" (default). | 'clockwise' \| 'counter-clockwise' | No | All | Yes | +| animating | 是否有圆形动画 | boolean | No | All | Yes | +| hidesWhenStopped | 是否需要在动画结束时移除圆。 | boolean | No | All | Yes | +| size | 圆的直径。 | number | No | All | Yes | +| color | 圆圈的颜色,使用一组颜色的彩虹效果。 | string \| string[] | No | All | Yes | +| thickness | 圆的厚度。 | number | No | All | Yes | +| duration | 动画持续时间。 | number | No | All | Yes | +| spinDuration | 自旋(轨道)动画的持续时间。 | number | No | All | Yes | +| strokeCap | 圆形的笔画样式为‘ butt ’, ‘ square ’或‘ round ’。 | 'butt' \| 'square' \| 'round' | No | All | Yes | +| direction | 圆旋转的方向,“顺时针”或“逆时针”(默认)。 | 'clockwise' \| 'counter-clockwise' | No | All | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-sticky-parallax-header.md b/zh-cn/react-native-sticky-parallax-header.md index 716a153ae09b1b2dbfbcae71b09cf6b6b258ca4c..c11460acda68f391b842c3b5c93032eec647eda3 100644 --- a/zh-cn/react-native-sticky-parallax-header.md +++ b/zh-cn/react-native-sticky-parallax-header.md @@ -14,9 +14,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-sticky-parallax-header) +| 三方库版本 | 包 名 | 仓库地址 | 发布信息 | 支持RN版本 | +| -------- | -------- | --------- |---------|----------| +| 1.1.1 | @react-native-oh-tpl/react-native-sticky-parallax-header | [Github](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)| [GitHub Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.72 | +| 1.2.0 | @react-native-ohos/react-native-sticky-parallax-header | [Github ](https://github.com/react-native-oh-library/react-native-sticky-parallax-header)|[GitHub Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.77 | + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。 + 进入到工程目录并输入以下命令: @@ -27,13 +33,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-sticky-parallax-header + +# 0.77 +npm install @react-native-ohos/react-native-sticky-parallax-header ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-sticky-parallax-header +# 0.72 +yarn install @react-native-oh-tpl/react-native-sticky-parallax-header + +# 0.77 +yarn install @react-native-ohos/react-native-sticky-parallax-header ``` @@ -155,7 +169,10 @@ const TabbedHeaderPagerExample: React.FC = () => { 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。 + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## Headers diff --git a/zh-cn/react-native-text-gradient.md b/zh-cn/react-native-text-gradient.md index e5cfb7c946d98bbb2bf83bd23efbceaddb372f98..7cff4c4c181595e8f1effea4adea29c3690d4778 100644 --- a/zh-cn/react-native-text-gradient.md +++ b/zh-cn/react-native-text-gradient.md @@ -14,16 +14,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-text-gradient) +| 三方库版本 | 包 名 | 仓库地址 | 发布信息 | 支持RN版本 | +| -------- | -------- | --------- |---------|----------| +| 0.1.7 | @react-native-oh-tpl/react-native-text-gradient |[GitHub ](https://github.com/react-native-oh-library/react-native-text-gradient)| [GitHub Release ](https://github.com/react-native-oh-library/react-native-text-gradient/releases)| 0.72 | +| 0.2.0 | @react-native-ohos/react-native-text-gradient | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-text-gradient) | [GitCode Release](https://gitcode.com/openharmony-sig/rntpc_react-native-text-gradient/releases)| 0.77 | ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息: -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.1.7-0.0.4 | [@react-native-oh-tpl/react-native-text-gradient Releases](https://github.com/react-native-oh-library/react-native-text-gradient/releases) | 0.72 | -| 0.2.0 | [@react-native-ohos/react-native-text-gradient Releases]() | 0.77 | - 进入到工程目录并输入以下命令: diff --git a/zh-cn/victory-native-xl.md b/zh-cn/victory-native-xl.md index 49abaf365bd5565e94146df06f165eebf301f1b1..2ad9996f1d3d931579233ed519eacf363f6c24eb 100644 --- a/zh-cn/victory-native-xl.md +++ b/zh-cn/victory-native-xl.md @@ -15,22 +15,38 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/victory-native-xl) +| 三方库版本 | 包 名 | 仓库地址 | 发布信息 | 支持RN版本 | +| -------- | -------- | --------- |---------|----------| +| 41.1.0 | @react-native-oh-tpl/victory-native-xl | [Github](https://github.com/react-native-oh-library/victory-native-xl)| [Github Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) | 0.72 | +| 41.17.5 | @react-native-ohos/victory-native-xl | [Github](https://github.com/react-native-oh-library/victory-native-xl)| [Github Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) | 0.77 | + + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: #### **npm** ```bash +# V41.1.0 npm install @react-native-oh-tpl/victory-native-xl + +# V41.17.5 +npm install @react-native-ohos/victory-native-xl ``` #### **yarn** ```bash +# V41.1.0 yarn add @react-native-oh-tpl/victory-native-xl + +# V41.17.5 +yarn add @react-native-ohos/victory-native-xl ``` 下面的代码展示了这个库的基本使用场景: @@ -95,7 +111,10 @@ export default function LineChartExample() { 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/victory-native-xl Releases](https://github.com/react-native-oh-library/victory-native-xl/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## 属性 @@ -107,119 +126,130 @@ export default function LineChartExample() { ### Cartesian Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes -| xKey | A string value indicating the key of each data[number] object to be used on the independent (x) axis for charting. E.g. "day" if you want to use the "day" field of the data points for the x-axis | string | yes | all | yes -| yKeys | A string[] array of string indicating the keys of each data[number] object to be used on the dependent (y) axis for charting. E.g. yKeys={["lowTmp", "highTmp"]} if you want to chart both high and low temperatures on the y-axis and those values have keys of lowTmp and highTmp respectively | string[] | yes | all | yes -| children | The children prop is a render function whose sole argument is an object that exposes transformed data for you to use in your drawing operations. For example, the children render function's argument has a points field that exposes a version of your input data that's transformed to be plotted on the Canvas (see the Example section above for an example of this)| function | yes | all | yes -| padding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the Skia canvas and where the charting bounds will occur | number | no | all | yes -| domain | An object of shape { x?: [number] \| [number, number]; y?: [number] \| [number, number] } that can be specified to control the upper and lower bounds of each axis. It defaults to the min and max of each range respectively | object | no | all | yes -| domainPadding | A number or an object of shape { left?: number; right?: number; top?: number; bottom?: number; } that specifies that padding between the outer bounds of the charting area (e.g. where the axes lie) and where chart elements will be plotted | object | no | all | yes -| axisOptions | The axisOptions is an optional prop allows you to configure the axes and grid of the chart. If it is not present then the chart will not render any axes or grid | object | no | all | yes -| chartPressState | The chartPressState prop allows you to pass in Reanimated SharedValues that will be used to track the user's "press" gesture on the chart. This is generally used for creating some sort of tooltip/active value indicator. See the Chart Gestures page for more in-depth information on how to use this prop | object | no | all | yes -| renderOutside | The renderOutside prop is identical to the children prop in form, but it will render elements at the root of the Skia canvas (not inside of a clipping group). This allows you to render elements outside of the bounds of any axes that you have configured | object | no | all | yes -| onChartBoundsChange | The onChartBoundsChange prop is a function of the shape onChartBoundsChange?: (bounds: ChartBounds) => void; that exposes the chart bounds, useful if you need access to the chart's bounds for your own custom drawing purposes | function | no | all | yes -| gestureLongPressDelay | The gestureLongPressDelay prop allows you to set the delay in milliseconds before the pan gesture is activated. Defaults to 100 | number | no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| data | 用作图表数据点的数组 | array[] | yes | all | yes | +| xKey | 一个string[]数组字符串表示的每个数据(数量)对象的键使用依赖(x)轴的图表 | string | yes | all | yes | +| yKeys | 一个string[]数组字符串表示的每个数据(数量)对象的键使用依赖(y)轴的图表 | string[] | yes | all | yes | +| children | children属性是一个渲染函数,它的唯一参数是一个对象,该对象暴露了转换后的数据,供你在绘图操作中使用) | function | yes | all | yes | +| padding | 它指定Skia画布的外部边界和绘图边界将发生的位置之间的填充 | number | no | all | yes | +| domain | 可以指定控制每个轴的上限和下限。它的默认值分别是每个范围的最小值和最大值 | object | no | all | yes | +| domainPadding | 指定绘图区域的外部边界(例如,轴所在的位置)和绘制图表元素的位置之间的填充 | object | no | all | yes | +| axisOptions | axisOptions是一个可选的属性,允许您配置图表的轴和网格。如果它不存在,那么图表将不会渲染任何轴或网格 | object | no | all | yes | +| chartPressState | chartPressState属性允许你传入重新激活的SharedValues,它将用于跟踪图表上用户的“按下”手势。这通常是用来创建某种工具提示/活跃值指标。更深入的信息,请参阅图表手势页面如何使用这个属性 | object | no | all | yes | +| renderOutside | renderOutside属性与form中的children属性相同,但它将渲染Skia画布的根元素(而不是在裁剪组内)。这允许你在已配置的任何坐标轴的边界之外渲染元素 | object | no | all | yes | +| onChartBoundsChange | onChartBoundsChange属性是方法onChartBoundsChange?: (bounds: ChartBounds) => void;这将显示图表的边界,如果您需要为自己的自定义绘图目的访问图表的边界,这将非常有用 | function | no | all | yes | +| gestureLongPressDelay | gestureLongPressDelay支持允许您设置的延迟毫秒平移手势之前激活。默认为100 | number | no | all | yes | +| viewport41.17.5+ | 控制图表的可见范围。与domain设置数据的绝对边界不同,viewport确定图表窗口中当前可见的数据部分。 | object | no | all | yes | +| xAxis41.17.5+ | X轴是一个可选的属性,允许你配置图表的X轴。如果它不存在,那么图表将不会渲染任何X轴。 | object | no | all | yes | +| yAxis41.17.5+ | yAxis是一个可选的属性,允许你配置图表的Y轴。如果它不存在,那么图表将不会渲染任何y轴。要渲染多个Y轴,需要向数组中传入多个Y轴对象。| object | no | all | yes | +| frame41.17.5+ | frame是一个可选的prop,允许你配置图表的帧数据。如果它不存在,那么图表将不会渲染任何帧。 | object | no | all | yes | +| chartPressConfig41.17.5+ | chartPressConfig支持允许您配置平移手势处理程序用于图表交互。 | object | no | all | yes | +| transformState41.17.5+ | transformState支持允许您通过允许平移和缩放变换状态对象交互图。 | object | no | all | yes | +| transformConfig41.17.5+ | 一个可选的配置对象当transformState提供定制转换行为 | object | no | all | yes | +| customGestures41.17.5+ | customgesture属性允许你提供自定义手势处理程序,它将与默认的图表按下手势一起工作(或代替)。它从react-native手势处理程序接受一个composdgesture。 | object | no | all | yes | +| actionsRef41.17.5+ | actionsRef属性允许你程序化地访问某些图表动作。它接受一个ref对象,该对象将用控制图表行为的方法填充。 | object | no | all | yes | +| onScaleChange41.17.5+ | 一个回调函数,当图表的刻度发生变化时,由于数据更新或缩放/平移转换,该函数将被调用。该函数接收两个参数:·xScale:当前x轴刻度(d3线性刻度)·yScale:当前y轴刻度(d3线性刻度)。| function | no | all | yes | +| gestureHandlerConfig41.17.5+ | gestureHandlerConfig属性允许你配置底层的React Native手势处理程序实例。这是用于微调手势交互,比如启用/禁用web平台上的上下文菜单或调整触摸行为。 | object | no | web | no | ### Line Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes -| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes -| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected line chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts"| boolean | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| strokeWidth| Set the width of the line | number| no | all | yes -| color| Set the color of the line | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | 来自points对象字段的PointsArray数组暴露给CartesianChart的子渲染函数,如上面的示例所示 | array[] | no | all | yes | +| animate | animate prop接受一个PathAnimationConfig对象,并在点发生变化时对路径进行动画 | object | no | all | yes | +| curveType | 一个CurveType值,表示应该绘制的曲线类型 (例如: linear or natural) | string | no | all | yes | +| connectMissingData | connectMissingData:布尔值,用于显示缺失的数据应该插值生成的路径。如果设置为true,输出将是单个连接的折线图路径(即使缺少数据值)。如果设置为false,如果缺少数据值-路径将由多个断开连接的“部分”组成 | boolean | no | all | yes | +| children | children属性是Skia Path元素内部渲染的子通道,用于渐变路径| object | no | all | yes | +| strokeWidth | 设置线条的宽度 | number | no | all | yes | +| color | 设置线条的颜色 | string | no | all | yes | ### Area Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| y0 | A number that indicates where the "bottom" of the area path should run. This number should be in canvas coordinates | number | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points changes | object | no | all | yes -| curveType | A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural) | string | no | all | yes -| connectMissingData | The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected area chart path (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts" | boolean | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| color| Set the color of the area | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | 来自points对象字段的PointsArray数组暴露给CartesianChart的子渲染函数,如上面的示例所示 | array[] | no | all | yes | +| y0 | 指示区域路径“底部”应该运行的位置的数字。这个数字是画布坐标 | number | no | all | yes | +| animate | animate prop接受一个PathAnimationConfig对象,并在点发生变化时对路径进行动画 | object | no | all | yes | +| curveType | 一个CurveType值,表示应该绘制的曲线类型(例如线性或自然)。 | string | no | all | yes | +| connectMissingData | 一个将在Skia Path元素内部渲染的子通道,如果你想制作一个渐变路径,这很有用| boolean | no | all | yes | +| children | 一个将在Skia Path元素内部渲染的子通道,如果你想制作一个渐变路径,这很有用 | object | no | all | yes | +| color | 设置区域的颜色 | string | no | all | yes | ### Bar Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | A PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes -| innerPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars should be "white space". Defaults to 0.2. Use 0 for no gap between bars, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes -| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of the Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes -| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the chartBounds and number of data points. Takes precendence over the barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes -| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes -| children | A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path | object | no | all | yes -| color| Set the color of the bar| string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| points | 来自points对象的字段的PointsArray数组暴露了CartesianChart的子呈现函数,如上面的示例所示 | array[] | no | all | yes | +| chartBounds | 一个用于正确绘制条形图的ChartBounds对象。这通常来自于CartesianChart的chartBounds渲染参数 | object | no | all | yes | +| innerPadding | 一个介于0和1之间的可选数字,表示第一个和最后一个条之间的水平空间应该是“空白”的百分比。默认为0.2。使用0表示条形条之间没有间隙,使用接近1的值表示条形条越来越窄 | number | no | all | yes | +| animate | animate prop接受一个PathAnimationConfig对象,并在点改变时对路径进行动画 | object | no | all | yes | +| roundedCorners | roundedCorners属性允许你自定义BarGroup的每个角的角度。Bar组件。它是一个对象类型,定义了左上的半径,右上图右下角,左下侧的角落 | object | no | all | yes | +| barWidth | barWidth prop接受一个数字,并将表的宽度设置为该数字。如果未提供,则默认值由该组条的总可用宽度、组中的条数以及组中条之间的填充量的组合决定。优先于barCount prop。将此用于最精细的条形表宽度控制 | no | all | yes | +| barCount | barCount prop接受一个数字,并将条形的宽度设置为X个数据点。如果没有提供,则默认值由chartBounds和数据点数决定。无论数据点的数量如何,都可以获得固定的条宽度。将此用于更一般的条宽度控制 | number | no | all | yes | +| children | 一个在Skia路径元素中渲染的子通道,如果你想做一个渐变路径,它会很有用 | object | no | all | yes | +| color | 设置表的颜色 | string | no | all | yes | +| labels41.17.5+ | labels属性允许您启用和自定义Bar组件的数据标签。数据标签文本是与Bar组件关联的y轴值。 | object | no | all | yes | ### BarGroup Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| chartBounds | A ChartBounds object needed to appropriately draw the bars. This generally comes from the chartBounds render argument of CartesianChart | object | no | all | yes -| betweenGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bar groups should be "white space". Defaults to 0.2. Use 0 for no gap between groups, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| withinGroupPadding | An optional number between 0 and 1 that represents what fraction of the horizontal space between the first and last bars within a group should be "white space". Defaults to 0.2. Use 0 for no gap between bars within a group, and values closer to 1 to make bars increasingly narrow | number | no | all | yes -| barWidth | The barWidth prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by a combination of the total available width for the group of bars, the number of bars in the group, and the padding between the bars within the group. Takes precedence over barCount prop. Use this for the most fine grained control of bar width | number | no | all | yes -| barCount | The barCount prop takes a number and sets the width of the bar as if there X data points. If not provided, the default is determined by the chartBounds and number of data points. Useful for getting a fixed bar width regardless of the number of data points. Use this for a more general control of bar width | number | no | all | yes -| onBarSizeChange | That alerts the consumer when the size of the bars/groups changes, useful for if you're building a custom tooltip and need to know the size of the groups/bars | function | no | all | yes -| roundedCorners | The roundedCorners prop allows you to customize the roundedness of each corner of a BarGroup.Bar component. It's an object type that defines the radii for the top-left, top-right, bottom-right, and bottom-left corners | object | no | all | yes -| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes -| color| Set the color of the bar | string| no | all | yes - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| chartBounds | 一个用于正确绘制条形图的ChartBounds对象。这通常来自于CartesianChart的chartBounds渲染参数 | object | no | all | yes | +| betweenGroupPadding | 一个介于0和1之间的可选数字,表示第一个和最后一个条组之间的水平空间应该是“空白”的百分比。默认为0.2。使用0表示组之间没有间隙,使用接近1的值表示条形图越来越窄 | number | no | all | yes | +| withinGroupPadding | 一个介于0到1之间的可选数字,表示组中第一个条和最后一个条之间的水平空间应该是“空白”的比例。默认为0.2。使用0表示组内条之间没有间隙,使用接近1的值表示条越来越窄 | number | no | all | yes | +| barWidth | barWidth prop接受一个数字,并将表的宽度设置为该数字。如果未提供,则默认值由该组条的总可用宽度、组中的条数以及组中条之间的填充量的组合决定。优先于barCount prop。将此用于最精细的条形表宽度控制 | number | no | all | yes | +| barCount | barCount prop接受一个数字,并设置条形图的宽度,就好像有X个数据点一样。如果没有提供,默认值由chartBounds和数据点的数量决定。无论数据点的数量如何,都可以获得固定的条形宽度。用它来控制表宽 | number | no | all | yes | +| onBarSizeChange | 当条形/表的大小发生变化时,它会提醒用户,这对于构建自定义工具提示并需要知道条形/表的大小很有用 | function | no | all | yes | +| roundedCorners | roundedCorners属性允许你自定义BarGroup的每个角的角度。Bar组件。它是一个对象类型,定义了左上的半径,右上图右下角,左下侧的角落 | object | no | all | yes | +| children | BarGroup的数组。Bar元素(见下文),表示要添加到Bar组中的Bar | object | no | all | yes | +| color | 设置表的颜色 | string | no | all | yes | ### Scatter Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| points | TA PointsArray array that comes from a field of the points object exposed the children render function of CartesianChart, as illustrated in the example above | array[] | no | all | yes -| radius | radius of the circle, half the width of the square | number | no | all | yes -| shape | One of the following ScatterShape values that determines the shape of each point to be drawn | ScatterShape | no | all | yes -| animate | The animate prop takes a PathAnimationConfig object and will animate the path when the points change | object | no | all | yes -| children | An array of BarGroup.Bar elements (see below) that represent the bars to add to the bar group | object | no | all | yes -| style| set style stroke or fill | string| no | all | yes -| strokeWidth| Set the width of the line | number| no | all | yes -| color| Set the color of the bar| string| no | all | yes +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | ------------ | -------- | -------- | ----------------- | +| points | PointsArray数组来自points对象的一个字段,它暴露给CartesianChart的子渲染函数,如上面的示例所示 | array[] | no | all | yes | +| radius | 圆的半径,正方形宽度的一半 | number | no | all | yes | +| shape | 下列散点形状值之一,用于确定要绘制的每个点的形状 | ScatterShape | no | all | yes | +| animate | animate属性的参数是一个PathAnimationConfig对象,它会在点发生变化时为路径添加动画 | object | no | all | yes | +| children | BarGroup的数组。Bar元素(见下文),表示要添加到Bar组中的Bar | object | no | all | yes | +| style | 设置样式描边或填充 | string | no | all | yes | +| strokeWidth | 设置线条的宽度 | number | no | all | yes | +| color | 设置表的颜色 | string | no | all | yes | ### Polar Chart -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An array of objects to be used as data points for the chart | array[] | yes | all | yes -| labelKey | A string value indicating the key of each data[number] object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart | string | yes | all | yes -| valueKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes -| colorKey | A string value indicating the key of each data[number] object to be used to draw a slice of the Pie | string | yes | all | yes -| children | The only supported children of a PolarChart is currently a Pie.Chart See the Pie Chart for more details | object | no | all | yes -| containerStyle | A StyleProp that styles the View which wraps the Canvas of the Polar chart | object | no | all | yes -| canvasStyle | A StyleProp that styles the Canvas upon which the Polar chart is drawn | object | no | all | yes +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| data | 用作图表数据点的对象数组 | array[] | yes | all | yes | +| labelKey | 一个字符串值,指示要使用的每个数据[number]对象的键。目前只在图表的图例部分使用 | string | yes | all | yes | +| valueKey | 一个字符串值,表示绘制饼图的每个data[number]对象的键 | string | yes | all | yes | +| colorKey | 一个字符串值,表示绘制饼图的每个data[number]对象的键 | string | yes | all | yes | +| children | PolarChart目前唯一支持的子程序是Pie。详情参见饼状图 | object | no | all | yes | +| containerStyle | ViewStyle>;这将样式化包装Polar图表画布的视图 | object | no | all | yes | +| canvasStyle | ViewStyle>;它为绘制极坐标图的画布设置样式 | object | no | all | yes | ### Pie.Chart -**Bar related props for making Capped Bar chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| innerRadius | A number or string (as a percentage) which turns the Pie chart into a Donut chart. The innerRadius prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a Pie chart | number | no | all | yes -| circleSweepDegrees | A number which defines how many degrees of the chart should be drawn. The default is 360 which will draw a full circle. If you want to draw a partial circle, you can set this prop to a value between 0 and 360 | number | no | all | yes -| startAngle | A number which defines the starting angle of the chart. Changing this prop will rotate the chart | number | no | all | yes -| children | The children prop is a render function which maps through the data and whose sole argument is each individual slice of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a Pie.Slice | function | no | all | yes -| angularStrokeWidth | A number which turns width of the Pie chart slice | number | no | all | yes -| angularStrokeColor | A string which turns color of the Pie chart slice | string | no | all | yes +**制作条形图所需的条形相关属性** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| innerRadius | 一个数字或字符串(百分比),把饼图变成一个甜甜圈图。innerRadius属性是甜甜圈图内圆的半径。如果没有提供,图表仍然是饼状图 | number | no | all | yes | +| circleSweepDegrees | 定义图表应该绘制多少度的数字。默认值是360,它将绘制一个完整的圆。如果您想绘制一个局部圆,可以将该道具设置为0到360之间的值 | number | no | all | yes | +| startAngle | 定义图表起始角度的数字。更改此属性将旋转图表 | number | no | all | yes | +| children | children属性是一个渲染函数,它通过数据进行映射,其唯一的参数是饼图的每个单独的切片,允许您根据需要自定义每个切片 | function | no | all | yes | +| angularStrokeWidth | 表示饼状图切片宽度的数字 | number | no | all | yes | +| angularStrokeColor | 一个字符串,用于改变饼图切片的颜色 | string | no | all | yes | ## 遗留问题 ## 其他 +- V41.17.5 新增属性gestureHandlerConfig,该属性只支持web端,无需鸿蒙化,详细参照: + [Cartesian Chart | Victory Native](https://nearform.com/open-source/victory-native/docs/cartesian/cartesian-chart/) 、 [GestureDetector | React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#userselect-web-only) + ## 开源协议 本项目基于 [The MIT License (MIT)]( https://www.mit-license.org/) ,请自由地享受和参与开源。