Error en react navigation

Question

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:

react native

Darwin · 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;
           ....
        }    
    }

Error en react navigation

One Answer

Add your own answers!

Ask a Question