Navigation | React Native parte 2: Aprimorando app com navegação e mais recursos

Olá, estou com dificuldade de utilizar o react navigation

segue o codigo :


import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity,} from 'react-native';
import Home from './screens/Home';
import { createStackNavigator } from 'react-navigation';

import Login from './screens/Login';
import Login2 from './screens/Login2';
import Login3 from './screens/Login3';

const RootStack = createStackNavigator({
  Home: Home,
  Login: Login,
})

export default class App extends React.Component {
  render() {
    return <RootStack/>
  }
}

Agora na Home:


import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity,} from 'react-native';




export default class Home extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello</Text>
        <View style={styles.buttons}> 
        <TouchableOpacity
            style={styles.submit}
            onPress={() => this.props.navigation.navigate('Login')}
            underlayColor='#fff'>
              <Text style={styles.submitText}>Sign in</Text>
        </TouchableOpacity>
        <TouchableOpacity
            style={styles.submit}
            //onPress={() => this.submitSuggestion(this.props)}
            underlayColor='#fff'>
              <Text style={styles.submitText}>Log in</Text>
        </TouchableOpacity>
        </View>

      </View>
    );
  }
}

Quando clico em login, eu tenho o seguinte erro : undefined is not an object (evaluating 'this2.props.navigation.navigate') como posso solucionar isso ?

edit: Quando eu tento chamar uma const e atribuir o valor this.props.navigation para navigate tambem não funciona

obrigado

Olá, tudo bem ?

undefined is not an object - evaluating 'this2.props.navigation.navigate'

O trecho avaliado nos dá alguma ideia dos possíveis problemas. Que creio que podem ser:

a) Esse this que não esta sendo resolvido para o this correto (do componente react); b) A prop com a referência do navigation que não está sendo passada ao componente.

O segundo caso creio que seja menos provável, dado que se você iniciou sua app carregando como root component o componente retornado pela execução de createStackNavigator({...}) e sua app foi renderizada normalmente (já no contexto de navegação), a prop deveria estar sendo repassada ao Home. Caso queira confirmar, cheque se outras possíveis props são passadas ao componente.

O primeira caso, creio que possa fazer referencia a problemas na definição do componente. De alguma forma ele pode não estar recebendo as props. Tente efetuar um this.setState() no contexto desse componente por exemplo, estou suspeitando que ele não esteja sendo inicializado corretamente como um react component.

Eu tentaria alterar a forma como ele é definido para seguir por exemplo o código de boilerplate gerado quando criamos um projeto com o native...

import React, { Component } from 'react'; // importar Component diretamente
import { StyleSheet, Text, ... } from 'react-native';

export default class Home extends Component { // estender diretamente de Component

  constructor() { // forçar super() no construtor
    super();
    this.state = { ... } // se houver algo a ser mantido no state
  }

 render() {
    return (
      <View style={styles.container}>
         ...
      </View>
    );
  }
}

Veja se isso corrige. Geralmente esse problema aparece ao tentar referenciar alguma propriedade ou função do ciclo de vida do componente React num ponto onde o contexto do this não referencie o this do componente/classe (tipicamente quando tentamos fazer um setState(), por exemplo, numa função nossa, não definida por meio de arrow function, e onde não tenhamos feito o bind do this). Mas como o acesso ao props no teu código é feito dentro do render() que já é inerente ao react component e tem o this correto, pode ser que o componente não esteja sendo definido corretamente. Dê uma olhada nisso.

Espero ter ajudado. Abraço!