在 react-navigation6.x 版本中,用于导航操作的主要方法如下:
navigation.navigate('RouteName')
- 用于导航到指定的屏幕(route)。如果目标路由已经在堆栈中(对于Stack Navigator),则它会移动到栈顶并显示该屏幕;对于Tabs或Drawer等其他类型的导航器,它会切换到相应的tab或drawer内容。
navigation.push('RouteName', params)
- 在 `react-navigation` 6.x 中,`push` 方法已经被弃用,推荐直接使用 `navigate` 方法。不过在早期版本中,`push` 方法用于向当前导航堆栈中添加一个新的路由项,即使目标屏幕已经存在于堆栈中,也会创建一个新的实例并将它推送到栈顶。
navigation.goBack()
- 这个方法用于返回上一个屏幕。在堆栈导航中,这相当于弹出栈顶屏幕并显示前一个屏幕。
navigation.pop()
- 同样用于返回上一页,但它接受可选的参数,如 `navigation.pop(n)` 可以一次弹出多个屏幕。默认情况下,它与 `goBack` 功能相同,即仅弹出栈顶屏幕。
navigation.dispatch(action)
- 用于执行自定义导航动作。这个方法更为灵活,可以直接操作导航状态,例如你可以通过 `CommonActions` 导出的动作来实现各种复杂的导航行为,包括但不限于 `navigate`、`reset`、`pop` 和 `push` 等。
举例来说:
import { CommonActions } from '@react-navigation/native';
// 使用 navigate
navigation.navigate('Profile', { userId: 123 });
// 使用 dispatch 替代 push
navigation.dispatch(CommonActions.push({
name: 'Detail',
params: { itemId: 456 },
}));
// 返回上一页
navigation.goBack();
// 弹出栈顶页面
navigation.pop();
请注意,在实际应用中,确保你正确地注入了 `navigation` prop 到需要进行导航操作的组件中。通常这可以通过使用 `useNavigation` 钩子(函数组件)或 `withNavigation` 高阶组件(类组件)来实现。
本文暂时没有评论,来添加一个吧(●'◡'●)