Tengo las siguientes opciones de menú en la siguiente estructura:
const menuOptions = [ { route: 'RegisterStack', label: 'Register', size: 25, }, { route: 'LoginStack', label: 'Login', size: 25, }, { route: 'DashboardStack', label: 'Dashboard', size: 25, } ];y aquí está mi código restante con el estado del componente y el resto del código:
const [activeLink, setActiveLink] = useState(''); const navigation = useNavigation(); <View> {menuOptions.map((stack, index) => { return ( <TouchableOpacity key={index} style={[ styles.menuStyle, index === activeLink ? {backgroundColor: 'red'} : {backgroundColor: 'white'} ]} onPress={() => navigation.navigate(stack.route)}> <Icon name={stack.icon} color={stack.color} size={stack.size} style={{ marginRight: mainMenuOpen ? '10%' : 0, }} onPress={() => setActiveLink(index)} /> <Text style={{width: '70%', fontWeight: '500'}}> {stack.label} </Text> </TouchableOpacity> ); })} </View> Con el código actual, puedo ver que se lleva a cabo una clase activa, pero parece que interrumpió la navegación y no se dirige a una página diferente cuando se hace clic en ella. La navegación comienza a funcionar bien cuando elimino el siguiente método onPress de Icon onPress={() => setActiveLink(index)} .
¿Puede alguien ayudarme, por favor, cómo puedo hacer que esto funcione?
El problema aquí es que está anidando dos pressables. El evento táctil será capturado por onPress of the Icon component . Esta es también la razón por la que la navegación comienza a funcionar cuando elimina la función onPress interna.
Me parece que desea que se setActiveLink si presionamos solo el Icon o desea que se setActiveLink y luego navegue a la pantalla deseada al mismo tiempo.
En el segundo caso, solo necesita una función onPress para el componente externo.
<TouchableOpacity key={index} style={[ styles.menuStyle, index === activeLink ? {backgroundColor: 'red'} : {backgroundColor: 'white'} ]} onPress={() => { setActiveLink(index) navigation.navigate(stack.route) }}> <Icon name={stack.icon} color={stack.color} size={stack.size} style={{ marginRight: mainMenuOpen ? '10%' : 0, }} /> <Text style={{width: '70%', fontWeight: '500'}}> {stack.label} </Text> </TouchableOpacity> Si desea que sucedan dos cosas separadas, por ejemplo, setActiveLink en Icon presione solo y navigate en stack.label presione solo, entonces necesita reorganizar su componente. Podría crear una vista principal que distribuya los componentes en una fila sin anidar dos elementos presionables.
// you still need to apply the desired styles... <View> <Pressable onPress={() => setActiveLink(index)}> <Icon name={stack.icon} color={stack.color} size={stack.size} /> </Pressable> <TouchableOpacity key={index} onPress={() => { navigation.navigate(stack.route) }}> <Text style={{width: '70%', fontWeight: '500'}}> {stack.label} </Text> </TouchableOpacity> </View>