[英]How to use useNavigation() within @react-navigation drawer?
Current Behavior当前行为
I have a react-native application that use react-navigation
v5 for the routing.我有一个使用
react-navigation
v5 进行路由的 react-native 应用程序。
Because of (1) , my structure is drawerNavigator (a) > stackNavigator (b) > views (c)
.由于(1) ,我的结构是
drawerNavigator (a) > stackNavigator (b) > views (c)
。
When I try to call the useNavigation()
hook within my <DrawerContent />
, I have the following error:当我尝试在
<DrawerContent />
调用useNavigation()
钩子时,出现以下错误:
Error: We couldn't find a navigation object. Is your component inside a navigator?
at useNavigation (bundle.js:8766)
Yes, I am not inside the stackNavigator
so the hook cannot be called是的,我不在
stackNavigator
因此无法调用钩子
Expected Behavior预期行为
I expect to have navigation available within my <DrawerContent />
.我希望在我的
<DrawerContent />
提供导航。
Your Environment您的环境
| software | version |
| ------------------------------ | ------- |
| iOS or Android | iOS, Android and web
| @react-navigation/native | 5.0.0-alpha.41
| @react-navigation/stack | 5.0.0-alpha.63
| @react-navigation/drawer | 5.0.0-alpha.41
| react-native-reanimated | 1.4.0
| react-native-gesture-handler | 1.5.3
| react-native-safe-area-context | 0.6.2
| react-native-screens | 2.0.0-alpha.32
| react-native | https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
| expo | SDK36
| node | v13.5.0
| npm or yarn | 6.13.7
How can I use @react-navigation/stack
inside @react-navigation/drawer
or how should I build my drawer and app with them?我如何在
@react-navigation/drawer
使用@react-navigation/stack
或者我应该如何使用它们构建我的抽屉和应用程序?
This is possible using https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html这可以使用https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
Create RootNavigation
:创建
RootNavigation
:
import { createRef } from 'react';
export const navigationRef = createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
export function goBack() {
navigationRef.current?.goBack();
}
In App.js
:在
App.js
:
import { navigationRef } from './navigation/RootNavigation';
// ...
<NavigationContainer
ref={navigationRef}
>
{children}
</NavigationContainer>
Then import RootNavigation
from any source and you will not have to worry about the react tree.然后从任何来源导入
RootNavigation
,您将不必担心反应树。
I'm also using React Navigation 5x, I followed this guide and still succeed using first approach (for old RNavigation).我也在使用 React Navigation 5x,我遵循了本指南并且仍然成功使用第一种方法(对于旧的 RNavigation)。 Details: mock the
useNavigation
function详细信息:模拟
useNavigation
函数
jest.mock(‘react-navigation-hooks’, () => ({
useNavigation: () => jest.fn(),
useNavigationParam: jest.fn(jest.requireActual(
'react-navigation-hooks'
).useNavigationParam),
}));
You don't have to use useNavigation
if you're on a screen in the Navigator.如果您在导航器中的屏幕上,则不必使用
useNavigation
。
The structure of the navigator is as follows.导航器的结构如下。
The screen movement is as follows.画面移动如下。
Example例子
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('moveScreenName')}
title="Go to moveScreenName"
/>
</View>
);
}
useNavigation
is a hook which gives access to navigation
object. useNavigation
是一个钩子,可以访问navigation
对象。 It's useful when you cannot pass the navigation
prop into the component directly, or don't want to pass it in case of a deeply nested child.当您无法将
navigation
道具直接传递到组件中,或者在嵌套很深的子组件的情况下不想传递它时,这很有用。
useNavigation()
returns the navigation prop of the screen it's inside. useNavigation()
返回它所在屏幕的导航道具。
Example例子
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
You can follow this video in here - https://youtu.be/hLP1G29bbLU您可以在此处关注此视频 - https://youtu.be/hLP1G29bbLU
You can see the usage of useNavigation hook
in the video.您可以在视频中看到
useNavigation hook
的用法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.