From 2737334157a581d1e9b027cbe8ef4034c0d55931 Mon Sep 17 00:00:00 2001 From: dingchenjie Date: Thu, 27 Nov 2025 15:51:17 +0800 Subject: [PATCH 1/5] docs: update react-native-toolbar-android,react-native-graph,react-native-tcp-socket,react-native-keys,react-native-aria Signed-off-by: dingchenjie --- en/react-native-aria.md | 93 +++-- en/react-native-community-toolbar-android.md | 184 +++++----- en/react-native-graph.md | 203 ++++++----- en/react-native-keys.md | 144 +++++--- en/react-native-tcp-socket.md | 331 +++++++++++------- zh-cn/react-native-aria.md | 38 +- .../react-native-community-toolbar-android.md | 50 +-- zh-cn/react-native-graph.md | 54 +-- zh-cn/react-native-keys.md | 47 ++- zh-cn/react-native-tcp-socket.md | 232 ++++++++---- 10 files changed, 834 insertions(+), 542 deletions(-) diff --git a/en/react-native-aria.md b/en/react-native-aria.md index 1f56e006..a0552328 100644 --- a/en/react-native-aria.md +++ b/en/react-native-aria.md @@ -1,4 +1,4 @@ -> Template version: v0.2.2 +> Template Version: v0.2.2

react-native-aria

@@ -12,14 +12,19 @@

-> [!TIP] [GitHub address](https://github.com/gluestack/react-native-aria/tree/main) +> [!TIP] [Github Address](https://github.com/gluestack/react-native-aria/tree/main) -## Installation and Usage +## Installation & Usage -React Native ARIA是可增量采用的。每个组件都作为单独的包发布，因此您可以在单个组件中使用它，并随着时间的推移逐渐添加更多组件。所有这些包都在npm上的@react-native-aria范围内发布。 -> [!TIP] 该库已经不再维护，如果执行总包命令，项目运行缺失模块，就需要卸载旧包，在命令后增加--legacy-peer-deps，然后再次下载包文件 +Please check the corresponding version information in the third-party library's Releases: -Go to the project directory and execute the following instruction: +| Third-party Version | Release Information | Supported RN Version | +| ------------------- | ------------------- | -------------------- | +| 0.2.4 | [react-native-aria release](https://github.com/gluestack/react-native-aria/releases) | 0.72/0.77 | + +For older versions not published to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. + +Navigate to your project directory and run the following command: #### **yarn** @@ -27,17 +32,13 @@ Go to the project directory and execute the following instruction: yarn add react-native-aria@0.2.3 ``` - - #### **npm** ```bash npm install react-native-aria@0.2.3 ``` - - -除了总包之外，我们还提供了一些单独包，如：@react-native-aria/button +In addition to the main package, we also provide some separate packages, such as: @react-native-aria/button #### **yarn** @@ -45,19 +46,13 @@ npm install react-native-aria@0.2.3 yarn add @react-native-aria/button@0.2.7 ``` - - #### **npm** ```bash npm install @react-native-aria/button@0.2.7 ``` - - -The following code shows the basic use scenario of the repository: - -> [!WARNING] The name of the imported repository remains unchanged. +The following code demonstrates the basic usage scenario of useToggleButton: ```js import React from "react"; @@ -80,7 +75,7 @@ export function ToggleButton(props: any) { padding: 5, width: 100, height: 30, justifyContent: 'center', alignItems: 'center' }} > - 点击切换 + Click to toggle ); @@ -90,7 +85,7 @@ export default ToggleButton ``` -下面的代码展示了useCheckbox与useCheckboxGroup的基本使用场景： +The following code demonstrates the basic usage scenario of useCheckbox and useCheckboxGroup: ```javascript import React, { useContext, useRef } from 'react'; @@ -102,7 +97,7 @@ import { useFocusRing } from '@react-native-aria/focus'; let CheckboxGroupContext = React.createContext(null); -const CheckboxItems = [{ key: 'soccer', value: '足球' }, { key: 'baseball', value: '棒球' }, { key: 'basketball', value: '篮球' }] +const CheckboxItems = [{ key: 'soccer', value: 'Football' }, { key: 'baseball', value: 'Baseball' }, { key: 'basketball', value: 'Basketball' }] const findName = (value: string) => { const item = CheckboxItems.find(i => { return i.key === value; }) return item && item.value @@ -119,7 +114,7 @@ export function CheckboxGroup(props: any) { {children} - 已经选择：{props.value.map(i=>{ + Selected：{props.value.map(i=>{ return {findName(i)} })} @@ -177,7 +172,7 @@ export default CheckboxExample ``` -下面的代码展示了useRadio与useRadioGroup的基本使用场景： +The following code demonstrates the basic usage scenario of useRadio and useRadioGroup: ```javascript import React from "react"; @@ -188,7 +183,7 @@ import { useFocusRing } from "@react-native-aria/focus"; let RadioContext = React.createContext({}); -const radioItems = [{ key: 'dogs', value: '狗子' }, { key: 'cats', value: '猫儿' }] +const radioItems = [{ key: 'dogs', value: 'Dogs' }, { key: 'cats', value: 'Cats' }] const findName = (value: string) => { const item = radioItems.find(i => { return i.key === value; }) return item && item.value @@ -211,7 +206,7 @@ export function RadioGroup(props: any) { > {children} - 已经选择：{findName(state.selectedValue as string)} + Selected：{findName(state.selectedValue as string)} ); } @@ -250,7 +245,7 @@ export default RadioExample ``` -下面的代码展示了useSwitch的基本使用场景： +The following code demonstrates the basic usage scenario of useSwitch: ```javascript import { useToggleState } from "@react-stately/toggle"; @@ -368,7 +363,7 @@ export function Switch(origProps: any) { {icon} - {isOn ? "开" : "关"} + {isOn ? "On" : "Off"} ); } @@ -403,7 +398,7 @@ export default ControlledSwitch ``` -下面的代码展示了useOverlayPosition的基本使用场景： +The following code demonstrates the basic usage scenario of useOverlayPosition: ```javascript import React from "react"; @@ -494,7 +489,7 @@ export function Trigger({ placement }: any) { paddingVertical: 10, }} > - 点我一下 + Click me @@ -511,40 +506,40 @@ export default TriggerWrapper ``` -更多hooks请参考[react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) +For more hooks, please refer to the [react-native-aria official documentation](https://geekyants.github.io/react-native-aria/docs/) -## Constraints +## Constraints & Limitations ### Compatibility -This document is verified based on the following versions: +To use this library, you need the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. -1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59; -2. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1) ; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; -3. RNOH：0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：3.0.0.61; -4. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +Verified in the following versions: + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Hooks -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platforms supported by the original third-party library for that property. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] The "HarmonyOS Support" column: 'Yes' means the property is supported on the HarmonyOS platform; 'No' means it is not supported; 'partially' means partial support. The usage method is consistent across platforms, with effects benchmarked against iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------| -| useToggleButton | Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | no | iOS,Android | yes | -| useCheckbox | Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | no | iOS,Android | yes | -| useCheckboxGroup | Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | no | iOS,Android | yes | -| useRadioGroup | Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | no | iOS,Android | yes | -| useSwitch | Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | no | iOS,Android | yes | -| OverlayContainer | Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | no | iOS,Android | yes | -| useOverlayPosition | Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | no | iOS,Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------|-------------|-------------------| +| useToggleButton | Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | No | iOS,Android | Yes | +| useCheckbox | Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | No | iOS,Android | Yes | +| useCheckboxGroup | Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | No | iOS,Android | Yes | +| useRadioGroup | Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | No | iOS,Android | Yes | +| useSwitch | Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | No | iOS,Android | Yes | +| OverlayContainer | Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | No | iOS,Android | Yes | +| useOverlayPosition | Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | No | iOS,Android | Yes | ## Known Issues +1. Immediate voice reading after toggling selection state is currently not supported. ## Others ## License -This project is licensed under [The MIT License (MIT)](https://github.com/gluestack/react-native-aria/blob/main/LICENSE). - +This project is based on [The MIT License (MIT)](https://github.com/gluestack/react-native-aria/blob/main/LICENSE). Feel free to enjoy and contribute to open source. \ No newline at end of file diff --git a/en/react-native-community-toolbar-android.md b/en/react-native-community-toolbar-android.md index 78e9550c..4838ddb5 100644 --- a/en/react-native-community-toolbar-android.md +++ b/en/react-native-community-toolbar-android.md @@ -1,4 +1,4 @@ -> Template version: v0.3.0 +> Template Version: v0.3.0

@react-native-community/toolbar-android

@@ -6,36 +6,42 @@ This project is based on [@react-native-toolbar-android/toolbar-android@v0.2.1](https://github.com/react-native-toolbar-android/toolbar-android/tree/v0.2.1). -This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/toolbar-android`, The version correspondence details are as follows: +The third-party library repository has been migrated to Gitee and supports direct download from npm. The new package name is: `@react-native-ohos/toolbar-android`. The specific version relationships are as follows: -| Version | Package Name | Repository | Release | -|-----------------| ------------------------------------------------- | ------------------ | -------------------------- | -| <= 0.2.1-0.0.4 | @react-native-oh-tpl/toolbar-android | [Github(deprecated)](https://github.com/react-native-oh-library/toolbar-android) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/toolbar-android/releases) | -| >= 0.2.2 | @react-native-ohos/toolbar-android | [Gitee](https://gitee.com/openharmony-sig/rntpc_toolbar-android) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_toolbar-android/releases) | +| Third-party Version | Release Information | Supported RN Version | +|-----------------| ------------------------------------------------- | ------------------ | +| <= 0.2.1 | [@react-native-oh-tpl/toolbar-android Releases(deprecated)](https://github.com/react-native-oh-library/toolbar-android/releases) | 0.72 +| >= 0.2.2 | [@react-native-ohos/toolbar-android Releases](https://gitcode.com/openharmony-sig/rntpc_toolbar-android/releases) | 0.77 -## 1.Installation and Usage +## 1. Installation & Usage -Go to the project directory and execute the following instruction: +Navigate to your project directory and run the following command: -#### npm +#### **npm** ```bash +# 0.72 +npm install @react-native-oh-tpl/toolbar-android +# 0.77 npm install @react-native-ohos/toolbar-android ``` -#### yarn +#### **yarn** ```bash +# 0.72 +yarn add @react-native-oh-tpl/toolbar-android +# 0.77 yarn add @react-native-ohos/toolbar-android ``` -The following code shows the basic use scenario of the repository: +The following code demonstrates basic usage scenarios of this library: -> [!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The import library name remains unchanged during use. ```js import React, { useState } from "react"; @@ -114,41 +120,41 @@ const styles = StyleSheet.create({ export default App; ``` -## 2.Manual Link +## 2. Manual Link This step provides guidance for manually configuring native dependencies. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, you need to open the HarmonyOS project `harmony` within your project using DevEco Studio. -### 2.1.Overrides RN SDK +### 2.1. Overrides RN SDK -To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory. +To ensure the project depends on the same version of RN SDK, you need to add the overrides field to the root `oh-package.json5`, pointing to the RN SDK version required by the project. The replaced version can be a specific version number, a fuzzy version, or a locally existing HAR package or source code directory. -For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides). +For details about this field, please read the [official documentation](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides) ```json { ... "overrides": { - "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version - // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package - // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm online version + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code } } ``` -### 2.2.Introducing Native Code +### 2.2. Import Native Code -Currently, two methods are available: +There are currently two methods: -- Use the HAR file. -- Directly link to the source code。 +- Import via har package; +- Link source code directly. -Method 1 (recommended): Use the HAR file. +Method 1: Import via har package (Recommended) -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +> [!TIP] The har package is located in the `harmony` folder of the installed third-party library path. -Open `entry/oh-package.json5` file and add the following dependencies: +Open `entry/oh-package.json5` and add the following dependencies: ```json "dependencies": { @@ -156,24 +162,24 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` -Click the `sync` button in the upper right corner. +Click the `sync` button in the top right corner. -Alternatively, run the following instruction on the terminal: +Or execute in the terminal: ```bash cd entry ohpm install ``` -Method 2: Directly link to the source code. +Method 2: Link Source Code Directly -> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). +> [!TIP] If you need to link source code directly, please refer to the [Direct Link Source Code Guide](/zh-cn/link-source-code.md) -### 2.3.Configuring CMakeLists and Introducing ToolbarAndroidPackage +### 2.3. Configure CMakeLists and Import ToolbarAndroidPackage -Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: +Open `entry/src/main/cpp/CMakeLists.txt` and add: -```diff +```cmake project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) @@ -205,9 +211,9 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_END: link_packages ``` -Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: +Open `entry/src/main/cpp/PackageProvider.cpp` and add: -```diff +```c++ ... + #include "ToolbarAndroidPackage.h" @@ -221,13 +227,13 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 2.4.Introducing RNCCheckBoxPackage to ArkTS +### 2.4. Import RNCCheckBoxPackage on the ArkTS Side -> [!TIP] Required for version `v0.2.22` and above +> [!TIP] Required for version v0.2.22 and above Open `entry/src/main/ets/RNPackagesFactory.ts` and add: -```diff +```typescript ... + import {ToolbarAndroidPackage} from '@react-native-ohos/toolbar-android/src/main/ets/ToolbarAndroidPackage'; @@ -236,14 +242,13 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [new ToolbarAndroidPackage(ctx)]; ]; } - ``` -### 2.5.Introducing RNCToolbarAndroid Component to ArkTS +### 2.5. Import RNCToolbarAndroid Component on the ArkTS Side -Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: +Find **function buildCustomRNComponent()**, usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add: -```diff +```typescript ... + import { RNCToolbarAndroid} from '@react-native-ohos/toolbar-android/src/main/ets/RNCToolbarAndroid' @@ -261,74 +266,77 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ... ``` -> [!TIP] If the repository uses a mixed solution, the component name needs to be added. +> [!TIP] This library uses a hybrid solution and requires adding the component name. -Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. +Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array: -```diff +```typescript const arkTsComponentNames: Array = [ ... + RNCToolbarAndroid.NAME ]; ``` -### 2.6.Running +### 2.6. Run -Click the `sync` button in the upper right corner. +Click the `sync` button in the top right corner. -Alternatively, run the following instruction on the terminal: +Or execute in the terminal: ```bash cd entry ohpm install ``` -Then build and run the code. +Then compile and run. + +## 3. Constraints & Limitations -## 3.Constraints +### 3.1 Compatibility -### 3.1Compatibility +To use this library, you need the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +Verified in the following versions: -Check the release version information in the release address of the third-party library: [@react-native-ohos/toolbar-android Releases](https://gitee.com/openharmony-sig/rntpc_toolbar-android/releases) +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; -## 4.Properties +## 4. Props -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platforms supported by the original third-party library for that property. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] The "HarmonyOS Support" column: 'Yes' means the property is supported on the HarmonyOS platform; 'No' means it is not supported; 'partially' means partial support. The usage method is consistent across platforms, with effects benchmarked against iOS or Android. Inherits [View Props](https://reactnative.dev/docs/view#props). -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |-----------| -------- | ----------------- | -| actions | Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. | array of object: {title: string,icon: ImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | Android | yes | -| contentInsetStart | Sets the content inset for the toolbar starting edge. | number | No | Android | yes | -| contentInsetEnd | Sets the content inset for the toolbar ending edge. | number | No | Android | yes | -| logo | Sets the toolbar logo. | ImageSource | No | Android | yes | -| navIcon | Sets the navigation icon. | ImageSource | No | Android | yes | -| onActionSelected | Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. | function | No | Android | yes | -| onIconClicked | Callback called when the icon is selected. | function | No | Android | yes | -| overflowIcon | Sets the overflow icon. | ImageSource | No | Android | yes | -| rtl | Used to set the toolbar direction to RTL. | bool | No | Android | yes | -| subtitle | Sets the toolbar subtitle. | string | No | Android | yes | -| subtitleColor | Sets the toolbar subtitle color. | string | No | Android | yes | -| title | Sets the toolbar title. | string | No | Android | yes | -| titleColor | Sets the toolbar title color. | string | No | Android | yes | - -#### 4.1.Props of ImageSource - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------ | ------------------------------------------------------ | ------ | -------- | -------- | ----------------- | -| uri | load image from a url, e.g. require('./some_icon.png') | string | Yes | android | yes | -| width | the width of the image | number | No | android | yes | -| height | the height of the image | number | No | android | yes | - -## 5.Known Issues - -## 6.Others - -## 7.License - -This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_toolbar-android/blob/master/LICENSE). +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-----------------|---------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|-----------|----------|-------------------| +| actions | Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. | array of object: {title: string,icon: ImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | Android | Yes | +| contentInsetStart | Sets the content inset for the toolbar starting edge. | number | No | Android | Yes | +| contentInsetEnd | Sets the content inset for the toolbar ending edge. | number | No | Android | Yes | +| logo | Sets the toolbar logo. | ImageSource | No | Android | Yes | +| navIcon | Sets the navigation icon. | ImageSource | No | Android | Yes | +| onActionSelected | Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. | function | No | Android | Yes | +| onIconClicked | Callback called when the icon is selected. | function | No | Android | Yes | +| overflowIcon | Sets the overflow icon. | ImageSource | No | Android | Yes | +| rtl | Used to set the toolbar direction to RTL. | bool | No | Android | Yes | +| subtitle | Sets the toolbar subtitle. | string | No | Android | Yes | +| subtitleColor | Sets the toolbar subtitle color. | string | No | Android | Yes | +| title | Sets the toolbar title. | string | No | Android | Yes | +| titleColor | Sets the toolbar title color. | string | No | Android | Yes | + +#### 4.1. Props of ImageSource + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|---------------------------------------------------------------------------------------------------------------------------------------|--------|----------|----------|-------------------| +| uri | load image from a url, e.g. require('./some_icon.png') | string | Yes | android | Yes | +| width | the width of the image | number | No | android | Yes | +| height | the height of the image | number | No | android | Yes | + +## 5. Known Issues + +## 6. Others + +## 7. License + +This project is based on [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_toolbar-android/blob/master/LICENSE). Feel free to enjoy and contribute to open source. \ No newline at end of file diff --git a/en/react-native-graph.md b/en/react-native-graph.md index cd61f5cf..a9a285f1 100644 --- a/en/react-native-graph.md +++ b/en/react-native-graph.md @@ -1,5 +1,4 @@ -> Template version: v0.2.2 - +> Template Version: v0.2.2

react-native-graph

@@ -12,154 +11,164 @@

-> [!TIP] [ GitHub address](https://github.com/margelo/react-native-graph) +> [!TIP] [Github Address](https://github.com/margelo/react-native-graph) ## Installation and Usage -Go to the project directory and execute the following instruction: +Please check the corresponding version information in the third-party library's Releases: + +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------- | -------------------- | +| 1.1.0 | [react-native-graph release](https://github.com/margelo/react-native-graph/releases) | 0.72/0.77 | + +For older versions not published to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. + +Navigate to your project directory and enter the following commands: #### **npm** ```bash -npm install react-natvie-graph@1.1.0 +npm install react-native-graph@1.1.0 ``` #### **yarn** ```bash -yarn add react-natvie-graph@1.1.0 +yarn add react-native-graph@1.1.0 ``` -The following code shows the basic use scenario of the repository: +The following code demonstrates basic usage scenarios of this library: ```ts -import React, { useState } from "react"; -import { View, StyleSheet, Text, Button } from "react-native"; -import { LineGraph } from "react-native-graph"; -import { GestureHandlerRootView } from "react-native-gesture-handler"; +import React, { useState } from 'react' +import { View, StyleSheet, Text, Button } from 'react-native' +import { LineGraph } from 'react-native-graph' +import { GestureHandlerRootView } from 'react-native-gesture-handler'; interface GraphPoint { - value: number; - date: Date; -} + value: number + date: Date + } interface GraphXRange { - min: Date; - max: Date; + min: Date; + max: Date; } interface GraphYRange { - min: number; - max: number; + min: number; + max: number; } interface GraphPathRange { - x: GraphXRange; - y: GraphYRange; + x: GraphXRange; + y: GraphYRange; } type GraphRange = Partial; type Color = string | Float32Array | number | number[]; -export default function () { - const generateRandomGraphData = (length: number): GraphPoint[] => { - return Array(length) - .fill(0) - .map((_, index) => ({ - date: new Date( - new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index - ), - value: Math.random() * 10, - })); - }; - const POINT_COUNT = 50; - const POINTS = generateRandomGraphData(POINT_COUNT); - const [points, setPoints] = useState(POINTS); - const [isAnimated, setIsAnimated] = useState(true); - const [enablePanGesture, setEnablePanGesture] = useState(false); - - const color = "#dd4400"; - - return ( - - +export default function() { + const generateRandomGraphData=(length: number): GraphPoint[]=>{ + return Array(length) + .fill(0) + .map((_, index) => ({ + date: new Date( + new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index + ), + value: Math.random()*10, + })) + } + const POINT_COUNT=50 + const POINTS = generateRandomGraphData(POINT_COUNT) + const [points, setPoints] = useState(POINTS) + const [isAnimated, setIsAnimated] = useState(true) + const [enablePanGesture, setEnablePanGesture] = useState(false) + + const color='#dd4400' + + + return ( + + {`enablePanGesture value is ${enablePanGesture}`} - -