diff --git a/en/react-navigation-stack.md b/en/react-navigation-stack.md index a091703eb9c1738e09c8e5e04349dcf4ce366820..77fc7dea2ed8fab374d4fd06b431808728e0346e 100644 --- a/en/react-navigation-stack.md +++ b/en/react-navigation-stack.md @@ -4,38 +4,47 @@

@react-navigation/stack

- + Supported platforms - + License

> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) +The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/stack`. The specific version relationships are as follows: -## Installation and Usage - -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.4.0 | @react-native-oh-tpl/stack | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 | +| 7.2.11 | @react-native-ohos/stack | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/stack) | [GitCode Releases]() | 0.77 | -> [!TIP] The .tgz package of stack is available in the Releases section of react-navigation. - -Find the matching version information in the release address of a third-party library：[@react-native-oh-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/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. +For older versions that have not been released to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package +## Installation and Usage #### **npm** ```bash +# for RN0.72 npm install @react-native-oh-tpl/stack + +# for RN0.77 +npm install @react-native-ohos/stack ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/stack +# for RN0.72 +yarn install @react-native-oh-tpl/stack + +# for RN0.77 +yarn install @react-native-ohos/stack ``` @@ -108,8 +117,10 @@ If it is not included, follow the guide provided in @react-native-oh-tpl/react-n 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-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) +Verified in the following version: +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties @@ -128,7 +139,10 @@ For details, see [react-navigation/stack](https://reactnavigation.org/docs/stack | initialRouteName | The name of the route to render on first load of the navigator. | string | no | all | yes | | screenOptions | Default options to use for the screens in the navigator. | object | no | all | yes | | detachInactiveScreens | Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens. Defaults to true. | boolean | no | Android,iOS | no | - +| layout7.2.10+ | A layout is a wrapper around the navigator. It can be useful for augmenting the navigators with additional UI with a wrapper.The difference from adding a wrapper around the navigator manually is that the code in a layout callback has access to the navigator's state, options etc. | object | no | all | yes | +| screenLayout7.2.10+ | A screen layout is a wrapper around each screen in the navigator. It makes it easier to provide things such as an error boundary and suspense fallback for all screens in the navigator, or wrap each screen with additional UI. | object | no | all | yes | +| screenListeners7.2.10+ | You can pass a prop named `screenListeners` to the navigator component, where you can specify listeners for events from all screens for this navigator. | object | no | all | yes | +| headerBackButtonDisplayMode7.2.10+ | How the back button displays icon and title. | 'default' \| 'generic' \| 'minimal' | no | all | yes | **Options & screenOptions** @@ -140,7 +154,7 @@ For details, see [react-navigation/stack](https://reactnavigation.org/docs/stack | cardOverlay | Function which returns a React Element to display as the overlay for the card. Make sure to set cardOverlayEnabled to true when using this. | fucntion | no | all | yes | | cardStyle | Style object for the card in stack. You can provide a custom background color to use instead of the default background here. | object | no | all | yes | | presentation | This is shortcut option which configures several options to configure the style for rendering and transitions. | 'card'|'modal'|'transparentModal' | no | all | yes | -| animationEnabled | Whether transition animation should be enabled on the screen. If you set it to false, the screen won't animate when pushing or popping. Defaults to true on iOS and Android, false on Web. | boolean | no | all | yes | +| animationEnableddeprecated from 7.2.10 | Whether transition animation should be enabled on the screen. If you set it to false, the screen won't animate when pushing or popping. Defaults to true on iOS and Android, false on Web. | boolean | no | all | yes | | animationTypeForReplace | The type of animation to use when this screen replaces another screen. | 'push'|'pop' | no | all | yes | | gestureEnabled | Whether you can use gestures to dismiss this screen. | boolean | no | Android,iOS | yes | | gestureResponseDistance | Number to override the distance of touch start from the edge of the screen to recognize gestures. | number | no | Android,iOS | yes | @@ -148,7 +162,7 @@ For details, see [react-navigation/stack](https://reactnavigation.org/docs/stack | gestureDirection | Direction of the gestures. | string | no | Android,iOS | yes | | transitionSpec | Configuration object for the screen transition. | object | no | all | yes | | cardStyleInterpolator | Interpolated styles for various parts of the card. | object | no | all | yes | -| headerStyleInterpolator | Interpolated styles for various parts of the header. | object | no | all | yes | +| headerStyleInterpolators | Interpolated styles for various parts of the header. | object | no | all | yes | | keyboardHandlingEnabled | If false, the keyboard will NOT automatically dismiss when navigating to a new screen from this screen. Defaults to true. | boolean | no | all | yes | | detachPreviousScreen | Boolean used to indicate whether to detach the previous screen from the view hierarchy to save memory. Set it to false if you need the previous screen to be seen through the active screen. Only applicable if detachInactiveScreens isn't set to false. | boolean | no | all | no | | freezeOnBlur | Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application. | boolean | no | all | no | @@ -159,7 +173,7 @@ For details, see [react-navigation/stack](https://reactnavigation.org/docs/stack | headerBackAccessibilityLabel | Accessibility label for the header back button. | string | no | all | yes | | headerBackImage | Function which returns a React Element to display custom image in header's back button. When a function is used, it receives the tintColor in it's argument object. Defaults to Image component with back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android). | function | no | all | yes | | headerBackTitle | Title string used by the back button on iOS. Defaults to the previous scene's headerTitle. | string | no | all | yes | -| headerBackTitleVisible | A reasonable default is supplied for whether the back button title should be visible or not, but if you want to override that you can use true or false in this option. | boolean | no | all | yes | +| headerBackTitleVisibledeprecated from 7.2.10 | A reasonable default is supplied for whether the back button title should be visible or not, but if you want to override that you can use true or false in this option. | boolean | no | all | yes | | headerTruncatedBackTitle | Title string used by the back button when headerBackTitle doesn't fit on the screen. "Back" by default. | string | no | all | yes | | headerBackTitleStyle | Style object for the back title. | object | no | all | yes | @@ -171,8 +185,8 @@ For details, see [react-navigation/stack](https://reactnavigation.org/docs/stack | gestureStart | This event is fired when the swipe gesture starts for the current screen. | function | no | all | yes | | gestureEnd | This event is fired when the swipe gesture ends for the current screen. e.g. a screen was successfully dismissed. | function | no | all | yes | | gestureCancel | This event is fired when the swipe gesture is cancelled for the current screen. e.g. a screen wasn't dismissed by the gesture. | function | no | all | yes | +| useCardAnimation7.2.10+ | This hook returns values related to the screen's animation. | function | no | all | yes | ## Known Issues - - [ ] The TextInput component can allow click events to pass through to the underlying elements.[issues#37](https://github.com/react-native-oh-library/react-navigation/issues/37) ## Others diff --git a/zh-cn/react-navigation-stack.md b/zh-cn/react-navigation-stack.md index 286484755dc4b48b677ca537fe2a66a49cc4b215..ced120dc0cf9e07518421936581a544c2696c8d2 100644 --- a/zh-cn/react-navigation-stack.md +++ b/zh-cn/react-navigation-stack.md @@ -4,38 +4,51 @@

@react-navigation/stack

- + Supported platforms - + License

> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) +该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/stack`，具体版本所属关系如下： + +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.4.0 | @react-native-oh-tpl/stack | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/stack) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 | +| 7.2.11 | @react-native-ohos/stack | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/stack) | [GitCode Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 安装与使用 进入到工程目录并输入以下命令： -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 - #### **npm** ```bash +# for RN0.72 npm install @react-native-oh-tpl/stack + +# for RN0.77 +npm install @react-native-ohos/stack ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/stack -``` +# for RN0.72 +yarn install @react-native-oh-tpl/stack +# for RN0.77 +yarn install @react-native-ohos/stack +``` 下面的代码展示了这个库的基本使用场景： @@ -107,7 +120,10 @@ export default function App() { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) +在下述版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -121,55 +137,60 @@ export default function App() { **Props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | -| id | Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator. | string | no | all | yes | -| initialRouteName | The name of the route to render on first load of the navigator. | string | no | all | yes | -| screenOptions | Default options to use for the screens in the navigator. | object | no | all | yes | -| detachInactiveScreens | Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens. Defaults to true. | boolean | no | Android,iOS | no | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | +| id | 可选属性，为导航器提供唯一标识符，可通过 navigation.getParent 在子导航器中引用此导航器 | string | no | all | yes | +| initialRouteName | 设置导航器首次加载时要渲染的路由名称 | string | no | all | yes | +| screenOptions | 为导航器中的屏幕设置默认选项 | object | no | all | yes | +| detachInactiveScreens | 布尔值，用于指示是否应从视图层次结构中分离非活动屏幕以节省内存，默认为true. | boolean | no | Android,iOS | no | +| layout7.2.10+ | 布局是导航器的包装。它可以用于通过包装器添加额外的UI来增强导航器。与手动在导航器周围添加包装器的不同之处在于，布局回调中的代码可以访问导航器的状态、选项等。 | object | no | all | yes | +| screenLayout7.2.10+ | 屏幕布局是导航器中每个屏幕的包装。它可以更容易地为导航器中的所有屏幕提供错误边界和悬念回退等功能，或者用额外的UI包裹每个屏幕。 | object | no | all | yes | +| screenListeners7.2.10+ | 可以将名为“screenListeners”的道具传递给导航器组件，在那里可以为此导航器的所有屏幕中的事件指定监听器。 | object | no | all | yes | +| headerBackButtonDisplayMode7.2.10+ | 后退按钮如何显示图标和标题。 | 'default' \| 'generic' \| 'minimal' | no | all | yes | **Options & screenOptions** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------- | ----------- | ----------------- | -| title | String that can be used as a fallback for headerTitle. | string | no | all | yes | -| cardShadowEnabled | Use this prop to have visible shadows during transitions. Defaults to true. | boolean | no | all | yes | -| cardOverlayEnabled | Use this prop to have a semi-transparent dark overlay visible under the card during transitions. Defaults to true on Android and false on iOS. | boolean | no | all | yes | -| cardOverlay | Function which returns a React Element to display as the overlay for the card. Make sure to set cardOverlayEnabled to true when using this. | fucntion | no | all | yes | -| cardStyle | Style object for the card in stack. You can provide a custom background color to use instead of the default background here. | object | no | all | yes | -| presentation | This is shortcut option which configures several options to configure the style for rendering and transitions. | 'card'|'modal'|'transparentModal' | no | all | yes | -| animationEnabled | Whether transition animation should be enabled on the screen. If you set it to false, the screen won't animate when pushing or popping. Defaults to true on iOS and Android, false on Web. | boolean | no | all | yes | -| animationTypeForReplace | The type of animation to use when this screen replaces another screen. | 'push'|'pop' | no | all | yes | -| gestureEnabled | Whether you can use gestures to dismiss this screen. | boolean | no | Android,iOS | yes | -| gestureResponseDistance | Number to override the distance of touch start from the edge of the screen to recognize gestures. | number | no | Android,iOS | yes | -| gestureVelocityImpact | Number which determines the relevance of velocity for the gesture. Defaults to 0.3. | number | no | Android,iOS | yes | -| gestureDirection | Direction of the gestures. | string | no | Android,iOS | yes | -| transitionSpec | Configuration object for the screen transition. | object | no | all | yes | -| cardStyleInterpolator | Interpolated styles for various parts of the card. | object | no | all | yes | -| headerStyleInterpolator | Interpolated styles for various parts of the header. | object | no | all | yes | -| keyboardHandlingEnabled | If false, the keyboard will NOT automatically dismiss when navigating to a new screen from this screen. Defaults to true. | boolean | no | all | yes | -| detachPreviousScreen | Boolean used to indicate whether to detach the previous screen from the view hierarchy to save memory. Set it to false if you need the previous screen to be seen through the active screen. Only applicable if detachInactiveScreens isn't set to false. | boolean | no | all | no | -| freezeOnBlur | Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application. | boolean | no | all | no | -| header | Custom header to use instead of the default header. | function | no | all | yes | -| headerMode | Specifies how the header should be rendered. | 'float'|'screen' | no | all | yes | -| headerShown | Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header. | boolean | no | all | yes | -| headerBackAllowFontScaling | Whether back button title font should scale to respect Text Size accessibility settings. Defaults to false. | boolean | no | all | yes | -| headerBackAccessibilityLabel | Accessibility label for the header back button. | string | no | all | yes | -| headerBackImage | Function which returns a React Element to display custom image in header's back button. When a function is used, it receives the tintColor in it's argument object. Defaults to Image component with back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android). | function | no | all | yes | -| headerBackTitle | Title string used by the back button on iOS. Defaults to the previous scene's headerTitle. | string | no | all | yes | -| headerBackTitleVisible | A reasonable default is supplied for whether the back button title should be visible or not, but if you want to override that you can use true or false in this option. | boolean | no | all | yes | -| headerTruncatedBackTitle | Title string used by the back button when headerBackTitle doesn't fit on the screen. "Back" by default. | string | no | all | yes | -| headerBackTitleStyle | Style object for the back title. | object | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------- | -------- | ----------- | ----------------- | +| title | 可用作headerTitle回退的字符串。 | string | no | all | yes | +| cardShadowEnabled | 使用此道具可以在过渡过程中产生可见的阴影。默认为true。 | boolean | no | all | yes | +| cardOverlayEnabled | 使用此道具可以在过渡期间在卡片下方看到半透明的深色覆盖层。在Android上默认为true，在iOS上默认为false。 | boolean | no | all | yes | +| cardOverlay | 函数返回一个React元素，以显示为卡片的覆盖层。使用此功能时，请确保将cardOverlayEnabled设置为true。 | fucntion | no | all | yes | +| cardStyle | 堆栈中卡片的样式对象。您可以在此处提供自定义背景颜色来代替默认背景。 | object | no | all | yes | +| presentation | 这是一个快捷方式选项，它配置了几个选项来配置渲染和过渡的样式。 | 'card'|'modal'|'transparentModal' | no | all | yes | +| animationEnableddeprecated from 7.2.10 | 是否应在屏幕上启用过渡动画。如果将其设置为false，则推或弹出时屏幕将不会动画。在iOS和Android上默认为true，在Web上默认为false。 | boolean | no | all | yes | +| animationTypeForReplace | 当此屏幕替换另一个屏幕时使用的动画类型。 | 'push'|'pop' | no | all | yes | +| gestureEnabled | 是否可以使用手势关闭此屏幕。 | boolean | no | Android,iOS | yes | +| gestureResponseDistance | 用于覆盖从屏幕边缘开始的触摸距离的数字，以识别手势。 | number | no | Android,iOS | yes | +| gestureVelocityImpact | 决定手势速度相关性的数字。默认值为0.3。 | number | no | Android,iOS | yes | +| gestureDirection | 手势的方向。 | string | no | Android,iOS | yes | +| transitionSpec | 屏幕转换的配置对象。 | object | no | all | yes | +| cardStyleInterpolator | 卡片各部分的插入样式。 | object | no | all | yes | +| headerStyleInterpolators | 页眉各部分的插值样式。 | object | no | all | yes | +| keyboardHandlingEnabled | 如果为false，则从该屏幕导航到新屏幕时，键盘不会自动关闭。默认为true。 | boolean | no | all | yes | +| detachPreviousScreen | 布尔值，用于指示是否从视图层次结构中分离上一个屏幕以节省内存。如果需要通过活动屏幕查看上一个屏幕，请将其设置为false。仅适用于detachInactiveScreen未设置为false的情况。 | boolean | no | all | no | +| freezeOnBlur | 布尔值，指示是否阻止非活动屏幕重新渲染。默认为false。当在应用程序顶部运行react native screens包中的enableFreeze（）时，默认为true。 | boolean | no | all | no | +| header | 要使用的自定义标头，而不是默认标头。 | function | no | all | yes | +| headerMode | 指定导航栏的渲染方式，可选值为 'float'（浮动）或 'screen'（屏幕） | 'float'|'screen' | no | all | yes | +| headerShown | 控制是否显示导航栏，设置为 false 可隐藏导航栏，默认显示 | boolean | no | all | yes | +| headerBackAllowFontScaling | 返回按钮标题字体是否根据系统文字大小设置进行缩放，默认为 false | boolean | no | all | yes | +| headerBackAccessibilityLabel | 返回按钮的无障碍访问标签文本 | string | no | all | yes | +| headerBackImage | 返回自定义返回按钮图片的函数，接收 tintColor 参数，默认使用平台特定的返回图标 | function | no | all | yes | +| headerBackTitle | iOS平台上返回按钮显示的标题文字，默认为上一个页面的 headerTitle | string | no | all | yes | +| headerBackTitleVisibledeprecated from 7.2.10 | 控制返回按钮标题是否可见，可覆盖系统默认设置 | boolean | no | all | yes | +| headerTruncatedBackTitle | 当 headerBackTitle 文字过长无法完整显示时使用的截断标题，默认为 "Back" | string | no | all | yes | +| headerBackTitleStyle | 返回按钮标题的样式对象 | object | no | all | yes | **Events** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | -| transitionStart | This event is fired when the transition animation starts for the current screen. | function | no | all | yes | -| transitionEnd | This event is fired when the transition animation ends for the current screen. | function | no | all | yes | -| gestureStart | This event is fired when the swipe gesture starts for the current screen. | function | no | all | yes | -| gestureEnd | This event is fired when the swipe gesture ends for the current screen. e.g. a screen was successfully dismissed. | function | no | all | yes | -| gestureCancel | This event is fired when the swipe gesture is cancelled for the current screen. e.g. a screen wasn't dismissed by the gesture. | function | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| transitionStart | 在当前页面的转场动画‌开始‌时触发 | function | no | all | yes | +| transitionEnd | 在当前页面的转场动画‌结束‌时触发 | function | no | all | yes | +| gestureStart | 在当前页面的滑动手势‌开始‌时触发 | function | no | all | yes | +| gestureEnd | 在当前页面的滑动手势‌结束‌时触发（例如：页面成功被滑动手势关闭） | function | no | all | yes | +| gestureCancel | 在当前页面的滑动手势被‌取消‌时触发（例如：页面没有被滑动手势关闭） | function | no | all | yes | +| useCardAnimation7.2.10+ | 此挂钩返回与屏幕动画相关的值。 | function | no | all | yes | + ## 遗留问题 - [ ] TextInput组件可以穿透下个页面点击。[issues#37](https://github.com/react-native-oh-library/react-navigation/issues/37) @@ -178,4 +199,4 @@ export default function App() { ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/stack/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/stack/LICENSE) ，请自由地享受和参与开源。