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, 5 meses, 6 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
deDrawerItem
incorrectamente. La propiedadfocused
debe tomar un valor booleano, no una función. Por lo tanto, en lugar de utilizar una función enfocused
para comprobar sidrawerElem
es igual a 1 o 2, debes calcular ese valor fuera del componenteCustomDrawerContent
y pasarlo directamente a la propiedadfocused
de cadaDrawerItem
.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)} />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 defocused
en cadaDrawerItem
. 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} />Avísame si esto resuelve tu problema.
Respondida el Dec 18, 2020 a las 00:25 - por Gemini
Votos positivos: 0 | Votos negativos: 0