React 导航 v6 在查看嵌套屏幕之前不会导航到该屏幕

Question

在react-native（Expo托管和react-navigation v6）应用程序中，我的导航结构如下：

当我想使用

PayWall

从

ListPage

屏幕导航到

navigation.navigate('ListPage')

时，它会抛出

The action 'NAVIGATE' with payload {"name":"ListPage"} was not handled by any navigator.

但是如果我先手动访问

ListPage

，那么使用

navigation.navigate('ListPage')

的导航就可以正常工作。

<NavigationContainer>
   <StartScreenStack navigation={undefined} route={undefined} />
</NavigationContainer>

const startScreenStack = createNativeStackNavigator();
export const StartScreenStack = () => (
    <startScreenStack.Navigator>
      <startScreenStack.Screen name={"Hub"} component={TabNavigator} />
      <libraryStack.Screen name={"PayWall"} component={PayWall} />
    </startScreenStack.Navigator>
);

const Tab = createBottomTabNavigator();
export const TabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name={"Home"} component={StartScreen} /> // The app starts at this screen
    <Tab.Screen name={"Library"} component={LibraryStack} />
  </Tab.Navigator>
);

const libraryStack = createNativeStackNavigator();
export const LibraryStack = () => (
   <libraryStack.Navigator>
     <libraryStack.Screen name={"MainLibrary"} component={LibraryScreen} /> // The library tab starts at this screen
     <libraryStack.Screen name={"ListPage"} component={ListScreen} />
  </libraryStack.Navigator>
);

此外，

 navigation.navigate('Hub', { screen:"Library",params:{screen:"ListPage"}})

仅导航至根

startScreen

我不明白这种行为，为什么手动访问屏幕会导致成功导航？

Answer 1

首先：你的设置有点混乱：

• 不要用小写字母来命名像

  startScreenStack

  或

  libraryStack

  这样的组件
• 组件应具有不同的顺序并具有不同的名称：
  • LibraryStack（这个名字不错）
  • BottomTabsNavigator - 选项卡
  • RootStack - StartScreenStack（root 是一个常用名称，用于确定应用程序顶部的堆栈）
  • 应用程序 - 导航容器

第二：你已经很接近了，但是如果你想在这两个屏幕之间导航，你可以这样做：

navigation.navigate('Library', { 
  screen: "ListPage"
})