Как сделать вложенную навигацию в навигаторе стека от дочернего к другому дочернему 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

Думаю, вам не хватает смысла вложения навигаторов. В вашем коде вы вкладываете стек в стек, что я считаю неправильным. Я бы, наверное, сделал что-то вроде этого

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 возвращается пустым, вы можете использовать ListEmptyComponent чтобы справиться с этим конкретным случаем.

Кроме того, вложение навигаторов полезно, когда вам нужно объединить функции из одного навигатора с другим, например, размещение StackNavigator внутри каждой вкладки TabNavigator является распространенным шаблоном. Другой случай - когда вам нужно отрендерить что-то как модальное через стек, в этом случае вам нужно добавить StackNavigator в качестве контейнера.

Надеюсь, это вам поможет:)