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;**Quiero que las estructuras del encabezado puedan variar así: ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí
Pero no sé cómo hacer esto. Si alguien me ayuda, gracias. **
Debe pasar los accesorios del cajón a su cajón personalizado y recuperar el índice de navegación.
drawerContent = {(props) => <CustomDrawerContent {...props} />}Después
const CustomDrawerContent = (props) => { const [index, setIndex] = useState(0) useEffect(() => { setIndex(props.state.index); }, [props]) ...Ahora, de acuerdo con este índice, puede cambiar la apariencia y el comportamiento del contenido de su cajón.