问题描述
HomeStackNavigator(stack)
---HomeTabsNavigator(Tab)
---FirstTab(stack)
---CreatePost(screen)
---Posts(Tab)
---Following(screen)
---Feed(screen) <----- functional component in here, lets call it component1
---SecondTab
...
---Screen2
我希望能够从提要屏幕中的功能组件导航到屏幕 2.我曾尝试查看 React Native 文档中的嵌套导航文档,但没有成功.
I want to be able to navigate from a functional component in the feed screen to screen 2. I've tried looking at the nested navigation docs in react native docs but no luck.
推荐答案
您可以使用 RootNavigation 方法:https://reactnavigation.org/docs/navigating-without-navigation-prop/
You can use the RootNavigation approach: https://reactnavigation.org/docs/navigating-without-navigation-prop/
首先在目录根目录下创建一个名为 RootNavigation.js
的文件看起来像这样:
First you create a file at your directory root called RootNavigation.js
that looks like this:
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
然后您将 navigationRef
作为引用传递给您的 NavigationContainer
:
Then you pass the navigationRef
as a ref to your NavigationContainer
:
import * as RootNavigation from './RootNavigation';
// ...
<NavigationContainer ref={RootNavigation.navigationRef}>
<HomeStackNavigator />
</NavigationContainer>
这使您可以从任何地方导航.
This allows you to navigate from anywhere.
然后您可以在 Feed
屏幕中执行以下操作:
Then you can do something like this in your Feed
screen:
const Feed = () => {
// ...
<Button
title="Navigate to SecondTab"
onPress={() => RootNavigation.navigate('SecondTab')}
/>
// ...
};
这篇关于如何从功能组件导航,从选项卡导航器中的屏幕,该选项卡导航器嵌套在父堆栈导航器中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!