Заголовки навигации с двойным стеком

#javascript #reactjs #react-native #navigation

Вопрос:

Мое приложение показывает 2 заголовка. Я хочу, чтобы только один заголовок, которому я следовал, работал нормально, но не для меня. преподаватель использовал навигацию react v5, я использую v6. вот код, который, возможно, захочется увидеть. У меня есть 3 экрана, в 1 стеке есть два экрана, а в другом-один. пожалуйста, помогите мне это исправить.

 import * as React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./Screens/homeScreen";
import Archived from "./Screens/archived";
import NotesDetails from "./Screens/notesDetails";

const StackHome = createNativeStackNavigator();
const StackArchived = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator>
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

const ArchivedScreenStack = ({ navigation }) => {
  return (
    <StackArchived.Navigator>
      <StackArchived.Screen name="Home" component={Archived} />
    </StackArchived.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreenStack} />
        <Drawer.Screen name="NotesDetails" component={ArchivedScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
 

Ответ №1:

Навигаторы стека могут выбирать параметры (в качестве реквизитов), которые определяют их поведение. Вы можете использовать headerShown реквизит, чтобы скрыть заголовок для данного навигатора стека.

https://reactnavigation.org/docs/stack-navigator/#headershown

 const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator
      screenOptions={{ headerShown: false }}
    >
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};