undefined不是一个对象（评估＆＃39; _this2.props.navigation＆＃39;）<unknown> - react-navigation

Question

我从React-Native开始，对于某些事情感到遗憾......我得到的＆＃34; undefined不是一个对象（评估＆＃39; _this2.props.navigation＆＃39; ）＆＃34;尝试在任何屏幕中访问导航方法时出错...其他人可以帮助我吗？

我的App.js：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

＆＃13;

我的LoginScreen.js：

登录完成后尝试访问导航道具，以获取个人资料屏幕...

＆＃13;

＆＃13;

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>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你正在失去this的背景。您需要bind您的功能或使用arrow functions。

<强>示例

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))
}

Answer 2

曾为：

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>

    );
  }
}