模板版本：v0.4.0
@react-navigation/native-stack
本项目基于 @react-navigation/native-stack 开发。
！！！主推新的鸿蒙版@react-native-ohos/native-stack和@react-native-ohos/react-native-screens组合，其余的组合方式不再支持。
该第三方库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/native-stack，具体版本所属关系如下：
| 三方库名称 | 三方库版本 | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址 |
|---|---|---|---|---|---|---|---|
| @react-native-ohos/native-stack | ~7.4.0（开发中） | Gitcode Releases | 0.82.* | 否 | API12+ | 7.3.22 | Npm Address |
| @react-native-ohos/native-stack | ~7.3.11（开发中） | Gitcode Releases | 0.77.* | 否 | API12+ | 7.3.10 | Npm Address |
| @react-native-ohos/native-stack | ~6.9.27（开发中） | Gitcode Releases | 0.72.* | 否 | API12+ | 6.9.27 | Npm Address |
| @react-native-oh-tpl/native-stack | 6.9.26-0.0.2@deprecated | Gitcode Releases(deprecated) | 0.72.* | 否 | API12+ | 6.9.26 | Npm Address |
1. 安装与使用
进入到工程目录并输入以下命令：
npm
npm install @react-native-ohos/native-stack
yarn
yarn install @react-native-ohos/native-stack
下面的代码展示了这个库的基本使用场景：
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from "react-native-screens";
enableScreens(false);
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerTintColor: 'white',
headerStyle: { backgroundColor: 'tomato' },
}}
>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
2. Link
本库依赖以下三方库，请查看对应文档：
本库 HarmonyOS 侧实现依赖react-native-safe-area-context、@react-native-ohos/react-native-screens 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
如未引入请参照react-native-safe-area-context 文档的 Link 章节、@react-native-ohos/react-native-screens 文档的 Link 章节进行引入
3. 约束与限制
3.1. 兼容性
本文档内容基于以下环境验证通过：
- RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
- RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
- RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
- RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;
4. 属性
"Platform"列表示该属性在原三方库上支持的平台。
"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
以下为@react-native-ohos/native-stack结合鸿蒙化@react-native-ohos/react-native-screens使用的基本属性，属性已验证，更多属性详情请查看 react-navigation/native-stack 的文档介绍
Props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| id | 为导航器设置一个可选的唯一标识符。该 ID 可用于在子导航器中通过 navigation.getParent 方法引用此导航器 | string | no | all | yes |
| initialRouteName | 指定导航器首次加载时要渲染的初始路由名称. | string | no | all | yes |
| screenOptions | 为此导航器中所有屏幕配置默认的选项对象，用于统一设置屏幕的呈现方式. | object | no | all | yes |
| layout7.3.11+ | 布局是一个包裹导航器的包装器。它可以通过包装器为导航器增强额外的用户界面。与手动在导航器外部添加包装器不同，布局回调中的代码可以访问导航器的状态、配置选项等信息。 | object | no | all | yes |
| screenLayout7.3.11+ | 屏幕布局是导航器中每个屏幕的包装器。它可以更便捷地为导航器中的所有屏幕提供错误边界和 Suspense 回退内容，或者为每个屏幕包裹额外的用户界面。 | object | no | all | yes |
| screenListeners7.3.11+ | 你可以向导航器组件传递一个名为 screenListeners 的属性，在此处可以为此导航器中所有屏幕的事件指定监听器。 | object | no | all | yes |
| isPreventKeyboardPopUp7.3.13+ | 可以向导航器组件Stack.Navigator传递一个名为 isPreventKeyboardPopUp 的属性，用于控制键盘弹起时内容是否避让。默认为 false，设置为 true 时内容不会进行避让。 | boolean | no | harmony | yes |
Options & screenOptions
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| title | 可用作headerTitle回退的字符串. | string | no | all | yes |
| headerBackButtonMenuEnabled | 布尔值，指示在长按 iOS 14 及以上版本的返回按钮时是否显示菜单，默认为 true | boolean | no | iOS | no |
| headerBackVisible | 返回按钮在标题栏中是否可见。如果已指定 headerLeft，可以使用此属性在 headerLeft 旁边显示返回按钮. | boolean | no | Android,iOS | yes |
| headerBackTitle | iOS 上返回按钮使用的标题字符串。默认为上一个场景的标题，如果空间不足则为 "Back"。使用 headerBackTitleVisible: false 可隐藏. | string | no | iOS | yes |
| headerBackTitleStyle | 标题栏返回标题的样式对象. | object | no | iOS | yes |
| headerBackImageSource | 在标题栏中显示为返回按钮图标的图像. | string | no | all | yes |
| headerLargeStyle | 显示大标题时的标题栏样式. | object | no | iOS | no |
| headerLargeTitle | 是否启用大标题，滚动时折叠为常规标题. | string | no | iOS | no |
| headerLargeTitleShadowVisible | 显示大标题时标题栏的投影是否可见. | boolean | no | iOS | no |
| headerLargeTitleStyle | 标题栏中大标题的样式对象. | object | no | iOS | no |
| headerShown | 是否显示标题栏。默认显示标题栏。设置为 false 可隐藏标题栏. | boolean | no | all | yes |
| headerStyle | 标题栏的样式对象. | object | no | all | yes |
| headerShadowVisible | 是否隐藏标题上的标高阴影 (Android) 或底部边框 (iOS)。 | boolean | no | Android，iOS | yes |
| headerTransparent | 指示导航栏是否半透明的布尔值. | boolean | no | all | yes |
| headerBlurEffect7.3.11+ | 半透明标题的模糊效果。 headerTransparent 选项需要设置为 true 才能正常工作. | string | no | iOS | yes |
| headerBackground | 返回一个 React 元素以呈现为标题背景的函数。这对于使用图像或渐变等背景非常有用. | function | no | all | yes |
| headerTintColor | 标题的色调颜色。更改后退按钮和标题的颜色. | string | no | all | yes |
| headerLeft | 返回一个 React 元素以显示在标题左侧的函数。这取代了后退按钮。请参阅 headerBackVisible 以显示左侧元素的后退按钮. | function | no | all | yes |
| headerRight | 返回一个 React 元素以显示在标题右侧的函数. | function | no | all | yes |
| headerTitle | 字符串或返回要由标头使用的 React 元素的函数。默认为屏幕的标题或名称. | string | function | no | all | yes |
| headerTitleAlign | 如何对齐标题标题。在 iOS 以外的平台上默认为左对齐。iOS 不支持。它始终以 iOS 为中心，无法更改. | 'left' | 'right' | no | Android | yes |
| headerTitleStyle | 标题的样式对象. | object | no | all | yes |
| headerSearchBarOptions | 在 iOS 上呈现本机搜索栏的选项. | object | no | Android，iOS | yes |
| header | 使用自定义标头代替默认标头. | function | no | all | yes |
| statusBarAnimation | 设置状态栏动画（类似于 StatusBar 组件）。默认在 iOS 上淡入淡出，在 Android 上不淡入淡出. | 'fade' | 'none' | 'slide' | no | Android，iOS | no |
| statusBarHiddendeprecated from 7.3.11 | 状态栏是否应在此屏幕上隐藏. | boolean | no | Android，iOS | yes |
| statusBarStyle | 设置状态栏颜色（类似于 StatusBar 组件）。默认为自动. | string | no | Android，iOS | yes |
| statusBarColordeprecated from 7.3.11 | 设置状态栏颜色（类似于 StatusBar 组件）。默认为初始状态栏颜色。 | string | no | Android | yes |
| statusBarTranslucentdeprecated from 7.3.11 | 设置状态栏的半透明度（类似于StatusBar组件）。默认为 false. | boolean | no | Android | yes |
| contentStyle | 场景内容的样式对象. | object | no | all | yes |
| customAnimationOnGesturedeprecated from 7.3.11 | 关闭手势是否应使用提供给动画道具的动画。默认为 false | boolean | no | iOS | yes |
| fullScreenGestureEnabled7.3.11+ | 关闭手势是否适用于整个屏幕。使用手势来关闭此选项会产生与 simple_push 相同的过渡动画。可以通过设置 customAnimationOnGesture 属性来更改此行为。由于平台限制，无法实现默认的 iOS 动画。默认为 false。 | boolean | no | iOS | yes |
| gestureEnabled7.3.11+ | 是否可以使用手势关闭此屏幕。默认为 true。 | boolean | no | iOS | yes |
| animationTypeForReplace | 当此屏幕替换另一个屏幕时要使用的动画类型。默认为弹出。 | 'push' | 'pop' | no | Android，iOS | yes |
| animation | 按下或弹出时屏幕应如何呈现动画。 | 'default' | 'fade' | 'fade_from_bottom' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left' | 'none' | 'flip' | 'iosdeprecated from 7.3.11' | 'ios_from_left7.3.12+' | 'ios_from_right7.3.12+' | no | Android，iOS | yes |
| presentation | 画面应该如何呈现。 | 'card' | 'modal' | 'transparentModal' | 'containedModal' | 'fullScreenModal' | 'formSheet' | no | Android，iOS | yes |
| orientation | 屏幕使用的显示方向。 | 'default' | 'all' | 'portrait' | 'portrait_up' | 'portrait_down' | 'landscape' | 'landscape_left' | 'landscape_right' | no | Android，iOS | yes |
| autoHideHomeIndicator | 指示主页指示器是否应该保持隐藏的布尔值。默认为 false。 | boolean | no | iOS | yes |
| gestureDirection | 设置滑动以关闭屏幕的方向。 | 'vertical' | 'horizontal' | no | iOS | yes |
| animationDuration | slip_from_bottom、fade_from_bottom7.3.11+、fade 和 simple_push 过渡的持续时间（以毫秒为单位）。默认为 350。 | number | no | iOS | yes |
| navigationBarColor | 设置导航栏颜色。默认为初始状态栏颜色。 | string | no | Android | no |
| navigationBarHidden | 指示是否应隐藏导航栏的布尔值。默认为 false。 | boolean | no | Android | no |
| freezeOnBlur | 布尔值，指示是否阻止非活动屏幕重新渲染。默认为 false。当react-native-screens包中的enableFreeze()在应用程序顶部运行时，默认为true。 | boolean | no | Android,iOS | yes |
| headerBackButtonDisplayMode7.3.11+ | 后退按钮如何显示图标和标题。 | 'default' | 'generic' | 'minimal ' | no | iOS | yes |
| animationMatchesGesture7.3.11+ | 要解除的手势是否应使用提供给动画道具的动画。默认为false。不会影响以模式呈现的屏幕的行为。 | boolean | no | iOS | yes |
| sheetElevation7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 描述底部工作表阴影高度的整数值，影响底部工作表的阴影高度 |
number | no | Android | no |
| sheetExpandsWhenScrolledToEdge7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 控制工作表在滚动时是否应展开到更大的悬停位置。 |
boolean | no | iOS | no |
| sheetCornerRadius7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表尝试渲染时使用的圆角半径。 |
number | no | Android,iOS | no |
| sheetInitialDetentIndex7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表打开后应展开到的悬停位置的索引。 |
number | no | Android,iOS | no |
| sheetGrabberVisible7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 布尔值，指示工作表顶部是否显示抓取器。 |
boolean | no | iOS | no |
| sheetLargestUndimmedDetentIndex7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表下方视图不会被调暗的最大悬停位置索引。 |
'none' | 'last' | no | Android,iOS | no |
| statusBarBackgroundColor7.3.11+ | 设置状态栏背景颜色（类似于 StatusBar 组件）。默认为初始状态栏颜色。 | string | no | Android | yes |
| label7.3.11+ | 屏幕的标签，用于无障碍辅助功能。 | string | no | Android,iOS | yes |
| fullScreenGestureShadowEnabled7.3.11+ | 启用全屏关闭页面的手势在过渡过程中是否在视图下方显示阴影。 | boolean | no | Android,iOS | yes |
| gestureResponseDistance7.3.11+ | 切换页面时手势操作在页面的区域设置。 | object | no | Android,iOS | yes |
| headerButton7.3.11+ | 左右按钮统一通用样式配置。 | string | no | Android,iOS | yes |
Events
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| transitionStart | 当当前屏幕的过渡动画开始时，会触发此事件。 | function | no | all | yes |
| transitionEnd | 当当前屏幕的过渡动画结束时，会触发此事件。 | function | no | all | yes |
| gestureCancel7.3.11+ | 侧滑返回操作被取消时触发的事件。 | function | no | iOS | yes |
Hooks7.3.11+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| useAnimatedHeaderHeight7.3.11+ | 钩子返回一个表示标题高度的动画值。 | function | no | all | yes |
以下为@react-navigation/native-stack结合社区版react-native-screens使用的基本属性，属性已验证，更多属性详情请查看 react-navigation/native-stack 的文档介绍，后续该使用场景不在维护。
详细内容如下：
Props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| id | 为导航器设置一个可选的唯一标识符。该 ID 可用于在子导航器中通过 navigation.getParent 方法引用此导航器 | string | no | all | yes |
| initialRouteName | 指定导航器首次加载时要渲染的初始路由名称. | string | no | all | yes |
| screenOptions | 为此导航器中所有屏幕配置默认的选项对象，用于统一设置屏幕的呈现方式. | object | no | all | yes |
| layout7.3.11+ | 布局是一个包裹导航器的包装器。它可以通过包装器为导航器增强额外的用户界面。与手动在导航器外部添加包装器不同，布局回调中的代码可以访问导航器的状态、配置选项等信息。 | object | no | all | yes |
| screenLayout7.3.11+ | 屏幕布局是导航器中每个屏幕的包装器。它可以更便捷地为导航器中的所有屏幕提供错误边界和 Suspense 回退内容，或者为每个屏幕包裹额外的用户界面。 | object | no | all | yes |
| screenListeners7.3.11+ | 你可以向导航器组件传递一个名为 screenListeners 的属性，在此处可以为此导航器中所有屏幕的事件指定监听器。 | object | no | all | yes |
| isPreventKeyboardPopUp7.3.13+ | 可以向导航器组件Stack.Navigator传递一个名为 isPreventKeyboardPopUp 的属性，用于控制键盘弹起时内容是否避让。默认为 false，设置为 true 时内容不会进行避让。 | boolean | no | harmony | yes |
Options & screenOptions
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| title | 可用作headerTitle回退的字符串. | string | no | all | yes |
| headerBackButtonMenuEnabled | 布尔值，指示在长按 iOS 14 及以上版本的返回按钮时是否显示菜单，默认为 true | boolean | no | iOS | no |
| headerBackVisible | 返回按钮在标题栏中是否可见。如果已指定 headerLeft，可以使用此属性在 headerLeft 旁边显示返回按钮. | boolean | no | Android,iOS | no |
| headerBackTitle | iOS 上返回按钮使用的标题字符串。默认为上一个场景的标题，如果空间不足则为 "Back"。使用 headerBackTitleVisible: false 可隐藏. | string | no | iOS | no |
| headerBackTitleStyle | 标题栏返回标题的样式对象. | object | no | iOS | no |
| headerBackImageSource | 在标题栏中显示为返回按钮图标的图像. | string | no | all | yes |
| headerLargeStyle | 显示大标题时的标题栏样式. | object | no | iOS | no |
| headerLargeTitle | 是否启用大标题，滚动时折叠为常规标题. | string | no | iOS | no |
| headerLargeTitleShadowVisible | 显示大标题时标题栏的投影是否可见. | boolean | no | iOS | no |
| headerLargeTitleStyle | 标题栏中大标题的样式对象. | object | no | iOS | no |
| headerShown | 是否显示标题栏。默认显示标题栏。设置为 false 可隐藏标题栏. | boolean | no | all | yes |
| headerStyle | 标题栏的样式对象. | object | no | all | yes |
| headerShadowVisible | 是否隐藏标题上的标高阴影 (Android) 或底部边框 (iOS)。 | boolean | no | Android，iOS | yes |
| headerTransparent | 指示导航栏是否半透明的布尔值. | boolean | no | all | yes |
| headerBlurEffect | 半透明标题的模糊效果。 headerTransparent 选项需要设置为 true 才能正常工作. | string | no | iOS | no |
| headerBackground | 返回一个 React 元素以呈现为标题背景的函数。这对于使用图像或渐变等背景非常有用. | function | no | all | yes |
| headerTintColor | 标题的色调颜色。更改后退按钮和标题的颜色. | string | no | all | yes |
| headerLeft | 返回一个 React 元素以显示在标题左侧的函数。这取代了后退按钮。请参阅 headerBackVisible 以显示左侧元素的后退按钮. | function | no | all | yes |
| headerRight | 返回一个 React 元素以显示在标题右侧的函数. | function | no | all | yes |
| headerTitle | 字符串或返回要由标头使用的 React 元素的函数。默认为屏幕的标题或名称. | string | function | no | all | yes |
| headerTitleAlign | 如何对齐标题标题。在 iOS 以外的平台上默认为左对齐。iOS 不支持。它始终以 iOS 为中心，无法更改. | 'left' | 'right' | no | Android | yes |
| headerTitleStyle | 标题的样式对象. | object | no | all | yes |
| headerSearchBarOptions | 在 iOS 上呈现本机搜索栏的选项. | object | no | Android，iOS | no |
| header | 使用自定义标头代替默认标头. | function | no | all | no |
| statusBarAnimation | 设置状态栏动画（类似于 StatusBar 组件）。默认在 iOS 上淡入淡出，在 Android 上不淡入淡出. | 'fade' | 'none' | 'slide' | no | Android，iOS | no |
| statusBarHidden | 状态栏是否应在此屏幕上隐藏. | boolean | no | Android，iOS | no |
| statusBarStyle | 设置状态栏颜色（类似于 StatusBar 组件）。默认为自动. | string | no | Android，iOS | no |
| statusBarColor | 设置状态栏颜色（类似于 StatusBar 组件）。默认为初始状态栏颜色。 | string | no | Android | no |
| statusBarTranslucent | 设置状态栏的半透明度（类似于StatusBar组件）。默认为 false. | boolean | no | Android | no |
| contentStyle | 场景内容的样式对象. | object | no | all | yes |
| customAnimationOnGesturedeprecated from 7.3.11 | 关闭手势是否应使用提供给动画道具的动画。默认为 false | boolean | no | iOS | no |
| fullScreenGestureEnabled | 关闭手势是否适用于整个屏幕。使用手势来关闭此选项会产生与 simple_push 相同的过渡动画。可以通过设置 customAnimationOnGesture 属性来更改此行为。由于平台限制，无法实现默认的 iOS 动画。默认为 false。 | boolean | no | iOS | no |
| gestureEnabled | 是否可以使用手势关闭此屏幕。默认为 true。 | boolean | no | iOS | no |
| animationTypeForReplace | 当此屏幕替换另一个屏幕时要使用的动画类型。默认为弹出。 | 'push' | 'pop' | no | Android，iOS | no |
| animation | 按下或弹出时屏幕应如何呈现动画。(ios_from_left,ios_from_right，6.9.26版本不支持，flip实际效果为位移动画，与default效果一致。) | 'default' | 'fade' | 'fade_from_bottom' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left' | 'none' | 'flip' | 'ios_from_left' | 'ios_from_right' | no | Android，iOS | yes |
| presentation | 画面应该如何呈现。 | 'card' | 'modal' | 'transparentModal' | 'containedModal' | 'fullScreenModal' | 'formSheet' | no | Android，iOS | partially('card' | 'transparentModal') |
| orientation | 屏幕使用的显示方向。 | 'default' | 'all' | 'portrait' | 'portrait_up' | 'portrait_down' | 'landscape' | 'landscape_left' | 'landscape_right' | no | Android，iOS | no |
| autoHideHomeIndicator | 指示主页指示器是否应该保持隐藏的布尔值。默认为 false。 | boolean | no | iOS | no |
| gestureDirection | 设置滑动以关闭屏幕的方向。 | 'vertical' | 'horizontal' | no | iOS | no |
| animationDuration | slip_from_bottom、fade_from_bottom、fade 和 simple_push 过渡的持续时间（以毫秒为单位）。默认为 350。 | number | no | iOS | yes |
| navigationBarColor | 设置导航栏颜色。默认为初始状态栏颜色。 | string | no | Android | no |
| navigationBarHidden | 指示是否应隐藏导航栏的布尔值。默认为 false。 | boolean | no | Android | no |
| freezeOnBlur | 布尔值，指示是否阻止非活动屏幕重新渲染。默认为 false。当react-native-screens包中的enableFreeze()在应用程序顶部运行时，默认为true。 | boolean | no | Android,iOS | no |
| headerBackButtonDisplayMode7.3.11+ | 后退按钮如何显示图标和标题。 | 'default' | 'generic' | 'minimal ' | no | iOS | yes |
| animationMatchesGesture7.3.11+ | 要解除的手势是否应使用提供给动画道具的动画。默认为false。不会影响以模式呈现的屏幕的行为。 | boolean | no | iOS | no |
| sheetElevation7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 描述底部工作表阴影高度的整数值，影响底部工作表的阴影高度 |
number | no | Android | no |
| sheetExpandsWhenScrolledToEdge7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 控制工作表在滚动时是否应展开到更大的悬停位置。 |
boolean | no | iOS | no |
| sheetCornerRadius7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表尝试渲染时使用的圆角半径。 |
number | no | Android,iOS | no |
| sheetInitialDetentIndex7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表打开后应展开到的悬停位置的索引。 |
number | no | Android,iOS | no |
| sheetGrabberVisible7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 布尔值，指示工作表顶部是否显示抓取器。 |
boolean | no | iOS | no |
| sheetLargestUndimmedDetentIndex7.3.11+ | 仅当演示文稿设置为formSheet时才有效。 工作表下方视图不会被调暗的最大悬停位置索引。 |
'none' | 'last' | no | Android,iOS | no |
Events
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| transitionStart | 当当前屏幕的过渡动画开始时，会触发此事件。 | function | no | all | no |
| transitionEnd | 当当前屏幕的过渡动画结束时，会触发此事件。 | function | no | all | no |
Hooks7.3.11+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| useAnimatedHeaderHeight | 钩子返回一个表示标题高度的动画值。 | function | no | all | yes |
5. 遗留问题
6. 其他
7. 开源协议
本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。