时间戳

首页 > 解决方案 > React navigation 5 - 如何概括导航？

javascript - React navigation 5 - 如何概括导航？

问题描述

想象一下这个导航系统：

-TabNavigator (-Tab Navigator-)
  --HomeTab (Tab Screen)
    ---HomeStackNavigator (-Stack Navigator-)
       ----> Home (Stack Screen)
       ----> Likes (Stack Screen)
       ----> Profile (-Stack Navigator- (the same as "ProfileTab > ProfileStackNavigator"))

  --ProfileTab (Tab Screen)
    ---ProfileStackNavigator (-Stack Navigator-)
       ----> Profile (Stack Screen)
       ----> Likes (Stack Screen)
       ----> Followers (Stack Screen)
       ----> ProfileEdition (Stack Screen)

我正在实现一个通用组件，它可以位于“TabNavigator > HomeTab > HomeStackNavigator > Likes”和“TabNavigator > ProfileTab > ProfileStackNavigator > Likes”（或任何我想要的地方）

当按下该组件时，将推送另一个配置文件屏幕，通过导航传递参数。

navigation.push("Profile", params);

问题是，如果我不在"HomeTab > HomeStackNavigator > ProfileStackNavigator"或"ProfileTab > Profile"内，导航将无法正常工作......例如，如果我在"HomeTab > HomeStackNavigator > Likes"中，当我按下组件，它没有正确传递参数。相反，如果我这样做

navigation.push("Profile", {screen: "Profile", params});

它工作得很好，但是......如果我在“ProfileTab > ProfileStackNavigator > Likes”中，导航将无法正常工作

有什么想法可以概括这个导航，以便我可以在任何我想要的地方重用这个组件？

我曾想过做这样的事情：

   if (current route is not inside TabNavigator > ProfileTab > ProfileStackNavigator) {
       navigation.push("Profile", params);
   } else {
       navigation.push("Profile", {screen: "Profile", params});
   }

我的第二个选择

我的第二个选择是从 HomeTab 中删除 Profile Stack Navigator，而是将其所有屏幕作为导航器的屏幕，如下所示：

-TabNavigator (-Tab Navigator-)
  --HomeTab (Tab Screen)
    ---HomeStackNavigator (-Stack Navigator-)
       ----> Home (Stack Screen)
       ----> Likes (Stack Screen)
       ----> Profile (Stack Screen)
       ----> Followers (Stack Screen)
       ----> ProfileEdition (Stack Screen)

  --ProfileTab (Tab Screen)
    ---ProfileStackNavigator (-Stack Navigator-)
       ----> Profile (Stack Screen)
       ----> Likes (Stack Screen)
       ----> Followers (Stack Screen)
       ----> ProfileEdition (Stack Screen)

然后，我将完全能够做到：

 navigation.push("Profile", params);

但是由于代码重复，我不确定这是否更好。

标签： javascriptreactjsreact-nativereact-navigationreact-navigation-v5

解决方案

你应该Stack Navigator在你的顶部使用Tab Navigator

const TabNavigatorRoutes = () => {
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeTab} />
      <Tab.Screen name="ProfileTab" component={ProfileTab} />
    </Tab.Navigator>
}

const StackRoutes = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="TabNavigator">
                <Stack.Screen name="TabNavigator" component={TabNavigatorRoutes} />
                <Stack.Screen name="Likes" component={Likes} />                
            </Stack.Navigator>
        </NavigationContainer>
    );
};

然后在你的组件中添加你的HomeStackNavigator和ProfileStackNavigator（像以前一样）

推荐阅读