diff --git a/en/react-native-aria.md b/en/react-native-aria.md index 1f56e006e9372b97bf1e7a4c2c86611f0729c803..59aa6401a22b4c12eafd1de90d72f9f112fb2b11 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,32 +12,34 @@

-> [!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 +> [!TIP] This library is no longer maintained. If you encounter missing modules when running the project after executing the general package command, you need to uninstall the old packages and add `--legacy-peer-deps` to the command, then download the package files again. -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** ```bash -yarn add react-native-aria@0.2.3 +yarn add react-native-aria@0.2.4 ``` - - #### **npm** ```bash -npm install react-native-aria@0.2.3 +npm install react-native-aria@0.2.4 ``` - - -除了总包之外，我们还提供了一些单独包，如：@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 +47,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 +76,7 @@ export function ToggleButton(props: any) { padding: 5, width: 100, height: 30, justifyContent: 'center', alignItems: 'center' }} > - 点击切换 + Click to toggle ); @@ -90,7 +86,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 +98,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 +115,7 @@ export function CheckboxGroup(props: any) { {children} - 已经选择：{props.value.map(i=>{ + Selected：{props.value.map(i=>{ return {findName(i)} })} @@ -177,7 +173,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 +184,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 +207,7 @@ export function RadioGroup(props: any) { > {children} - 已经选择：{findName(state.selectedValue as string)} + Selected：{findName(state.selectedValue as string)} ); } @@ -250,7 +246,7 @@ export default RadioExample ``` -下面的代码展示了useSwitch的基本使用场景： +The following code demonstrates the basic usage scenario of useSwitch: ```javascript import { useToggleState } from "@react-stately/toggle"; @@ -368,7 +364,7 @@ export function Switch(origProps: any) { {icon} - {isOn ? "开" : "关"} + {isOn ? "On" : "Off"} ); } @@ -403,7 +399,7 @@ export default ControlledSwitch ``` -下面的代码展示了useOverlayPosition的基本使用场景： +The following code demonstrates the basic usage scenario of useOverlayPosition: ```javascript import React from "react"; @@ -494,7 +490,7 @@ export function Trigger({ placement }: any) { paddingVertical: 10, }} > - 点我一下 + Click me @@ -511,40 +507,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-autocomplete-input.md b/en/react-native-autocomplete-input.md index 6336220c8a5abd1da95f727cd199e47a3ef12fab..6c1563385b6f9c689abba1ed7987c3e62496ab9d 100644 --- a/en/react-native-autocomplete-input.md +++ b/en/react-native-autocomplete-input.md @@ -16,6 +16,11 @@ > [!TIP] [ GitHub address](https://github.com/byteburgers/react-native-autocomplete-input) ## Installation and Usage +Please check the corresponding version information in the third-party library's Releases: + +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------- | -------------------- | +| 5.5.6 | [react-native-autocomplete-input release](https://github.com/byteburgers/react-native-autocomplete-input/releases) | 0.72/0.77 | @@ -164,9 +169,12 @@ export default App; ### Compatibility -This document is verified based on the following versions: +To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. + +Verified in the following versions: -RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +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; ## Properties diff --git a/en/react-native-community-toolbar-android.md b/en/react-native-community-toolbar-android.md index 78e9550c797c31cd311f571c3d53970b766daa34..23e38707ceedb99215f1db908e223d205308947f 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,26 +6,26 @@ 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) | +| Version | Package Name | Repository | Release | Supported RN Version | +|-----------------|-----|--------|----------------------------------- | ------------------ | +| 0.2.1 | @react-native-oh-tpl/toolbar-android| [Github(deprecated)](https://github.com/react-native-oh-library/toolbar-android)| [@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 | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_toolbar-android/tree/master)| [@react-native-ohos/toolbar-android Releases](https://gitcode.com/openharmony-sig/rntpc_toolbar-android/releases) | 0.72/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 npm install @react-native-ohos/toolbar-android ``` -#### yarn +#### **yarn** ```bash yarn add @react-native-ohos/toolbar-android @@ -33,9 +33,9 @@ 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 +114,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 +156,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 +205,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 +221,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 +236,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 +260,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-ffmpeg-kit.md b/en/react-native-ffmpeg-kit.md new file mode 100644 index 0000000000000000000000000000000000000000..d3400b3371edc795f93b84a0534ef4760c842a1f --- /dev/null +++ b/en/react-native-ffmpeg-kit.md @@ -0,0 +1,505 @@ +> Template Version: v0.2.2 + +

+

react-native-ffmpeg-kit

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github Address](https://github.com/react-native-oh-library/ffmpeg-kit) + +## Installation & Usage +| Third-party Library Version | Release Information | Supported RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 6.0.3 | [@react-native-oh-tpl/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 +| 6.1.0 | [@react-native-ohos/react-native-ffmpeg-kit release](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.77 + +Navigate to your project directory and run the following commands: + +#### **npm** + +```bash +#0.72 +npm install @react-native-oh-tpl/react-native-ffmpeg-kit +#0.77 +npm install @react-native-ohos/react-native-ffmpeg-kit +``` + +#### **yarn** + +```bash +#0.72 +yarn add @react-native-oh-tpl/react-native-ffmpeg-kit +#0.77 +yarn add @react-native-ohos/react-native-ffmpeg-kit +``` + +The following code demonstrates basic usage scenarios of this library: + +> [!WARNING] The import library name remains unchanged when using. + +```js +import React from 'react'; +import {ScrollView, Text, TextInput, TouchableOpacity, View} from 'react-native'; +import { + FFmpegKit, + FFmpegKitConfig, + FFprobeSession, + Level, + LogRedirectionStrategy, + SessionState +} from "ffmpeg-kit-react-native"; + +export default class CommandTab extends React.Component { + constructor(props) { + super(props); + + this.state = { + commandText: '', outputText: '' + }; + } + + componentDidMount() { + this.props.navigation.addListener('focus', (_) => { + this.clearOutput(); + this.setActive(); + }); + } + + setActive() { + console.log("Command Tab Activated"); + FFmpegKitConfig.enableLogCallback(undefined); + FFmpegKitConfig.enableStatisticsCallback(undefined); + } + + appendOutput(logMessage) { + this.setState({outputText: this.state.outputText + logMessage}); + }; + + clearOutput() { + this.setState({outputText: ''}); + } + + runFFmpeg = () => { + this.clearOutput(); + + let ffmpegCommand = this.state.commandText; + + FFmpegKit.execute(ffmpegCommand).then(async (session) => { + const state = FFmpegKitConfig.sessionStateToString(await session.getState()); + const returnCode = await session.getReturnCode(); + const failStackTrace = await session.getFailStackTrace(); + const output = await session.getOutput(); + + this.appendOutput(output); + + if (state === SessionState.FAILED || !returnCode.isValueSuccess()) { + console.log("Command failed. Please check output for the details."); + } + }); + }; + + runFFprobe = () => { + this.clearOutput(); + + let ffprobeCommand = this.state.commandText;- + FFprobeSession.create(FFmpegKitConfig.parseArguments(ffprobeCommand), async (session) => { + const state = FFmpegKitConfig.sessionStateToString(await session.getState()); + const returnCode = await session.getReturnCode(); + const failStackTrace = await session.getFailStackTrace(); + session.getOutput().then(output => this.appendOutput(output)); + + + if (state === SessionState.FAILED || !returnCode.isValueSuccess()) { + console.log("Command failed. Please check output for the details."); + } + + }, undefined, LogRedirectionStrategy.NEVER_PRINT_LOGS).then(session => { + FFmpegKitConfig.asyncFFprobeExecute(session); + }); + }; + + render() { + return ( + + + FFmpegKit ReactNative + + + + this.setState({commandText})} + value={this.state.commandText} + /> + + + + RUN FFMPEG + + + + + RUN FFPROBE + + + + { + this.scrollViewReference = view; + }} + onContentSizeChange={(width, height) => this.scrollViewReference.scrollTo({y: height})} + style={styles.outputScrollViewStyle}> + {this.state.outputText} + + + ); + }; + +} + +const styles = StyleSheet.create({ + screenStyle: { + flex: 1, + justifyContent: 'flex-start', + alignItems: 'stretch', + marginTop: Platform.select({ios: 20, android: 0}) + }, + headerViewStyle: { + paddingTop: 16, + paddingBottom: 10, + backgroundColor: '#F46842' + }, + headerTextStyle: { + alignSelf: 'center', + height: 32, + fontSize: 18, + fontWeight: 'bold', + color: '#fff', + borderColor: 'lightgray', + borderRadius: 5, + borderWidth: 0 + }, + buttonViewStyle: { + alignSelf: 'center', + paddingBottom: 20 + }, + buttonStyle: { + justifyContent: 'center', + alignSelf: 'center', + width: 120, + height: 38, + backgroundColor: '#2ecc71', + borderColor: '#27AE60', + borderRadius: 5, + paddingLeft: 10, + paddingRight: 10 + }, + cancelButtonStyle: { + justifyContent: 'center', + width: 100, + height: 38, + backgroundColor: '#c5c5c5', + borderRadius: 5 + }, + buttonTextStyle: { + textAlign: 'center', + fontSize: 14, + fontWeight: 'bold', + color: '#fff' + }, + videoPlayerViewStyle: { + backgroundColor: '#ECF0F1', + borderColor: '#B9C3C7', + borderRadius: 5, + borderWidth: 1, + height: window.height - 310, + width: window.width - 40, + marginVertical: 20, + marginHorizontal: 20 + }, + halfSizeVideoPlayerViewStyle: { + backgroundColor: '#ECF0F1', + borderColor: '#B9C3C7', + borderRadius: 5, + borderWidth: 1, + height: (window.height - 250) / 2, + width: window.width - 40, + marginVertical: 20, + marginHorizontal: 20 + }, + outputViewStyle: { + padding: 20, + flex: 1, + justifyContent: 'flex-start', + alignItems: 'stretch' + }, + outputScrollViewStyle: { + padding: 4, + backgroundColor: '#f1c40f', + borderColor: '#f39c12', + borderRadius: 5, + borderWidth: 1 + }, + outputTextStyle: { + color: 'black' + }, + textInputViewStyle: { + paddingTop: 40, + paddingBottom: 40, + paddingRight: 20, + paddingLeft: 20 + }, + textInputStyle: { + height: 36, + fontSize: 12, + borderColor: '#3498db', + borderRadius: 5, + borderWidth: 1 + } +}); + +``` + +## Link + +Currently, HarmonyOS does not support AutoLink, so the Link step needs to be configured manually. + +First, you need to open the HarmonyOS project `harmony` in your project using DevEco Studio. + +### 1. Add the overrides field to `oh-package.json5` in the project root directory + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2. Import native code + +There are currently two methods: + +1. Import via har package (this method will be deprecated after IDE improves related functionality, currently this is the preferred method); +2. Directly link source code. + +Method 1: Import via har package (Recommended) + +> [!TIP] The har package is located in the `harmony` folder of the third-party library installation path. + +Open `entry/oh-package.json5` and add the following dependencies: + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + //0.72 + "@react-native-oh-tpl/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-oh-tpl/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", + //0.77 + "@react-native-ohos/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-ohos/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", + } +``` + +Click the `sync` button in the upper right corner. + +Or execute in the terminal: + +```bash +cd entry +ohpm install +``` + +Method 2: Directly link source code + +> [!TIP] If you need to use direct source code linking, please refer to [Direct Link Source Code Instructions](/en/link-source-code.md) + +### 3. Configure CMakeLists and import GestureHandlerPackage + +Open `entry/src/main/cpp/CMakeLists.txt` and add: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") ++ set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +#0.72 ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) +#0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_ffmpeg_kit) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "FFmpegKitPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Import Gesture Handler Package on ArkTs side + +Open `entry/src/main/ets/RNPackagesFactory.ts` and add: + +```diff +//0.72 ++ import { FFmpegKitPackage } from '@react-native-oh-tpl/react-native-ffmpeg-kit/ts'; +//0.77 ++ import { FFmpegKitPackage } from '@react-native-ohos/react-native-ffmpeg-kit/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new FFmpegKitPackage(ctx), + ]; +} +``` + +### 5. Run + +Click the `sync` button in the upper right corner. + +Or execute in the terminal: + +```bash +cd entry +ohpm install +``` + +Then compile and run. + +## Constraints & Limitations + +### Compatibility + +To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. + +Verified with 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; + +## API + +> [!tip] The "Platform" column indicates the platforms supported by the original third-party library for this property. + +> [!tip] A value of "yes" in the "HarmonyOS Support" column indicates that the property is supported on the HarmonyOS platform; "no" indicates it is not supported; "partially" indicates partial support. The usage method is cross-platform consistent, with effects benchmarked against iOS or Android effects. + +#### FFmpegKit + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| execute | Synchronously executes FFmpeg command provided. Space character is used to split the command into arguments. You can use single or double quote characters to specify arguments inside your command. | Promise | yes | All | yes | +| executeAsync | Starts an asynchronous FFmpeg execution for the given command. Space character is used to split the command into arguments. You can use single or double quote characters to specify arguments inside your command. | Promise | yes | All | yes | +| cancel | Cancels the session specified with `sessionId`. | Promise | yes | All | yes | +| listSessions | Lists all FFmpeg sessions in the session history. | Promise | yes | All | yes | + +#### FFmpegKitConfig + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| enableLogCallback | Sets a global callback to redirect FFmpeg/FFprobe logs. | Promise | yes | All | yes | +| enableStatisticsCallback | Sets a global callback to redirect FFmpeg statistics. | Promise | yes | All | yes | +| enableLogs | Enables logs. | Promise | yes | All | yes | +| sessionStateToString | Returns the string representation of the SessionState provided. | void | yes | All | yes | +| parseArguments | Parses the given command into arguments. Uses space character to split the arguments. Supports single and double quote characters. | void | yes | All | yes | +| asyncFFprobeExecute | Starts an asynchronous FFprobe execution for the given session. | Promise | yes | All | yes | +| getLogLevel | Returns the current log level. | void | yes | All | yes | +| clearSessions | Clears all, including ongoing, sessions in the session history. | Promise | yes | All | yes | +| setSessionHistorySize | Sets the session history size. | Promise | yes | All | yes | +| init | Initializes the library asynchronously. | Promise | yes | All | yes | +| ignoreSignal | Registers a new ignored signal. Ignored signals are not handled by `FFmpegKit` library. | Promise | yes | All | yes | +| setLogLevel | Sets the log level. | Promise | yes | All | yes | +| getPlatform | Returns the platform name the library is loaded on. | Promise | yes | All | yes | +| getFFmpegVersion | Returns the version of FFmpeg bundled within `FFmpegKit` library. | Promise | yes | All | yes | +| getSessions | Returns all sessions in the session history. | Promise | yes | All | yes | +| setFontDirectoryList | Registers the fonts inside the given list of font directories, so they become available to use in FFmpeg filters. | Promise | yes | All | yes | +| setEnvironmentVariable | Sets an environment variable. | Promise | yes | All | yes | + +#### FFprobeSession + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| create | Creates a new FFprobe session. | Promise | yes | All | yes | + +#### ReturnCode + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| isSuccess | Success or not. | boolean | yes | All | yes | +| isCancel | Cancel or not. | boolean | yes | All | yes | + +#### FFprobeKit + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| getMediaInformation | Extracts media information for the file specified with path. | Promise | yes | All | yes | +| listFFprobeSessions | Lists all FFprobe sessions in the session history. | Promise | yes | All | yes | + +#### Packages + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------|-------------|------|----------|----------|-------------------| +| getPackageName | Returns the FFmpegKit ReactNative binary package name. | | | | | | Promise | yes | All | yes | + +## Known Issues + +## Others + +## Open Source License + +This project is based on [The GNU License (GNU)](https://github.com/arthenica/ffmpeg-kit/blob/main/LICENSE), please feel free to enjoy and participate in open source. \ No newline at end of file diff --git a/en/react-native-graph.md b/en/react-native-graph.md index cd61f5cf12a87fe1589ecfd45524fc59f36bd102..d3a522eaacfdfebb603a9319b3709299ec690406 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}`} - -