Add a stack navigator inside a tab navigator-CodePudding

I want to add TrackList screen to navigate to TrackDetail. I have mine like this, but I know there is an issue. I can't seem to know how to add that functionality to the tracklist.

<Tab.Navigator>
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
        <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
        <Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>

CodePudding user response：

You can only have Tab.Screen elements inside Tab.Navigator. So, just wrap you stacks into another component first. For example, create your stack component like:

    const TrackListStack = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
      );
    };

and add the component into your navigator:

    <Tab.Navigator>
      <Tab.Screen name="TrackListStack" component={TrackListStack} />
      <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>

CodePudding user response：

You can't. An appropriate way would be to use this way

<Tab.Navigator>
        <Tab.Screen name="TabListScreen" component={TabListScreen} />
        <Tab.Screen name="AnotherTabListScreen" component={AnotherTabListScreen} />
</Tab.Navigator>


<Stack.Navigator
  initialRouteName="TabNavigator">
  <Stack.Screen name="TabNavigator" component={TabNavigator} />
  <Stack.Screen name="ScreenDetail" component={ScreenDetail} />
</Stack.Navigator>

CodePudding user response：

You can not wrap Stack element inside into Tab navigation, you need to create separate function for Stack navigation and you can add this Stacknavigation function into Tab Navigation Like :-

 const StackNavigation = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
      );
    };

    <Tab.Navigator>
      <Tab.Screen name="TrackListStack" component={StackNavigation} />
      <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>