使用 react-navigation 在子组件内路由 5.x

Question

我的 React Native (0.62) 应用程序中有几个屏幕。这是屏幕结构：

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 6 components listed below
       --Home.js
         --Upload.js
         --MyFavoritePost.js
             --List.js 
               --Item.js
                 --Itemdetail.js

List.js、Item.js和Itemdetail.js都在MyFavoritePost.js

之下

这是 App.js 中声明的 Stack:

<NavigationContainer>
  <Stack.Navigator InitialRouteName="Splash">
    <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}}/>
    <Stack.Screen name="App" component={AppScreen} options={{headerShown:false}} />
  </Stack.Navigator>
</NavigationContainer>

这里是声明的 AStack AppScreen.js：

          <AStack.Navigator initialRouteName="Home">
            <AStack.Screen name="Home" component={Home} />
            <AStack.Screen name="Upload" component={Upload} />
            <AStack.Screen name="List" component={Artlist} />
            <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
            <AStack.Screen name="Item" component={Imageitem} />
            <AStack.Screen name="ItemDetail" component={Itemdetail} />
          </AStack.Navigator>

AStack 的声明似乎太过分了，因为 List.js Item.js 和 Itemdetail.js 实际上是为了 MyFavoritePost.js 的表示。将 AStack 声明为 3 个组件是否有意义，如下所示：

      <AStack.Navigator initialRouteName="Home">
        <AStack.Screen name="Home" component={Home} />
        <AStack.Screen name="Upload" component={Upload} />
        <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
      </AStack.Navigator>

在每个组件 Upload 和 MyFacoritePost 中，使用 navigation.navigate("component") 路由。新的路由结构变为：

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 3 components listed below
       --Home.js
         --Upload.js   //routing with navigation.navigate() within Upload
         --MyFavoritePost.js //routing with navigation.navigate() within MyFavoritePost
             {--List.js 
               --Item.js
                 --Itemdetail.js}  //those 3 components are removed and not to be declared in navigation stack & will route with navigation.navigate()

新的路由结构有意义吗？有什么问题吗？

Answer 1

不，如果您删除 MyFavoritePost 组件下的三屏，则第二个结构将不起作用，然后您将无法使用 navigation.navigate() 转到该屏幕。你可以做一件事，你可以为这三个屏幕创建一个单独的堆栈导航器，并在 MyFavoritePost 组件中使用。否则第一个结构是完美的。

使用 react-navigation 在子组件内路由 5.x

Routing within sub components with react-navigation 5.x

react-navigation

react-navigation-v5