InsideDarkWeb.com

Error en react navigation

soy nuevo en react native y tengo problemas con el navigation, he creado un componente, el cual es una botonera que va debajo de la aplicacion, los cuales los importo encada pantalla, contiene boton perfil, noticias, pero cuando presiono en perfil no me envia a la pantalla perfil, dando el siguiente error, el codigo del componente de los botones.js es:

import React from 'react';
import { TouchableOpacity, Image } from 'react-native';

export default class Botones extends React.Component {

    render(){
        const ScreenMiCuenta = () => {
            this.navigation.navigate('Perfil')
        }
        return(        
            <TouchableOpacity style={ styles.buttonToolbar } onPress={ () => ScreenMiCuenta() }>
                <Image source={(iconPerfil)} style={ styles.iconButtonsToolbar } />   
            </TouchableOpacity>
        );

    }    

}

y en mi App.js tengo:

import 'react-native-gesture-handler';
import React from 'react';

import { NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Perfil from './componentes/Perfil';
import Noticias from './componentes/Noticias';

const Stack = createStackNavigator();

export default function App() {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator 
          initialRouteName='Inicio'
          headerMode='none'
          screenOptions={{ animationEnabled:false }}
        >          
          <Stack.Screen        
            name="Inicio"
            component={Inicio}  
          />
          <Stack.Screen        
            name="Perfil"
            component={Perfil}  
          />
          <Stack.Screen        
            name="Noticias"
            component={Noticias}  
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

y el error es:

introducir la descripción de la imagen aquí

Stack Overflow en español Asked on November 18, 2021

1 Answers

One Answer

Te falta obtener el objeto navigation de las props que el stack navigation envia por defecto. Así como route.

export default class Botones extends React.Component {
        render(){
           // Obtener de los props
           const { route, navigation } = this.props;
           ....
        }    
    }

Answered by Darwin on November 18, 2021

Add your own answers!

Related Questions

AlertDialog de Evaluacion en APP Android

1  Asked on August 27, 2021 by m3m0x

     

Como puedo ordernar nombres por genero en C?

3  Asked on August 27, 2021 by david-ricardo-lee

   

ORA-01722: Numero no valido SQL/Java

1  Asked on August 27, 2021 by nasito90

       

Por que tengo este Error en Angular?

1  Asked on August 27, 2021 by lorena-acosta

     

Expresión regular para palabras en php

1  Asked on August 27, 2021 by carlos-valdes-web

   

mostrar solo los elementos true de un array

2  Asked on August 26, 2021 by fernando-cruz

   

como arreglar este stored procedure?

2  Asked on August 26, 2021 by luis

     

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.