如何在堆栈导航器中进行从子级到另一个子级 v5 的嵌套导航？

Question

我想做一些从子屏幕到另一个子屏幕的嵌套导航时卡住了。下面是我需要的堆栈导航。

  Home Screen
     -> Add User
     -> View Users 
          -> No Users(Shown only incase no users found)
          -> Users List(Shown when users Data found)
              ->View Details

下面是我尝试使用 ViewUsers 的嵌套导航复制上述堆栈导航器的代码。但是我对此感到困惑 https://reactnavigation.org/docs/nesting-navigators/

 const HomeStack = createStackNavigator();
 function UserDetailsRoot(){
 return (
    <HomeStack.Navigator>
        <HomeStack.Screen name="No Users" component={NoUsers} />
        <HomeStack.Screen name="Users List" component={UsersList} />
        <HomeStackScreen  name="User Details" component={UserDetails} />
    </HomeStack.Navigator>

   )
 }
 const HomeStackScreen = () => (
<HomeStack.Navigator>
    <HomeStack.Screen name="Home " component={HomeScreen} />
    <HomeStack.Screen name="Add User" component={AddUsers} />
    <HomeStack.Screen name="UserDetailsRoot" component={UserDetailsRoot} />
</HomeStack.Navigator>

);

export default () => (
<NavigationContainer>
    <HomeStackScreen />
</NavigationContainer>
);

感谢任何帮助。谢谢

Answer 1

我认为您忽略了嵌套导航器的要点。在您的代码中，您将 Stack 嵌套在 Stack 中，我认为这是不正确的。我可能会做的是这样的

const MainStackScreen = () => (
<HomeStack.Navigator>
    <HomeStack.Screen name="Home " component={HomeScreen} />
    <HomeStack.Screen name="AddUser" component={AddUsers} />
    <HomeStack.Screen name="UsersList" component={UsersList} />
    <HomeStack.Screen name="UserDetails" component={UserDetails} />
</HomeStack.Navigator>
);

export default () => (
<NavigationContainer>
    <MainStackScreen />
</NavigationContainer>
);

您绝对不需要“无用户”状态的屏幕，我假设您在 UsersList 中呈现 SectionList 或 FlatList，因此如果您的 API return 为空，您可以使用 ListEmptyComponent 来处理特定情况。

当您需要将一个导航器的功能与另一个导航器的功能组合时，嵌套导航器也很有用，例如将 StackNavigator 放置在 TabNavigator 的每个选项卡内是一种常见模式。另一种情况是，当您需要在 Stack 上将某些内容呈现为模态时，在这种情况下，您需要添加一个 StackNavigator 作为容器。

希望对您有所帮助:)

如何在堆栈导航器中进行从子级到另一个子级 v5 的嵌套导航？

How to do nested navigation in stack navigator from child to another child v5?

ios

react-native

react-native-navigation

stack-navigator

react-navigation-v5