如何从功能组件导航，从选项卡导航器中的屏幕，该选项卡导航器嵌套在父堆栈导航器中 [英] How to Navigate from a functional component, from a screen in a tab navigator, where that tab navigator is nested in a parent stack navigator

问题描述

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')}
    />
    // ...
};

这篇关于如何从功能组件导航，从选项卡导航器中的屏幕，该选项卡导航器嵌套在父堆栈导航器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！