From 6b089420cc60e82fa26a5b606797e01ebcc5342b Mon Sep 17 00:00:00 2001 From: lizhien52O Date: Thu, 2 Jan 2025 09:54:38 +0800 Subject: [PATCH 01/40] docs: [Issues: #IBDWTP] gorhom-bottom-sheet.md --- en/gorhom-bottom-sheet.md | 124 +++++++++++++++++++------------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/en/gorhom-bottom-sheet.md b/en/gorhom-bottom-sheet.md index a9d1a3f7..dc155e4e 100644 --- a/en/gorhom-bottom-sheet.md +++ b/en/gorhom-bottom-sheet.md @@ -16,7 +16,7 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-library/bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-bottom-sheet/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. +Find the matching version information in the release address of a third-party library: [@react-native-oh-library/bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-bottom-sheet/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. @@ -157,13 +157,13 @@ export default App; ## Use Codegen -If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link -The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated、@react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated and @react-native-oh-tpl/react-native-gesture-handler.If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. -If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated docs](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler docs](/zh-cn/react-native-gesture-handler.md) to add it to your project. +If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated docs](/en/react-native-reanimated.md) and [@react-native-oh-tpl/react-native-gesture-handler docs](/en/react-native-gesture-handler.md) to add it to your project. ## Constraints @@ -171,7 +171,7 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- This document is verified based on the following versions: -1.RNOH: 0.72.29; SDK: HarmonyOS-Next-DB1 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: 5.0.0.61; +1. RNOH: 0.72.29; SDK: HarmonyOS-Next-DB1 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: 5.0.0.61; ## Properties @@ -183,47 +183,47 @@ This document is verified based on the following versions: #### Configuration -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | ------------- | ----------------- | -| index | Initial snap index. You also could provide -1 to initiate bottom sheet in closed state. | number | No | Android / iOS | Yes | -| snapPoints | Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. | Array\| SharedValue> | Yes | Android / iOS | Yes | -| overDragResistanceFactor | Defines how violently sheet has to be stopped while over dragging. | number | No | Android / iOS | Yes | -| detached | Defines whether the bottom sheet is attached to the bottom or no. | boolean | No | Android / iOS | Yes | -| enableContentPanningGesture | Enable content panning gesture interaction. | boolean | No | Android / iOS | Yes | -| enableHandlePanningGesture | Enable handle panning gesture interaction. | boolean | No | Android / iOS | Yes | -| enableOverDrag | Enable over drag for the sheet. | boolean | No | Android / iOS | Yes | -| enablePanDownToClose | Enable pan down gesture to close the sheet. | boolean | No | Android / iOS | Yes | -| enableDynamicSizing | Enable dynamic sizing for content view and scrollable content size. | boolean | No | Android / iOS | Yes | -| animateOnMount | This will initially mount the sheet closed and when it's mounted and calculated the layout, it will snap to initial snap point index. | boolean | No | Android / iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ------------- | ----------------- | +| index | Initial snap index. You also could provide -1 to initiate bottom sheet in closed state. | number | No | Android/iOS| Yes | +| snapPoints | Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. | Array\| SharedValue> | Yes | Android/iOS| Yes | +| overDragResistanceFactor | Defines how violently sheet has to be stopped while over dragging. | number | No | Android/iOS| Yes | +| detached | Defines whether the bottom sheet is attached to the bottom or no. | boolean | No | Android/iOS| Yes | +| enableContentPanningGesture | Enable content panning gesture interaction. | boolean | No | Android/iOS| Yes | +| enableHandlePanningGesture | Enable handle panning gesture interaction. | boolean | No | Android/iOS| Yes | +| enableOverDrag | Enable over drag for the sheet. | boolean | No | Android/iOS| Yes | +| enablePanDownToClose | Enable pan down gesture to close the sheet. | boolean | No | Android/iOS| Yes | +| enableDynamicSizing | Enable dynamic sizing for content view and scrollable content size. | boolean | No | Android/iOS| Yes | +| animateOnMount | This will initially mount the sheet closed and when it's mounted and calculated the layout, it will snap to initial snap point index. | boolean | No | Android/iOS| Yes | #### Styles -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | -------- | ------------- | ----------------- | -| style | View style to be applied at the sheet container, it also could be an AnimatedStyle. This is helpful to add shadow to the sheet. | ViewStyle \| AnimatedStyle | No | Android / iOS | Yes | -| backgroundStyle | View style to be applied to the background component. | ViewStyle | No | Android / iOS | Yes | -| handleStyle | View style to be applied to the handle indicator component. | ViewStyle | No | Android / iOS | Yes | -| handleIndicatorStyle | View style to be applied to the handle indicator component. | ViewStyle | No | Android / iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | -------------------------- | -------- | ------------- | ----------------- | +| style | View style to be applied at the sheet container, it also could be an AnimatedStyle. This is helpful to add shadow to the sheet. | ViewStyle \| AnimatedStyle | No | Android/iOS| Yes | +| backgroundStyle | View style to be applied to the background component. | ViewStyle | No | Android/iOS| Yes | +| handleStyle | View style to be applied to the handle indicator component. | ViewStyle | No | Android/iOS| Yes | +| handleIndicatorStyle | View style to be applied to the handle indicator component. | ViewStyle | No | Android/iOS| Yes | #### Layout Configuration -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- | ------------- | ----------------- | -| handleHeight | Handle height helps to calculate the internal container and sheet layouts. If handleComponent is provided, the library internally will calculate its layout, unless handleHeight is provided too. | number | No | Android / iOS | Yes | -| containerHeight | Container height helps to calculate the internal sheet layouts. If containerHeight not provided, the library internally will calculate it, however this will cause an extra re-rendering. | number | No | Android / iOS | Yes | -| contentHeight | Content height helps dynamic snap points calculation. | number \| Animated.SharedValue\ | No | Android / iOS | Yes | -| containerOffset | Container offset helps to accurately detect container offsets. | Animated.SharedValue\ | No | Android / iOS | Yes | -| topInset | Top inset to be added to the bottom sheet container, usually it comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea. | number | No | Android / iOS | Yes | -| bottomInset | Bottom inset to be added to the bottom sheet container. | number | No | Android / iOS | Yes | -| maxDynamicContentSize | Max dynamic content size height to limit the bottom sheet height from exceeding a provided size. | number | No | Android / iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | --------------------------------------- | -------- | ------------- | ----------------- | +| handleHeight | Handle height helps to calculate the internal container and sheet layouts. If handleComponent is provided, the library internally will calculate its layout, unless handleHeight is provided too. | number | No | Android/iOS| Yes | +| containerHeight | Container height helps to calculate the internal sheet layouts. If containerHeight not provided, the library internally will calculate it, however this will cause an extra re-rendering. | number | No | Android/iOS| Yes | +| contentHeight | Content height helps dynamic snap points calculation. | number \| Animated.SharedValue\ | No | Android/iOS| Yes | +| containerOffset | Container offset helps to accurately detect container offsets. | Animated.SharedValue\ | No | Android/iOS| Yes | +| topInset | Top inset to be added to the bottom sheet container, usually it comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea. | number | No | Android/iOS| Yes | +| bottomInset | Bottom inset to be added to the bottom sheet container. | number | No | Android/iOS| Yes | +| maxDynamicContentSize | Max dynamic content size height to limit the bottom sheet height from exceeding a provided size. | number | No | Android/iOS| Yes | #### Keyboard Configuration -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | -------- | ------------- | ----------------- | -| keyboardBehavior | Defines the keyboard appearance behavior;`extend:` extend the sheet to its maximum snap point;`fillParent:` extend the sheet to fill the parent view;`interactive: `offset the sheet by the size of the keyboard. | 'extend' \| 'fillParent' \| 'interactive' | No | Android / iOS | Yes | -| keyboardBlurBehavior | Defines the keyboard blur behavior;none: do nothing;restore: restore sheet position | 'none' \| 'restore' | No | Android / iOS | Yes | -| android_keyboardInputMode | Defines keyboard input mode for Android only. | 'adjustPan' \| 'adjustResize' | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- | ------------- | ----------------- | +| keyboardBehavior | Defines the keyboard appearance behavior;`extend:` extend the sheet to its maximum snap point;`fillParent:` extend the sheet to fill the parent view;`interactive: `offset the sheet by the size of the keyboard. | 'extend' \| 'fillParent' \| 'interactive' | No | Android/iOS| Yes | +| keyboardBlurBehavior | Defines the keyboard blur behavior;none: do nothing;restore: restore sheet position | 'none' \| 'restore' | No | Android/iOS| Yes | +| android_keyboardInputMode | Defines keyboard input mode for Android only. | 'adjustPan' \| 'adjustResize' | No | Android | No | #### Animation Configuration @@ -233,21 +233,21 @@ This document is verified based on the following versions: #### Gesture Configuration -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -------- | ----------- | ----------------- | -| waitFor | - | React.Ref \| React.Ref[] | No | Android/iOS | Yes | -| simultaneousHandlers | - | React.Ref \| React.Ref[] | No | Android/iOS | Yes | -| activeOffsetX | - | number[] | No | Android/iOS | Yes | -| activeOffsetY | - | number[] | No | Android/iOS | Yes | -| failOffsetX | - | number[] | No | Android/iOS | Yes | -| failOffsetY | - | number[] | No | Android/iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ----------------------------- | -------- | ----------- | ----------------- | +| waitFor | - | React.Ref \| React.Ref[] | No | Android/iOS | Yes | +| simultaneousHandlers | - | React.Ref \| React.Ref[] | No | Android/iOS | Yes | +| activeOffsetX | - | number[] | No | Android/iOS | Yes | +| activeOffsetY | - | number[] | No | Android/iOS | Yes | +| failOffsetX | - | number[] | No | Android/iOS | Yes | +| failOffsetY | - | number[] | No | Android/iOS | Yes | | gestureEventsHandlersHook | Custom hook to provide pan gesture events handler, which will allow advance and customize handling for pan gesture. | GestureEventsHandlersHookType | No | Android/iOS | Yes | #### Animated Nodes -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ------------------------------------------------------------------------- | ----------------------------- | -------- | ----------- | ----------------- | -| animatedIndex | Animated value to be used as a callback for the index node internally. | Animated.SharedValue\ | No | Android/iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | ----------------------------- | -------- | ----------- | ----------------- | +| animatedIndex | Animated value to be used as a callback for the index node internally. | Animated.SharedValue\ | No | Android/iOS | Yes | | animatedPosition | Animated value to be used as a callback for the position node internally. | Animated.SharedValue\ | No | Android/iOS | Yes | #### Callbacks @@ -259,29 +259,29 @@ This document is verified based on the following versions: #### Components -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | -------- | ----------- | ----------------- | -| handleComponent | Component to be placed as a sheet handle. | React.FC\ | No | Android/iOS | Yes | -| backdropComponent | Component to be placed as a sheet backdrop, by default is set to null, however the library also provide a default implementation BottomSheetBackdrop of a backdrop but you will need to provide it manually. | React.FC\ | No | Android/iOS | Yes | -| backgroundComponent | Component to be placed as a sheet background. | React.FC\ | No | Android/iOS | Yes | -| footerComponent | Component to be placed as a sheet footer. | React.FC\ | No | Android/iOS | Yes | -| children | Scrollable node or react node to be places as a sheet content. | () => React.ReactNode \| React.ReactNode[] \| React.ReactNode | No | Android/iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| handleComponent | Component to be placed as a sheet handle. | React.FC\ | No | Android/iOS | Yes | +| backdropComponent | Component to be placed as a sheet backdrop, by default is set to null, however the library also provide a default implementation BottomSheetBackdrop of a backdrop but you will need to provide it manually. | React.FC\ | No | Android/iOS | Yes | +| backgroundComponent | Component to be placed as a sheet background. | React.FC\ | No | Android/iOS | Yes | +| footerComponent | Component to be placed as a sheet footer. | React.FC\ | No | Android/iOS | Yes | +| children | Scrollable node or react node to be places as a sheet content. | () => React.ReactNode \| React.ReactNode[] \| React.ReactNode | No | Android/iOS | Yes | ### Bottom Sheet Modal > [!Tip]Bottom Sheet Modal inherits all [Bottom Sheet props](https://ui.gorhom.dev/components/bottom-sheet/props) except for animateOnMount & containerHeight and also it introduces its own props -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- | ----------- | ----------------- | -| name | Modal name to help identify the modal for later on. | string | No | Android/iOS | Yes | -| stackBehavior | Defines the stack behavior when modal mounts. | 'push' \| 'replace' | No | Android/iOS | Yes | -| enableDismissOnClose | Dismiss the modal when it is closed, this will unmount the modal. | boolean | No | Android/iOS | Yes | -| onDismiss | Callback when the modal dismissed (unmounted). | function | No | Android/iOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ------------------- | -------- | ----------- | ----------------- | +| name | Modal name to help identify the modal for later on. | string | No | Android/iOS | Yes | +| stackBehavior | Defines the stack behavior when modal mounts. | 'push' \| 'replace' | No | Android/iOS | Yes | +| enableDismissOnClose | Dismiss the modal when it is closed, this will unmount the modal. | boolean | No | Android/iOS | Yes | +| onDismiss | Callback when the modal dismissed (unmounted). | function | No | Android/iOS | Yes | | containerComponent | Component to be placed as a bottom sheet container, this is to place the bottom sheet at the very top layer of your application when using FullWindowOverlay from React Native Screens. | React.ReactNode | No | Android/iOS | Yes | ## Known Issues -- [ ] BottomSheetFlatList 组件手势滑动存在冲突 [issue#6](https://github.com/react-native-oh-library/react-native-bottom-sheet/issues/6) +- [ ] BottomSheetFlatList swipe gesture conflicts: [issue#6](https://github.com/react-native-oh-library/react-native-bottom-sheet/issues/6) ## Others -- Gitee From f8ac6d6a408d5fb0a5fc669ff13d7630fbcbd5d2 Mon Sep 17 00:00:00 2001 From: lizhien52O Date: Thu, 2 Jan 2025 09:54:54 +0800 Subject: [PATCH 02/40] docs: [Issues: #IBDWTP] react-native-animatable.md --- en/react-native-animatable.md | 46 +++++++++++++++++------------------ 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/en/react-native-animatable.md b/en/react-native-animatable.md index b5fd5444..37afce03 100644 --- a/en/react-native-animatable.md +++ b/en/react-native-animatable.md @@ -96,7 +96,7 @@ export default function ExampleView() { console.log("test onTransitionEnd"); }} > - O(∩_∩)O哈哈~ + O(∩_∩)O @@ -112,31 +112,31 @@ To use this repository, you need to use the correct React-Native and RNOH versio This document is verified based on the following versions: -1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1 B.0.18； IDE: DevEco Studio 5.0.3.200; ROM: 2.0.0.18; -2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 2.0.0.18; +2. RNOH: 0.72.33; SDK: OpenHarmony 5.0.0.71 (API Version 12 Release); IDE: DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71; ## Properties -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. - -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- | -------- | ----------------- | -| animation | 动画的名称，请参见下面的可用动画 | string/undefined | / | all | yes | -| duration | 动画将运行的时间（毫秒） | number/undefined | / | all | yes | -| delay | （可选）延迟动画（毫秒） | number/undefined | / | all | yes | -| direction | 动画的方向，特别适用于重复动画。有效值: 正常、反向、交替、交替反向 | string/undefined | / | all | yes | -| easing | 动画的计时功能。有效值: 自定义函数或线性、易进、易出、易入 | string/undefined | / | all | yes | -| iterationCount | 运行动画的次数，对于循环动画使用无穷大。 | number/undefined | / | all | yes | -| iterationDelay | 关于动画迭代之间的暂停时间（毫秒） | number/undefined | / | all | yes | -| transition | 要转换的样式属性，例如不透明度、旋转或字体大小。对多个属性使用数组。 | string/array/undefined | / | all | yes | -| onAnimationBegin | 启动动画时调用的函数。 | Function/undefined | / | all | yes | -| onAnimationEnd | 当动画成功完成或取消时调用的函数。函数是用 endState 参数调用的，请参阅 endState.finished 以查看动画是否已完成。 | Function/undefined | / | all | yes | -| onTransitionBegin | 在样式转换开始时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | / | all | yes | -| onTransitionEnd | 当样式转换成功完成或取消时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | / | all | yes | -| useNativeDriver | 是否使用本机或 JavaScript 动画驱动程序。本机驱动程序可以帮助提高性能，但不能处理所有类型的样式。 | Function/undefined | / | all | yes | -| isInteraction | 此动画是否在交互管理器上创建“交互控制柄”。 | Boolean | / | all | yes | +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | ---------------------- | -------- | -------- | ----------------- | +| animation | Animation name. For details, see the following available animations. | string/undefined | / | all | yes | +| duration | Animation duration, in milliseconds. | number/undefined | / | all | yes | +| delay | (Optional) Animation delay, in milliseconds. | number/undefined | / | all | yes | +| direction | Animation direction, particularly suitable for animation repeating. Valid values are **normal**, **reverse**, **alternate**, and **alternate-reverse**.| string/undefined | / | all | yes | +| easing | Easing function. Valid values are **custom**, **linear**, **ease-in**, **ease-out**, and **ease-in-out**. | string/undefined | / | all | yes | +| iterationCount | Number of times an animation should be played. Set it to **infinite** for animations to be looped. | number/undefined | / | all | yes | +| iterationDelay | Time between animation iterations, in milliseconds. | number/undefined | / | all | yes | +| transition | Style property to be converted, such as opacity, rotation, or font size. Use an array if there are multiple properties to be converted.| string/array/undefined | / | all | yes | +| onAnimationBegin | Function called when the animation is started. | Function/undefined | / | all | yes | +| onAnimationEnd | Function called when the animation is successfully completed or canceled. The function is called with the **endState** parameter. Check **endState.finished** to see if the animation is complete.| Function/undefined | / | all | yes | +| onTransitionBegin | Function called when the style conversion starts. Use property parameters to call functions to distinguish styles.| Function/undefined | / | all | yes | +| onTransitionEnd | Function called when the style conversion is successfully completed or canceled. Use property parameters to call functions to distinguish styles.| Function/undefined | / | all | yes | +| useNativeDriver | Whether to use the native or JavaScript animation driver. The native driver can help improve performance, but cannot handle all types of styles.| Function/undefined | / | all | yes | +| isInteraction | Whether the animation creates an interaction handle on the interaction manager. | Boolean | / | all | yes | ## Others -- Gitee From d68a5b3b4a03ee41ec2207a3c17775b3d83e7393 Mon Sep 17 00:00:00 2001 From: lizhien52O Date: Thu, 2 Jan 2025 09:55:05 +0800 Subject: [PATCH 03/40] docs: [Issues: #IBDWTP] react-native-apple-authentication.md --- en/react-native-apple-authentication.md | 50 ++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/en/react-native-apple-authentication.md b/en/react-native-apple-authentication.md index c14e9ac7..85ee5581 100644 --- a/en/react-native-apple-authentication.md +++ b/en/react-native-apple-authentication.md @@ -16,7 +16,7 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-apple-authentication Releases](https://github.com/react-native-oh-library/react-native-apple-authentication/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. +Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-apple-authentication Releases](https://github.com/react-native-oh-library/react-native-apple-authentication/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. Go to the project directory and execute the following instruction: @@ -36,13 +36,13 @@ npm install @react-native-oh-tpl/react-native-apple-authentication yarn add @react-native-oh-tpl/react-native-apple-authentication ``` -#### **配置用于 Web 的“通过 Apple 登录”** +#### **Configuring Sign in with Apple for the Web** -首先需要进行客户端 id 配置: [Initial Development Environment Setup](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/INITIAL_SETUP.md) +Configure the client ID: [Initial Development Environment Setup](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/INITIAL_SETUP.md). -然后需要进行服务设置: [Services setup](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/ANDROID_EXTRA.md) +Set the service: [Services setup](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/ANDROID_EXTRA.md). -Apple 官方配置说明: [Configure Sign in with Apple for the web](https://developer.apple.com/help/account/configure-app-capabilities/configure-sign-in-with-apple-for-the-web) +Configure the official Apple description: [Configure Sign in with Apple for the web](https://developer.apple.com/help/account/configure-app-capabilities/configure-sign-in-with-apple-for-the-web) @@ -82,7 +82,7 @@ export default AppleAuthenticationDemo; ## Use Codegen -If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link @@ -129,7 +129,7 @@ ohpm install Method 2: Directly link to the source code. -> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). +> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). ### 3. Introducing RNAppleAuthPackage to ArkTS @@ -166,7 +166,7 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-apple-authentication Releases](https://github.com/react-native-oh-library/react-native-apple-authentication/releases)。 +Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-apple-authentication Releases](https://github.com/react-native-oh-library/react-native-apple-authentication/releases). ## Properties @@ -174,18 +174,18 @@ Check the release version information in the release address of the third-party > [!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. -**AppleButton**: Apple 身份验证按钮组件。 +**AppleButton**: Apple authentication button -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | -| style | 按钮样式 | StyleProp< [ViewStyle](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Fview%23props) > | no | all | yes | -| textStyle | 按钮内文字样式 | StyleProp< [TextStyle](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Ftext%23props) > | no | all | yes | -| cornerRadius | 按钮边框圆角弧度 | number | no | all | yes | -| buttonStyle | 按钮样式(预设枚举) | [AppleButtonStyle](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Finvertase%2Freact-native-apple-authentication%2Fblob%2Fmain%2Ftypedocs%2Fenums%2FAppleButtonStyle.md) | no | all | yes | -| buttonType | 按钮类型(预设枚举) | [AppleButtonType](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Finvertase%2Freact-native-apple-authentication%2Fblob%2Fmain%2Ftypedocs%2Fenums%2FAppleButtonType.md) | no | all | yes | -| onPress | 按钮点击事件 | () => void | yes | all | yes | -| leftView | 按钮内左侧图标 | ReactNode | no | all | yes | -| buttonText | 按钮内文字内容 | string | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| style | Button style. | StyleProp< [ViewStyle](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Fview%23props) > | no | all | yes | +| textStyle | Text style. | StyleProp< [TextStyle](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Ftext%23props) > | no | all | yes | +| cornerRadius | Corner radius of the border. | number | no | all | yes | +| buttonStyle | Button style (preset enumeration).| [AppleButtonStyle](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Finvertase%2Freact-native-apple-authentication%2Fblob%2Fmain%2Ftypedocs%2Fenums%2FAppleButtonStyle.md) | no | all | yes | +| buttonType | Button type (preset enumeration).| [AppleButtonType](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Finvertase%2Freact-native-apple-authentication%2Fblob%2Fmain%2Ftypedocs%2Fenums%2FAppleButtonType.md) | no | all | yes | +| onPress | Touch event. | () => void | yes | all | yes | +| leftView | Left icon of the button. | ReactNode | no | all | yes | +| buttonText | Button text. | string | no | all | yes | ## API @@ -193,18 +193,18 @@ Check the release version information in the release address of the third-party > [!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. -**appleAuthHarmony**: Apple 身份验证对象，包含 2 个方法。 +**appleAuthHarmony**: Apple authentication object, including two methods -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | -| configure | 配置 Apple 身份验证的信息，此接口必须在 signIn 之前调用 | ([Config](https://github.com/invertase/react-native-apple-authentication/blob/main/typedocs/interfaces/AndroidConfig.md)) => void | no | all | yes | -| signIn | 弹出 webview 以进行 Apple 身份验证 | () => Promise< [SigninResponse](https://github.com/invertase/react-native-apple-authentication/blob/main/typedocs/interfaces/AndroidSigninResponse.md) > | no | all | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------- | ------------------------------------------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| configure | Configures Apple authentication information. This API must be called before **signIn**.| ([Config](https://github.com/invertase/react-native-apple-authentication/blob/main/typedocs/interfaces/AndroidConfig.md)) => void | no | all | yes | +| signIn | Pops up the WebView for Apple authentication. | () => Promise< [SigninResponse](https://github.com/invertase/react-native-apple-authentication/blob/main/typedocs/interfaces/AndroidSigninResponse.md) > | no | all | no | ## Others ## Known Issues -- [ ] 由于 Apple 开发者账户验证问题，HarmonyOS 暂无法实现的接口: [issue#1](https://github.com/react-native-oh-library/react-native-apple-authentication/issues/1) +- [ ] Due to Apple developer account authentication issues, the following API is not supported by HarmonyOS: [issue#1](https://github.com/react-native-oh-library/react-native-apple-authentication/issues/1). ## License -- Gitee From 51183b71a18a4c57738b232d2a93799706eb4757 Mon Sep 17 00:00:00 2001 From: lizhien52O Date: Thu, 2 Jan 2025 09:55:15 +0800 Subject: [PATCH 04/40] docs: [Issues: #IBDWTP] react-native-background-timer.md --- en/react-native-background-timer.md | 61 +++++++++++++---------------- 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/en/react-native-background-timer.md b/en/react-native-background-timer.md index f60b2495..2039ce45 100644 --- a/en/react-native-background-timer.md +++ b/en/react-native-background-timer.md @@ -8,10 +8,10 @@ This project is based on [react-native-background-timer@2.4.1](https://github.co 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/react-native-linear-gradient`, The version correspondence details are as follows: -| Version | Package Name | Repository | Release | -| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | +| Version | Package Name | Repository | Release | +| ------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | <= 2.4.1-0.0.2@deprecated | @react-native-oh-tpl/react-native-background-timer | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-background-timer) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-background-timer/releases) | -| > 2.4.2 | @react-native-ohos/react-native-background-timer | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-background-timer) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-background-timer/releases) | +| > 2.4.2 | @react-native-ohos/react-native-background-timer | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-background-timer) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-background-timer/releases) | ## 1. Installation and Usage @@ -44,37 +44,34 @@ import BackgroundTimer from "react-native-background-timer"; export function BackgroundTimerExample() { let [count, setCount] = useState(0); let [text, setText] = useState(""); - // BackgroundTimer延时 let [delay, setDelay] = useState("1000"); - // setTimeout延时 let [timeoutDelay, setTimeoutDelay] = useState("1000"); - // setInterval延时 let [intervalDelay, setIntervalDelay] = useState("1000"); let timeoutList:number[] = [] let [intervalList, setIntervalList] = useState([]); - + // runBackgroundTimer function onPressStart(){ - setText("开启定时器...") + setText("Turn on the timer...") BackgroundTimer.runBackgroundTimer(()=>{ setCount(count+=1) },parseInt(delay)) } function onPressStop(){ - setText("结束定时器") + setText("Turn off the timer") BackgroundTimer.stopBackgroundTimer() } // setTimeout function setTimeoutStart(){ - setText("开启定时器...") + setText("Turn on the timer...") let timeoutId = BackgroundTimer.setTimeout(()=>{ setCount(count+=1) },parseInt(timeoutDelay)) timeoutList.push(timeoutId) } function setTimeoutStop(){ - setText("结束定时器") + setText("Turn off the timer") if(timeoutList.length>0){ BackgroundTimer.clearTimeout(timeoutList[0]) timeoutList.shift() @@ -83,14 +80,14 @@ export function BackgroundTimerExample() { // setInterval function setIntervalStart(){ - setText("开启定时器...") + setText("Turn on the timer...") let intervalId = BackgroundTimer.setInterval(()=>{ setCount(count+=1) },parseInt(intervalDelay)) setIntervalList([...intervalList,intervalId]) } function setIntervalStop(){ - setText("结束定时器") + setText("Turn off the timer") if(intervalList.length>0){ BackgroundTimer.clearInterval(intervalList[0]) intervalList.shift() @@ -110,7 +107,7 @@ export function BackgroundTimerExample() { /> {setDelay(value)}} value={delay} /> @@ -122,7 +119,7 @@ export function BackgroundTimerExample() { /> - +