#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>
);
};