undefined не является объектом (оценивается как _this2.props.navigation) <unknown>- реакция-навигация

Question

Я начинаю с React-Native, так что извините за что-то ... Я получаю сообщение "undefined - это не объект (оценивается как _this2.props.navigation ')" при попытке доступа к методу навигации на любом экране... кто-нибудь еще может мне помочь?

My App.js:

import React, { Component, AppRegistry } from 'react';
import { SwitchNavigator, TabNavigator } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import ProfileScreen from './screens/ProfileScreen';

const MainStack = SwitchNavigator({
  login: LoginScreen,
  profile: ProfileScreen,
});

class App extends Component {

  render() {
    return (
        <MainStack/>
    );
  }
}

export default App;

Мой LoginScreen.js:

Попытка получить доступ к навигационным реквизитам после входа в систему, чтобы получить экран профиля ...

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import FBSDK, { LoginManager, AccessToken } from 'react-native-fbsdk';
import firebase from 'firebase';

type Props = {};
export default class LoginScreen extends Component<Props> {

  fbAuthFunction()
  {
    LoginManager.logInWithReadPermissions(['public_profile','email']).then(function(result)
    {
      if(result.isCancelled)
      {
        alert('Login foi cancelado !');
      }
      else {
        console.log('Login efetuado com sucesso !');
        AccessToken.getCurrentAccessToken().then((accessTokenData) => {
          const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken)
          firebase.auth().signInAndRetrieveDataWithCredential(credential).then((result) => {
             this.props.navigation("profile");
          }, function(error)
              {
                  console.log('Erro: '+error);
                  
              })
        }, function(error)
            {
                console.log('Erro: '+error);
                
            })
      }
    },  function(error)
        {
            console.log('Erro: '+error);
        })
  }


  render() {

    return (

        <View style={styles.container}>

          <TouchableOpacity style={styles.button} onPress={this.fbAuthFunction}>
            <Text  style={styles.button_text}>Login with Facebook</Text>
          </TouchableOpacity>
        </View>
    );
  }
}

Answer 1

Работал:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import FBSDK, { LoginManager, AccessToken } from 'react-native-fbsdk';
import firebase from 'firebase';

type Props = {};
export default class LoginScreen extends Component<Props> {


  fbAuthFunction(navigation)
  {
    LoginManager.logInWithReadPermissions(['public_profile','email']).then(function(result)
    {
      if(result.isCancelled)
      {
        alert('Login foi cancelado !');
      }
      else {
        console.log('Login efetuado com sucesso !');
        AccessToken.getCurrentAccessToken().then((accessTokenData) => {
          const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken)
          firebase.auth().signInAndRetrieveDataWithCredential(credential).then((result) => {
             navigation.navigate("profile");
          }, function(error)
              {
                  console.log('Erro: '+error);
              })
        }, function(error)
            {
                console.log('Erro: '+error);
            })
      }
    },  function(error)
        {
            console.log('Erro: '+error);
        })
  }

  render() {

    return (


        <View style={styles.container}>

          <TouchableOpacity style={styles.button} onPress={() => this.fbAuthFunction(this.props.navigation)}>
            <Text  style={styles.button_text}>Login withFacebook</Text>
          </TouchableOpacity>

        </View>

    );
  }
}

Answer 2

Вы теряете контекст this.Вам нужно либо bind свои функции, либо использовать функции стрелок .

Sample

fbAuthFunction = () => {
 LoginManager.logInWithReadPermissions(['public_profile','email'])
   .then((result) => {
      //...
   })
}

// OR

constructor() {
  //...
  this.fbAuthFunction = this.fbAuthFunction.bind(this);
}
fbAuthFunction() {
 LoginManager.logInWithReadPermissions(['public_profile','email'])
   .then(function(result) {
      //...
   }.bind(this))
}