Вложенность StackNavigator внутри BottomTabNavigator реагирует на навигацию v5

Question

Проходя через мой первый проект React Native, используя response-navigation v5, и изо всех сил пытаясь отработать логику c за несколькими навигаторами в одном.

Я пытался скопировать ' auth-flow ' Настройка отсюда, но у меня есть некоторые дополнительные требования, когда после входа в систему он должен отобразить навигатор bottomTab с тремя элементами (создать, списки, учетную запись), где на втором экране отображается список, отображающий список элементов где щелчок один открывает новый экран для деталей (где я представляю, что эти два экрана будут стеком?)

pseudo routes:
- home
- lists 
    - details  <- nested in the tab navigator screen
- account

текущая настройка:

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
          {isSignedIn ? (
              <Tab.Navigator>
                <Tab.Screen name='List' component={TrackListScreen} />
                <Tab.Screen name='Create' component={TrackCreateScreen} />
                <Tab.Screen name='Account' component={AccountScreen} /> 
              </Tab.Navigator>
          ) : (
            <Stack.Navigator>
              <Stack.Screen name='Signup' component={SignupScreen} />
              <Stack.Screen name='Signin' component={SigninScreen} />
            </Stack.Navigator>
          )}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

Answer 1

Что вам нужно сделать, так это сделать вкладку List собственным навигатором стека. Таким образом, у вас будет это

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        {isSignedIn ? (
          <Tab.Navigator initialRouteName='TrackListNavigator'>
            <Tab.Screen name='TrackListNavigator' component={TrackListNavigator} />
            <Tab.Screen name='Create' component={TrackCreateScreen} />
            <Tab.Screen name='Account' component={AccountScreen} /> 
          </Tab.Navigator>
         ) : (
          <Stack.Navigator>
            <Stack.Screen name='Signup' component={SignupScreen} />
            <Stack.Screen name='Signin' component={SigninScreen} />
          </Stack.Navigator>
        )}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

Итак, вместо вкладки, переходящей к TrackListScreen, она вместо этого перейдет к новому навигатору стека, который содержит этот экран, такой как

export default function TrackListNavigator() {
  return (
    <Stack.Navigator initialRouteName='TrackListScreen'>
      <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    </Stack.Navigator>
  )
}

Таким образом, когда вы не вошли в систему, у вас будет доступ только к экранам Signup и Signin. После входа в систему вы окажетесь на TrackListScreen с доступом к любому другому Stack.Screen, который вы добавите к TrackListNavigator.

Answer 2

В этом сценарии вы бы создали дополнительный удерживающий компонент, например TrackListHome. TrackListHome будет компонентом, который является конкретно StackNavigator, а initialRouteName - это ваш TrackListScreen, а Details - это еще один экран в вашем StackNavigator. Тогда вы сможете вызывать

props.navigation.navigate("TrackListDetail")

Ваш StackNavigator может выглядеть так (TrackListHome)

return (
  <Stack.Navigator initialRouteName={'TrackListScreen'}>
    <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    <Stack.Screen name='TrackListDetail' component={TrackListDetail} />
  </Stack.Navigator>)

Тогда внутри вашей TabNavigation вы будете использовать этот компонент TrackListHome.