TransWikia.com

Error en react navigation

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

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í

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!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP