如何从功能组件,选项卡导航器的屏幕中导航,该选项卡导航器嵌套在父堆栈导航器中

时间:2020-07-16 18:52:39

标签: javascript react-native react-navigation react-navigation-stack

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原生文档中的嵌套导航文档,但没有运气。

1 个答案:

答案 0 :(得分:2)

您可以使用RootNavigation方法:https://reactnavigation.org/docs/navigating-without-navigation-prop/

首先,您在目录根目录下创建一个名为RootNavigation.js的文件 看起来像这样:

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

然后,将navigationRef作为对NavigationContainer的引用:

import * as RootNavigation from './RootNavigation';
// ...
<NavigationContainer ref={RootNavigation.navigationRef}>
   <HomeStackNavigator />
</NavigationContainer>

这使您可以从任何地方导航。

然后,您可以在Feed屏幕上执行以下操作:

const Feed = () => {
    // ...
    <Button
      title="Navigate to SecondTab"
      onPress={() => RootNavigation.navigate('SecondTab')}
    />
    // ...
};