diff --git a/zh-cn/react-native-bindingx.md b/zh-cn/react-native-bindingx.md index bb9dc17e07ae8f3a01ab2880916790d08747df81..eb958d8b09d1f10814ef51dfcf4be7c62bed0138 100644 --- a/zh-cn/react-native-bindingx.md +++ b/zh-cn/react-native-bindingx.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-bindingx Releases](https://github.com/react-native-oh-library/react-native-bindingx/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [@react-native-oh-tpl/react-native-bindingx Releases](https://github.com/react-native-oh-library/react-native-bindingx/releases) | 0.72 | +| 1.0.4 | [@react-native-ohos/react-native-bindingx Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +#1.0.3 npm install @react-native-oh-tpl/react-native-bindingx + +#1.0.4 +npm install @react-native-ohos/react-native-bindingx ``` #### **yarn** ```bash +#1.0.3 yarn add @react-native-oh-tpl/react-native-bindingx + +#1.0.4 +yarn add @react-native-ohos/react-native-bindingx ``` @@ -183,6 +198,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V1.0.3 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -190,6 +207,15 @@ const styles = StyleSheet.create({ } ``` +- V1.0.4 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-bindingx": "file:../../node_modules/@react-native-ohos/react-native-bindingx/harmony/bindingx.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -225,7 +251,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +#1.0.3 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-bindingx/src/main/cpp" ./bindingx) + +#1.0.4 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-bindingx/src/main/cpp" ./bindingx) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -270,7 +300,10 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... + //1.0.3 + import {ReactBindingXPackage} from '@react-native-oh-tpl/react-native-bindingx/ts'; + //1.0.4 ++ import {ReactBindingXPackage} from '@react-native-ohos/react-native-bindingx/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -299,7 +332,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-bindingx Releases](https://github.com/react-native-oh-library/react-native-bindingx/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [@react-native-oh-tpl/react-native-bindingx Releases](https://github.com/react-native-oh-library/react-native-bindingx/releases) | 0.72 | +| 1.0.4 | [@react-native-ohos/react-native-bindingx Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-drax.md b/zh-cn/react-native-drax.md index bbbf0cbc30273752f18fced0e62e61e930579267..dd29c798a27bf074f12ccb15af6b68d63c1429f0 100644 --- a/zh-cn/react-native-drax.md +++ b/zh-cn/react-native-drax.md @@ -14,13 +14,18 @@ - - > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-drax) ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-drax Releases](https://github.com/react-native-oh-library/react-native-drax/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.10.3 | [@react-native-oh-tpl/react-native-drax Releases](https://github.com/react-native-oh-library/react-native-drax/releases) | 0.72 | +| 0.11.1 | [@react-native-ohos/react-native-drax Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -29,13 +34,21 @@ #### **npm** ```bash +# V0.10.3 npm install @react-native-oh-tpl/react-native-drax + +# V0.11.1 +npm install @react-native-ohos/react-native-drax ``` #### **yarn** ```bash +# V0.10.3 yarn add @react-native-oh-tpl/react-native-drax + +# V0.11.1 +yarn add @react-native-ohos/react-native-drax ``` @@ -129,7 +142,12 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-drax Releases](https://github.com/react-native-oh-library/react-native-drax/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.10.3 | [@react-native-oh-tpl/react-native-drax Releases](https://github.com/react-native-oh-library/react-native-drax/releases) | 0.72 | +| 0.11.1 | [@react-native-ohos/react-native-drax Releases]() | 0.77 | ## 属性 @@ -198,22 +216,39 @@ const styles = StyleSheet.create({ ### DraxList -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | -| data | Data source of the DraxList component | array | no | iOS/Android | Yes | -| flatListStyle | Sets the style of the internal FlatList component | object | no | iOS/Android | Yes | -| itemStyles | Sets the style of an item in the internal FlatList component | object | no | iOS/Android | Yes | -| renderItemContent | Method for Rendering Item Items in the DraxList Component | function | no | iOS/Android | Yes | -| renderItemHoverContent | Method of Rendering Item Snapshots in the DraxList Component | function | no | iOS/Android | Yes | -| onItemDragStart | Callback is executed when an item in the DraxList component starts to be dragged | function | no | iOS/Android | Yes | -| onItemDragPositionChange | Callback is executed when the position of an item in the DraxList component changes | function | no | iOS/Android | Yes | -| onItemDragEnd | Callback when the drag of an item in the DraxList component ends | function | no | iOS/Android | Yes | -| onItemReorder | Callback for recording the moving index position of an item | function | no | iOS/Android | Yes | -| reorderable | Sets whether to enable automatic sorting | boolean | no | iOS/Android | Yes | -| viewPropsExtractor | Props can be returned based on the data of each item | function | no | iOS/Android | Yes | -| onScroll | Sliding event callback method | function | no | iOS/Android | Yes | -| itemsDraggable | Indicates whether items in the FlatList component can be dragged | boolean | no | iOS/Android | Yes | -| lockItemDragsToMainAxis | Indicates whether to lock the drag direction of items in the FlatList component to the main axis direction | boolean | no | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| data | Data source of the DraxList component | array | yes | iOS/Android | Yes | +| monitoringExternalDragStyle 0.11.1+ | Style props to apply to the parent DraxView when monitoring an External item drag | object | no | iOS/Android | Yes | +| onItemDragStart | Callback handler for when a list item reorder drag action begins | function | no | iOS/Android | Yes | +| onItemDragPositionChange | Callback handler for when a list item position (index) changes during a reorder drag | function | no | iOS/Android | Yes | +| onItemDragEnd | Callback handler for when a list item reorder drag action ends | function | no | iOS/Android | Yes | +| onItemReorder | Callback handler for when a list item is moved within the list, reordering the list | function | no | iOS/Android | Yes | +| reorderable | Can the list be reordered by dragging items? Defaults to true if onItemReorder is set | boolean | no | iOS/Android | Yes | +| lockItemDragsToMainAxis | If true, lock item drags to the list's main axis | boolean | no | iOS/Android | Yes | +| longPressDelay | Time in milliseconds view needs to be pressed before drag starts | number | no | iOS/Android | Yes | +| renderItem | A function that renders each item in the DraxList. This extends React Native's standard `FlatList` renderItem with additional Drax-specific capabilities by providing drag-and-drop related props to each list item. | function | yes | iOS/Android | Yes | +| parentDraxViewProps | Props to apply to the parent DraxView that's wrapping the FlatList | object | no | iOS/Android | Yes | +| centerShift | When true, items will shift based on their centers instead of edges | boolean | no | iOS/Android | Yes | + +### DraxListItem + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------------------: | ------------------------------------------------------------ | :------: | :------: | :---------: | :---------------: | +| index | Current render index of the item in the list | number | yes | iOS/Android | Yes | +| item | The data item being rendered | T | yes | iOS/Android | Yes | +| originalIndex | The original index of the item before any reordering occurred | number | yes | iOS/Android | Yes | +| horizontal | Whether the list is laid out horizontally | boolean | yes | iOS/Android | Yes | +| lockItemDragsToMainAxis | Whether drag movements are constrained to the main axis of the list | boolean | yes | iOS/Android | Yes | +| draggedItem | Reanimated shared value tracking the currently dragged item index | object | yes | iOS/Android | Yes | +| shiftsRef | Shared value tracking position shifts during drag operations | object | yes | iOS/Android | Yes | +| itemMeasurementsRef | Mutable ref storing measurements of all list items | object | yes | iOS/Android | Yes | +| prevItemMeasurementsRef | Mutable ref storing previous measurements of list items | object | yes | iOS/Android | Yes | +| resetDraggedItem | Function to reset the dragged item state | function | yes | iOS/Android | Yes | +| keyExtractor | Optional function to extract unique keys from items | function | yes | iOS/Android | Yes | +| previousShiftsRef | Shared value tracking previous position shifts | object | yes | iOS/Android | Yes | +| registrationsRef | Mutable ref storing view registration data | object | yes | iOS/Android | Yes | +| data | The complete data array used by the DraxList | array | yes | iOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-ffmpeg-kit.md b/zh-cn/react-native-ffmpeg-kit.md index c354bdd66fbf7a2d486adf5b28ba63221694cf94..618bad4da74bcc2d9eb761ec139df1135be78a44 100644 --- a/zh-cn/react-native-ffmpeg-kit.md +++ b/zh-cn/react-native-ffmpeg-kit.md @@ -18,20 +18,35 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/releases)。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 6.0.2 | [@react-native-oh-tpl/ffmpeg-kit Releases](https://github.com/react-native-oh-library/ffmpeg-kit/releases) | 0.72 | +| 6.0.3 | [@react-native-ohos/ffmpeg-kiReleases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash +#6.0.2 npm install @react-native-oh-tpl/react-native-ffmpeg-kit + +#6.0.3 +npm install @react-native-ohos/react-native-ffmpeg-kit ``` #### **yarn** ```bash +#6.0.2 yarn add @react-native-oh-tpl/react-native-ffmpeg-kit + +#6.0.3 +yarn add @react-native-ohos/react-native-ffmpeg-kit ``` 下面的代码展示了这个库的基本使用场景： @@ -299,6 +314,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +V 6.0.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -307,6 +324,16 @@ const styles = StyleSheet.create({ } ``` +V 6.0.3 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/react-native-ffmpeg-kit": "file:../../node_modules/@react-native-ohos/react-native-ffmpeg-kit/harmony/ffmpeg_kit.har", + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -342,7 +369,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +#6.0.2 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ffmpeg-kit/src/main/cpp" ./ffmpeg-kit) + +#6.0.3 ++ 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") @@ -382,7 +413,10 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff +//6.0.2 + import { FFmpegKitPackage } from '@react-native-oh-tpl/react-native-ffmpeg-kit/ts'; +//6.0.3 ++ import { FFmpegKitPackage } from '@react-native-ohos/react-native-ffmpeg-kit/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ diff --git a/zh-cn/react-native-notifier.md b/zh-cn/react-native-notifier.md index ef01e40aaf6a49ce113998a1d3af821846dfcffe..51d2d22ec0fd1d73c90f9a98deaeaa21fcff517a 100644 --- a/zh-cn/react-native-notifier.md +++ b/zh-cn/react-native-notifier.md @@ -22,13 +22,21 @@ #### **npm** ```bash +#0.72 npm install react-native-notifier@2.0.0 + +#0.77 +npm install react-native-notifier@3.0.0-rc.5 ``` #### **yarn** ```bash +#0.72 yarn add react-native-notifier@2.0.0 + +#0.77 +yarn add react-native-notifier@3.0.0-rc.5 ``` @@ -99,7 +107,7 @@ Both `NotifierWrapper` and `NotifierRoot` receive the same props. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| omitGlobalMethodsHookup | If set to `true`, global `Notifier` methods will not control this component. It's useful in case you have more than one `NotifierWrapper` or `NotifierRoot` rendered. If enabled, the only way to display notifications is using refs. | Boolean | yes | All | No | +| omitGlobalMethodsHookup | If set to `true`, global `Notifier` methods will not control this component. It's useful in case you have more than one `NotifierWrapper` or `NotifierRoot` rendered. If enabled, the only way to display notifications is using refs. | Boolean | yes | All | yes | | useRNScreensOverlay | use `FullWindowOverlay` component from `react-native-screens` library. If `true`, Notifier will be rendered above NativeStackNavigation modals and RN Modal on iOS. This Option will work only if `react-native-screens` library is installed. iOS Only. | Boolean | yes | iOS | No | | rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay. iOS Only. | ViewStyle | yes | iOS | No | @@ -112,10 +120,17 @@ Both `NotifierWrapper` and `NotifierRoot` receive the same props. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | showNotification | Show notification with params. | Function | yes | All | yes | -| hideNotification |Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes | +| updateNotification3.0.0-rc.5+ | Update currently visible notification. | Function | yes | All | yes | +| shakeNotification3.0.0-rc.5+ | Shakes currently visible notification to attract the user's attention. | Function | yes | All | yes | +| isNotificationVisible3.0.0-rc.5+ | Is any notification currently visible. | Function | yes | All | yes | +| hideNotification |Hide currently visible notification and run callback function when notification completely hidden. | Function | yes | All | yes | | clearQueue |Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.| Function | yes | All | yes | +| updateById3.0.0-rc.5+ |Update notification by ID, if visible - will be updated immediately,if it waits in the queue - it will be updated in the queue and will be displayed with updated parameters.| Function | yes | All | yes | +| shakeById3.0.0-rc.5+ |Shakes notification by ID to attract the user's attention.| Function | yes | All | yes | +| isVisibleById3.0.0-rc.5+ |Is notification with provided ID currently visible.| Function | yes | All | yes | +| hideById3.0.0-rc.5+ |Hide notification by ID.| Function | yes | All | yes | -### `showNotification` +### showNotification ``` Notifier.showNotification(params: object); ``` @@ -124,41 +139,169 @@ Notifier.showNotification(params: object); | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | -| title | Title of notification. Passed to Component. | String| Yes | All |Yes | -| description |Description of notification. Passed to Component. | String | Yes | All | Yes | -| duration |Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No |All | Yes -| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No |All | Yes -| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No -| containerStyle |tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool |No | All | Yes -| containerProps | Props of Animated Container | Object |No | All | Yes -| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String |No | All | Yes -| swipeEnabled |Can notification be hidden by swiping it out | bool |No | All | Yes -| animationDuration | How fast notification will appear/disappear | Number |No | All | Yes -| showAnimationDuration | How fast notification will appear. | Number |No | All | Yes -| hideAnimationDuration | How fast notification will disappear.| Number |No | All | Yes -| easing | Animation easing. Details:[easing](https://reactnative.dev/docs/easing) | Easing |No | All | Yes -| showEasing | Show Animation easing.| Easing |No | All | Yes -| hideEasing |Hide Animation easing. | Easing |No | All | Yes -| onShown | Function called when entering animation is finished | () => void |No | All | Yes -| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes -| onHidden |Function called when notification completely hidden | () => void |No | All | Yes -| onPress | Function called when user press on notification | () => void |No | All | Yes -| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes -| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes -| swipeEasing | Animation easing after user finished swiping | Easing |No | All | Yes -| swipeAnimationDuration | How fast should be animation after user finished swiping | Number |No | All | Yes -| translucentStatusBar | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number |No | Android | No - -### `hideNotification` -``` -Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => void); -``` - -### `clearQueue` +| title | Title of notification. Passed to Component. | String | Yes | All | Yes | +| description | Description of notification. Passed to Component. | String | Yes | All | Yes | +| duration | Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No | All | Yes | +| Component | Component of the notification body. You can use one of the [bin components](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23components), or your [custom component](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23custom-component). | Component | No | All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23components). | Object | No | All | Yes | +| containerStyle | Styles Object that will be used in container. | bool | No | All | Yes | +| containerProps | Props of Animated Container | Object | No | All | Yes | +| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23queue-mode) section. | String | No | All | Yes | +| swipeEnableddeprecated from 3.0.0-rc.5+ | Can notification be hidden by swiping it out | bool | No | All | Yes | +| animationDurationdeprecated from 3.0.0-rc.5+ | How fast notification will appear/disappear | Number | No | All | Yes | +| showAnimationDurationdeprecated from 3.0.0-rc.5+ | How fast notification will appear. | Number | No | All | Yes | +| hideAnimationDurationdeprecated from 3.0.0-rc.5+ | How fast notification will disappear. | Number | No | All | Yes | +| easingdeprecated from 3.0.0-rc.5+ | Animation easing. Details:[easing](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Feasing) | Easing | No | All | Yes | +| showEasingdeprecated from 3.0.0-rc.5+ | Show Animation easing. | Easing | No | All | Yes | +| hideEasingdeprecated from 3.0.0-rc.5+ | Hide Animation easing. | Easing | No | All | Yes | +| onShown | Function called when entering animation is finished | () => void | No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void | No | All | Yes | +| onHidden | Function called when notification completely hidden | () => void | No | All | Yes | +| onPress | Function called when user press on notification | () => void | No | All | Yes | +| hideOnPress | Should notification hide when user press on it | Boolean | No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number | No | All | Yes | +| swipeEasingdeprecated from 3.0.0-rc.5+ | Animation easing after user finished swiping | Easing | No | All | Yes | +| swipeAnimationDurationdeprecated from 3.0.0-rc.5+ | How fast should be animation after user finished swiping | Number | No | All | Yes | +| translucentStatusBardeprecated from 3.0.0-rc.5+ | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number | No | Android | No | +| duplicateBehavior3.0.0-rc.5+ | What to do if notification with the same ID(!) already shown. | String | No | All | Yes | +| id3.0.0-rc.5+ | A manually provided ID. If supplied, it overrides any generation strategy. If notification with the same ID already shown, result of the `showNotification` will depend on `duplicateBehavior` parameter. | String \| Number | No | All | Yes | +| idStrategy3.0.0-rc.5+ | Specifies how the ID should be generated if none is manually provided. | String | No | All | Yes | +| animationFunction3.0.0-rc.5+ | Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function | No | All | Yes | +| showAnimationConfig3.0.0-rc.5+ | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| hideAnimationConfig3.0.0-rc.5+ | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| swipeOutAnimationConfig3.0.0-rc.5+ | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| resetSwipeAnimationConfig3.0.0-rc.5+ | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| ignoreSafeAreaInsets3.0.0-rc.5+ | Ignores offsets from `useSafeAreaInsets` hook | Boolean | No | All | Yes | +| ignoreKeyboard3.0.0-rc.5+ | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean | No | All | Yes | +| ignoreKeyboardHeight3.0.0-rc.5+ | Ignores keyboard height offset (when use bottom positions) | Boolean | No | All | Yes | +| additionalKeyboardOffset3.0.0-rc.5+ | Additional bottom offset when keyboard is visible. | Number | No | All | Yes | +| additionalOffsets3.0.0-rc.5+ | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object | No | All | Yes | +| position3.0.0-rc.5+ | Position of the notification | String | No | All | Yes | +| enterFrom3.0.0-rc.5+ | Direction from which notification will appear | String | No | All | Yes | +| exitTo3.0.0-rc.5+ | Direction to which notification will slide to hide | String | No | All | Yes | +| swipeDirection3.0.0-rc.5+ | Direction in which notification can be swiped out | String | No | All | Yes | +| shakingConfig3.0.0-rc.5+ | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| useRNScreensOverlay3.0.0-rc.5+ | use FullWindowOverlay component from react-native-screens library | Boolean | No | iOS | Yes | +| rnScreensOverlayViewStyle3.0.0-rc.5+ | Style that will be used for RN View that is inside of FullWindowOverlay | Object | No | iOS | Yes | + +### updateNotification3.0.0-rc.5+ +``` +Notifier.updateNotification(params: object); +``` + +`params` + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + +### updateById3.0.0-rc.5+ +``` +Notifier.updateById(id: string | number, params: object); +``` + +`params` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + +### shakeNotification3.0.0-rc.5+ +``` +Notifier.shakeNotification(resetTimer?: boolean); +``` + +### isNotificationVisible3.0.0-rc.5+ +``` +Notifier.isNotificationVisible(); +``` + +### hideNotification +``` +Notifier.hideNotification(onHidden?: Animated.EndCallback); +``` + +### clearQueue ``` Notifier.clearQueue(hideDisplayedNotification?: boolean); ``` +### shakeById3.0.0-rc.5+ +``` +Notifier.shakeById(id: string | number, resetTimer?: boolean); +``` + +### isVisibleById3.0.0-rc.5+ +``` +Notifier.isVisibleById(id: string | number); +``` + +### hideById3.0.0-rc.5+ +``` +Notifier.hideById(id: string | number, onHidden?: Animated.EndCallback); +``` + ## Queue Mode Queue mode is used to define the order in which the notification appears in case other notifications are being displayed at the moment. @@ -182,44 +325,89 @@ All possible modes: > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -### `NotifierComponents.Notification` -Currently, there are 2 components out of the box. If none of them fits your needs, then you can easily create your [Custom Component]. +### NotifierComponents.Notification +Currently, there are 4 components out of the box. If none of them fits your needs, then you can easily create your [Custom Component]. | Name | Type | Default | Description | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | ---- | -------- | -| title | String | null | Title of notification. | All | Yes -| description | String | null | Description of notification. | All | Yes -| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes -| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes -| componentProps.imageSource | Object | null | Passed to as source param. | All | Yes -| componentProps.imageStyle | ImageStyle | null | The style to use for rendering image. | All | Yes -| componentProps.containerStyle | ViewStyle | null | The style to use for notification container. | All | Yes -| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes -| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes -| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes - -### `NotifierComponents.Alert` - -| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | ---- | -------- | +| title | String | null | Title of notification. | All | Yes| +| description | String | null | Description of notification. | All | Yes| +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | null | If set, the icon, icon background color, and border color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle3.0.0-rc.5+ | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription3.0.0-rc.5+ | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.imageSource | Object | null | Passed to as source param. | All | Yes | +| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes | +| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes | +| componentProps.iconSource3.0.0-rc.5+ | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle3.0.0-rc.5+ | ViewStyle | null | Style for the outermost container of the toast. | All | Yes | +| componentProps.iconContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle3.0.0-rc.5+ | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes| +| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes| +| componentProps.containerStyle | ViewStyle | null |The style to use for notification container. | All | Yes | +| componentProps.imageStyle | ImageStyle | null | The style to use for rendering image. | All | Yes| + +### NotifierComponents.Alert + +| Name | Type | **Default** | Description | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | ---- | -------- | -| title | String | null | Title of notification. | All | Yes -| description | String | null | Description of notification. | All | Yes -| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes -| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes -|componentProps.alertType | String | 'success' |Background color will be changed depending on the type. Available values: error(red), success(green), warn(orange) and info(blue). | All | Yes -| componentProps.backgroundColor | String | null | While the background of the alert depends on alertType, you can also set the other color you want. | All | Yes -| componentProps.textColor | String | 'white' | Color of title and description. | All | Yes -| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes -| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes -| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes +| title | String | null | Title of notification. | All | Yes| +| description | String | null | Description of notification. | All | Yes| +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | 'success' | Background color will be changed depending on the type. Available values: `error`(red), `success`(green), `warn`(orange) and `info`(blue). | All | Yes | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes| +| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes| +|componentProps.alertTypedeprecated from 3.0.0-rc.5+ | String | 'success' |use `type` instead | All | Yes| +| componentProps.backgroundColor | String | null | While the background of the alert depends on alertType, you can also set the other color you want. | All | Yes| +| componentProps.textColor | String | 'white' | Color of title and description. | All | Yes| +| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes| +| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes| +| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes| + +### NotifierComponents.SimpleToast3.0.0-rc.5+ + +| Name | Type | Default | Description | HarmonyOS Support | Platform | +| --------------------------------- | ----------------- | --------------- | ------------------------------------------------------------ | ----------------- | -------- | +| title | String | null | Title of notification. | Yes | All | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | Yes | All | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title | Yes | All | +| componentProps.safeAreaStyle | ViewStyle | null | The style to use for safe area container. | Yes | All | +| componentProps.containerStyle | ViewStyle | null | The style to use for toast content container. | Yes | All | +| componentProps.maxTitleLines | Number | null | The maximum number of lines to use for rendering title. | Yes | All | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets` | Yes | All | + +### NotifierComponents.Toast3.0.0-rc.5+ + +| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------- | ----------------- | ------------------------------------------------------------ | -------- | ----------------- | +| title | String | null | Title of notification. | All | Yes | +| description | String | null | Description of notification. | All | Yes | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type | String | null | If set, the icon and icon background color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.maxTitleLines | Number | null | The maximum number of lines for rendering the title text. | All | Yes | +| componentProps.maxDescriptionLinesYes | Number | null | The maximum number of lines for rendering the description text. | All | Yes | +| componentProps.iconSource | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle | ViewStyle | null | Style for the safe area container of the toast. | All | Yes | +| componentProps.containerStyle | ViewStyle | null | Style for the toast content container, often used to modify background color,shadows, padding, or margin. | All | Yes | +| componentProps.iconContainerStyle | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | +| componentProps.titleStyle | TextStyle | null | Style for the title text. | All | Yes | +| componentProps.descriptionStyle | TextStyle | null | Style for the description text. | All | Yes | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A custom container component. If used, it replaces the default `ViewWithOffsets` provided by the library. | All | Yes | + ## 遗留问题 -- [ ] translucentStatusBar状态栏透明在HarmonyOS不支持,useRNScreensOverlay,rnScreensOverlayViewStyle两个属性依赖于react-native-screens，暂未适配harmonyOS +- [ ] useRNScreensOverlay,rnScreensOverlayViewStyle两个属性依赖于react-native-screens，暂未适配harmonyOS - [ ] componentProps{needsOffscreenAlphaCompositing}, 在harmonyOS不支持 ## 其他 -- omitGlobalMethodsHookup源库属性未生效 问题：[issues#102](https://github.com/seniv/react-native-notifier/issues/102) ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/seniv/react-native-notifier/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-pull.md b/zh-cn/react-native-pull.md index f38bc7b03b72e99c7118e4a3084439b7eb3c242f..7da0a417079a7a1b624d85ed3fe120152a593235 100644 --- a/zh-cn/react-native-pull.md +++ b/zh-cn/react-native-pull.md @@ -18,7 +18,13 @@ ## 安装与使用 -请到三方库的地址查看配套的版本信息：[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.4 |[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases)| 0.72 | +| 2.0.3 |[@react-native-ohos/react-native-pull/releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +33,21 @@ #### **npm** ```bash +# V2.0.4 npm install @react-native-oh-tpl/react-native-pull + +# V2.0.3 +npm install @react-native-ohos/react-native-pull ``` #### **yarn** ```bash +# V2.0.4 yarn add @react-native-oh-tpl/react-native-pull + +# V2.0.3 +yarn add @react-native-ohos/react-native-pull ``` @@ -454,7 +468,13 @@ export default PullListDemo; 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.4 |[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases)| 0.72 | +| 2.0.3 |[@react-native-ohos/react-native-pull/releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 属性 diff --git a/zh-cn/react-native-securerandom.md b/zh-cn/react-native-securerandom.md index c4522c24af2e67d2088fb93dcdf42e06bb7734a2..89226a1fe1b53cc9149002749d534f17ff3b1ef1 100644 --- a/zh-cn/react-native-securerandom.md +++ b/zh-cn/react-native-securerandom.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.1 | [@react-native-oh-tpl/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases) | 0.72 | +| 1.0.2 | [@react-native-ohos/react-native-securerandom Releases]() | 0.77 | + + 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### npm ```bash +# V1.0.1 npm install @react-native-oh-tpl/react-native-securerandom + +# V1.0.2 +npm install @react-native-ohos/react-native-securerandom ``` #### yarn ```bash +# V1.0.1 yarn add @react-native-oh-tpl/react-native-securerandom + +# V1.0.2 +yarn add @react-native-ohos/react-native-securerandom ``` @@ -83,6 +98,10 @@ const styles = StyleSheet.create({ ``` ### 使用 Codegen +> [!TIP] V1.0.2 不需要执行 Codegen。 + + + 本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 [Codegen](/zh-cn/link-source-code.md) 使用文档。 ## Link @@ -115,6 +134,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V1.0.1 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -122,6 +143,15 @@ const styles = StyleSheet.create({ } ``` +- V1.0.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-securerandom": "file:../../node_modules/@react-native-ohos/react-native-securerandom/harmony/secure_random.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -135,14 +165,79 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 SecureRandomPackage +### 3.配置 CMakeLists 和引入 SecurerandomPackage + +> [!TIP] 若使用的是 1.0.1 版本，请跳过本章。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +``` +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) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-securerandom/src/main/cpp" ./secure_random) +# 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_secure_random) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +``` +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "SecurerandomPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 SecureRandomPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V1.0.1 + import { SecureRandomPackage } from '@react-native-oh-tpl/react-native-securerandom/ts'; +// V1.0.2 ++ import { SecureRandomPackage } from '@react-native-ohos/react-native-securerandom/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -170,7 +265,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.1 | [@react-native-oh-tpl/react-native-securerandom Releases](https://github.com/react-native-oh-library/react-native-securerandom/releases) | 0.72 | +| 1.0.2 | [@react-native-ohos/react-native-securerandom Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-sticky-parallax-header.md b/zh-cn/react-native-sticky-parallax-header.md index 716a153ae09b1b2dbfbcae71b09cf6b6b258ca4c..21d2713d9fc56e7c8f2f0dfbe32e4e9a5c98acfd 100644 --- a/zh-cn/react-native-sticky-parallax-header.md +++ b/zh-cn/react-native-sticky-parallax-header.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.1.1 | [@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.72 | +| 1.1.2 | [@react-native-ohos/react-native-sticky-parallax-header Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V1.1.1 npm install @react-native-oh-tpl/react-native-sticky-parallax-header + +# V1.1.2 +npm install @react-native-ohos/react-native-sticky-parallax-header ``` #### **yarn** ```bash +# V1.1.1 yarn add @react-native-oh-tpl/react-native-sticky-parallax-header + +# V1.1.2 +yarn add @react-native-ohos/react-native-sticky-parallax-header ``` @@ -155,7 +170,14 @@ const TabbedHeaderPagerExample: React.FC = () => { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.1.1 | [@react-native-oh-tpl/react-native-sticky-parallax-header Releases](https://github.com/react-native-oh-library/react-native-sticky-parallax-header/releases) | 0.72 | +| 1.1.2 | [@react-native-ohos/react-native-sticky-parallax-header Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## Headers diff --git a/zh-cn/react-navigation-shared-element.md b/zh-cn/react-navigation-shared-element.md index 304652bd3dc5f533694d4754405eb3e8b27e6e6c..24e3ad16780ad9560e221d8dc16dfb41b44be35e 100644 --- a/zh-cn/react-navigation-shared-element.md +++ b/zh-cn/react-navigation-shared-element.md @@ -24,15 +24,25 @@ #### **npm** ```bash -npm install react-navigation-shared-element@3.1.2 +#0.72 +npm install react-navigation-shared-element@3.1.2 +npm install react-native-shared-element@0.8.9 + +#0.77 +npm install react-navigation-shared-element@3.1.3 npm install react-native-shared-element@0.8.9 ``` #### **yarn** ```bash -yarn add react-navigation-shared-element@3.1.2 -yarn add react-native-shared-element@0.8.9 +#0.72 +yarn add react-navigation-shared-element@3.1.2 +yarn add react-native-shared-element@0.8.9 + +#0.77 +yarn add react-navigation-shared-element@3.1.3 +yarn add react-native-shared-element@0.8.9 ```