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添加为容器。

希望它会对您有所帮助：）

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

1 个答案: