考虑到每个屏幕都有不同的 header，我如何修改抽屉导航器的 header 结构？

Question

 import * as React from "react";

import { SafeAreaView, useWindowDimensions } from "react-native";
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from "@react-navigation/native";

import { RegistrationScreen } from './src/screens/Registration/RegistrationScreen';
import {LoginScreen} from './src/screens/Login/LoginScreen';
import {NewAnuncioScreen} from './src/screens/NewAnuncio/NewAnuncioScreen';
import { FeedScreen } from "./src/screens/Feed/FeedScreen";

import { FontAwesome, AntDesign, FontAwesome5, Entypo} from '@expo/vector-icons';


const Drawer = createDrawerNavigator()

const App = () => {

  const dimensions = useWindowDimensions();

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Feed" screenOptions={{
          headerStyle: { backgroundColor: "#f2bc1b" , height: 55},
          drawerType: dimensions.width >= 821 ? 'permanent' : 'front',
          overlayColor: 'transparent',
          drawerContent:{CustomDrawerContent}
        }}>
          <Drawer.Screen name="Feed" component={FeedScreen}/>
          <Drawer.Screen name="Registration" component={RegistrationScreen} options={{ headerShown: false }} />
          <Drawer.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
          {/* <Drawer.Screen name="Criar Anúncio" component={NewAnuncioScreen} /> */}
        </Drawer.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )

  
}

export default App;

**I want the header´s structures can vary like that: enter image description here enter image description here

But i don´t know how to make this. If someone help me i thanks.**

Answer 1

You should pass the Drawer props to your custom drawer and retrieve the navigation index.

drawerContent = {(props) => <CustomDrawerContent {...props} />}

Then

const CustomDrawerContent = (props) => {
  const [index, setIndex] = useState(0)

useEffect(() => {
  setIndex(props.state.index);
}, [props])

...

Now according to this index you can change the appearance and the behavior your drawer content.