Заголовок навигации React остается прежним

Question

У меня есть вложенные навигаторы, то есть навигатор стека внутри навигатора стека.

при именовании вложенного навигатора отдельные маршруты не получают своего имени, но получают имя родителя.

(т.е. когда я go перехожу на главный экран, заголовок остается "логин / регистрация")

Как мне решить эту проблему?

    export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen
          name="DisclaimerScreen"
          component={DisclaimerScreen}
          options={{headerLeft: null}}
        />
        <Stack.Screen name="Name Screen" component={NameScreen} />
        <Stack.Screen name="Date Screen" component={DateScreen} />
        <Stack.Screen name="GenderScreen" component={GenderScreen} />
        <Stack.Screen name="InfoScreen" component={InfoScreen} /> */}

        <Stack.Screen name="Login/Signup" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}


function Login() {
  return (
    <LoginStack.Navigator headerTitle="Login">
      <LoginStack.Screen
        name="UsernameScreen"
        options={{title: 'Signup'}}
        component={UsernameScreen}
      />
      {/* TODO: ADD another screen for loggin in */}
      <LoginStack.Screen name="LoginScreen" component={LoginScreen} />
      <LoginStack.Screen
        name="MainScreen"
        options={{title: 'Home'}}
        component={Main}
      />
    </LoginStack.Navigator>
  );
}

Answer 1

Причина, по которой он не работает, заключается в том, что вы пытаетесь изменить параметры родительского навигатора внутри дочернего навигатора. Сначала вам не нужно устанавливать заголовок в options prop в компоненте Login для того, что вы пытаетесь сделать:

function Login() {
  return (
    <LoginStack.Navigator>
      <LoginStack.Screen
        name="UsernameScreen"
        component={UsernameScreen}
      />
      {/* TODO: ADD another screen for loggin in */}
      <LoginStack.Screen name="LoginScreen" component={LoginScreen} />
      <LoginStack.Screen
        name="MainScreen"
        component={Main}
      />
    </LoginStack.Navigator>
  );
}

Затем вы можете создать функцию для обработки того, как родительский заголовок заголовка должен измениться в зависимости от дочернего элемента:

function getHeaderTitle(route) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'UsernameScreen';

  switch (routeName) {
    case 'UsernameScreen':
      return 'Signup'
    case 'MainScreen':
      return 'Home';
    // etc...
  }
}

Затем вы можете использовать функцию в родительском навигаторе стека следующим образом:

// ...
 <Stack.Navigator>
      <Stack.Screen 
         name="Login/Signup" 
         component={Login} 
         options={({ route }) => ({
            headerTitle: getHeaderTitle(route),
         })} 
      />
      // ...
</Stack.Navigator>
// ...

Этот подход очень хорошо описан в документации здесь: https://reactnavigation.org/docs/screen-options-resolution/#setting -parent-screen-options-based-on-child-navigators-state .

Обязательно импортируйте getFocusedRouteNameFromRoute из @ response-navigation / native.