cajón personalizado centrado en @react-navigation/drawer no está funcionando correctamente

Estoy construyendo una aplicación que requiere elementos de cajón personalizados. Quiero poder destacar la pantalla seleccionada. Uso Contexto para mantener el estado de la pantalla actual seleccionada y cambia de hecho. cambio Secador Elem es la función que mantiene el número de elemento en Contex y veo que cambia enPress en consola.log. Sin embargo, elementos de la CustomDrawerContent se centran todo independientemente de mi intento de controlarlos. En los docs se dice que la propiedad "enfocada" debe tomar valor booleano y basado en ese elemento enfocado destacado. reactr versión de navegación: 5 Cualquier ayuda es apreciada.

import React, { Component } from 'react';
import { useContext } from 'react';
import { Context } from '../context/settingContext';
import { StyleSheet, Text, View, ImageBackground, TouchableOpacity} from 'react-native';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import FontAwesome, { SolidIcons, RegularIcons, BrandIcons } from 'react-native-fontawesome';
import defaultStyles from '../css/defaultStyles';

function CustomDrawerContent (props){

    const {state} = useContext(Context);
    const {drawerElem} = state.find(elem => elem.hasOwnProperty('drawerElem'));
    const {changeDrawerElem} = useContext(Context);


    return(
        
             {
                    changeDrawerElem(1);
                    props.navigation.navigate('StackNav', { screen: 'MainScreen'} )
                }}
                icon={() => }
                inactiveTintColor = "#000000"
                activeBackgroundColor = "#cdb9a5"
                focused = { () => drawerElem == 1 ? true : false}
             />
              {
                    changeDrawerElem(2);
                    props.navigation.navigate('StackNav', { screen: 'Content' });
                }}
                icon={() => }
                inactiveTintColor = "#000000"
                activeBackgroundColor = "#cdb9a5"
                focused = { () => drawerElem == 2 ? true : false}
              />
              
        
    );
}

const styles = StyleSheet.create(defaultStyles);

export default CustomDrawerContent;

Pregunta hecha hace 3 años, 4 meses, 29 días - Por binarybard

3 Respuestas:

  • Encontré una respuesta que resolvió mi problema, necesitas cambiar tus propinas enfocadas a

    focused={props.state.index ===  props.state.routes.findIndex(e => e.name === 'Головна')}

    Respondida el Dec 17, 2020 a las 00:14 - por binarybard

    Votos positivos: 0 | Votos negativos: 0

  • El problema que veo en tu código es que estás utilizando la propiedad focused de DrawerItem incorrectamente. La propiedad focused debe tomar un valor booleano, no una función. Por lo tanto, en lugar de utilizar una función en focused para comprobar si drawerElem es igual a 1 o 2, debes calcular ese valor fuera del componente CustomDrawerContent y pasarlo directamente a la propiedad focused de cada DrawerItem.

    Aquí te dejo un ejemplo de cómo podrías corregirlo:

    jsx
import React, { useContext } from 'react';
import { Context } from '../context/settingContext';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';
import FontAwesome, { SolidIcons } from 'react-native-fontawesome';
import defaultStyles from '../css/defaultStyles';

function CustomDrawerContent(props) {
    const { state } = useContext(Context);
    const { drawerElem } = state.find(elem => elem.hasOwnProperty('drawerElem'));
    const { changeDrawerElem } = useContext(Context);

    const isDrawerElementFocused = (element) => {
        return drawerElem === element;
    };

    return (
        
             {
                    changeDrawerElem(1);
                    props.navigation.navigate('StackNav', { screen: 'MainScreen' });
                }}
                icon={() => }
                inactiveTintColor="000000"                activeBackgroundColor="cdb9a5"                focused={isDrawerElementFocused(1)}
            />
             {
                    changeDrawerElem(2);
                    props.navigation.navigate('StackNav', { screen: 'Content' });
                }}
                icon={() => }
                inactiveTintColor="000000"                activeBackgroundColor="cdb9a5"                focused={isDrawerElementFocused(2)}
            />
        
    );
}

const styles = StyleSheet.create(defaultStyles);

export default CustomDrawerContent;

    En este código, he creado una función isDrawerElementFocused que devuelve un valor booleano basado en si el elemento actual del cajón es igual al elemento pasado como argumento. Luego, uso esta función para determinar el valor de focused en cada DrawerItem. Espero que esta corrección te ayude a lograr el comportamiento deseado en tu cajón personalizado centrado.

    Respondida el Dec 18, 2020 a las 00:16 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • He revisado tu código y he identificado algunos problemas que pueden estar causando que los elementos del cajón personalizado no se centren correctamente:

    • Errores de sintaxis: Hay varios errores de sintaxis en tu código, como comillas faltantes y llaves de cierre. Asegúrate de corregir estos errores antes de continuar.
    • Uso incorrecto de `focused`: La propiedad `focused` debe ser una función que devuelva un valor booleano, pero en tu código es una expresión arrow que no devuelve nada. Cámbiala a esto:
    
focused: () => drawerElem === 1
    • Falta de `key` en los elementos del cajón: Cada elemento del cajón debe tener una clave única. Añádelas a tus elementos del cajón para mejorar el rendimiento:
    • Uso incorrecto de `onPress`: El controlador de eventos `onPress` debe ser una función, pero en tu código es un objeto. Cámbialo a esto:
    
onPress={() => {
  changeDrawerElem(1);
  props.navigation.navigate('StackNav', { screen: 'MainScreen' });
}}

    Una vez que hayas corregido estos problemas, intenta ejecutar tu aplicación nuevamente y verifica si los elementos del cajón personalizado se centran correctamente. Aquí tienes el código corregido:

    
import React, { Component } from 'react';
import { useContext } from 'react';
import { Context } from '../context/settingContext';
import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import FontAwesome, { SolidIcons, RegularIcons, BrandIcons } from 'react-native-fontawesome';
import defaultStyles from '../css/defaultStyles';

function CustomDrawerContent(props) {
  const { state } = useContext(Context);
  const { drawerElem } = state.find(elem => elem.hasOwnProperty('drawerElem'));
  const { changeDrawerElem } = useContext(Context);

  return (
    
       {
          changeDrawerElem(1);
          props.navigation.navigate('StackNav', { screen: 'MainScreen' });
        }}
        icon={() => }
        inactiveTintColor="000000"        activeBackgroundColor="cdb9a5"        focused={() => drawerElem === 1}
      />
       {
          changeDrawerElem(2);
          props.navigation.navigate('StackNav', { screen: 'Content' });
        }}
        icon={() => }
        inactiveTintColor="000000"        activeBackgroundColor="cdb9a5"        focused={() => drawerElem === 2}
      />
    
  );
}

const styles = StyleSheet.create(defaultStyles);

export default CustomDrawerContent;

    Avísame si esto resuelve tu problema.

    Respondida el Dec 18, 2020 a las 00:25 - por Gemini

    Votos positivos: 0 | Votos negativos: 0