Kann die Eigenschaft "Navigation" von undefined nicht lesen

Question

Ich versuche, mit NavigationActions zu navigieren, aber aus irgendeinem Grund wird es nicht navigieren. Ich versuche, von LoginScreen zu HomeScreen zu bewegen.

Login:

constructor(props){ 
    super(props) 
    this.state = { 
     email: '', 
     password: '', 
     status: '', 
    } 

    this.handlePress = this.handlePress.bind(this) 
    } 

    handlePress(){ 
    firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){ 
     //Success, move to homepage. 
     const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
      NavigationActions.navigate({ routeName: 'Home'}) 
     ] 
     }) 

     this.props.navigation.dispatch(resetAction) <-- SAYS NAVIGATION IS UNDEFINED 
    }).catch(function(error){ 
     //Failed to log in, print error. 
     console.log(error) 
    }); 
    } 

dies ist, wo I handlePress nennen:

<TouchableOpacity style={styles.logBtn} onPress={()=>this.handlePress()}> 
    <Text style={styles.logTxt}> 
    Login 
    </Text> 
    </TouchableOpacity> 

Dies wird als 'Navigation' (in Render-Methode, Login):

const { navigation } = this.props.navigation; 

ist diese App .js, wo ich die Navigation einstelle:

import React from 'react'; 
import { AppRegistry } from 'react-native'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 
import Ionicons from 'react-native-vector-icons/Ionicons'; 

import LoginScreen from './app/screens/LoginScreen'; 
import RegisterScreen from './app/screens/RegisterScreen'; 
import HomeScreen from './app/screens/HomeScreen'; 
import FriendsScreen from './app/screens/FriendsScreen'; 

const Stylelist = StackNavigator({ 
    Login:{ 
    screen: LoginScreen, 
    navigationOptions: ({navigation}) =>({ 
     header: null, 
    }), 
    }, 
    Register:{ 
     screen: RegisterScreen, 
     navigationOptions: ({navigation}) =>({ 
     header: null, 
     }), 
    }, 
    Home:{ 
    screen: TabNavigator({ 
     Home: { 
     screen: HomeScreen, 
     navigationOptions: ({ navigation }) => ({ 
      title: 'Home', 
      tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons 
       name={focused ? 'ios-home' : 'ios-home-outline'} 
       size={26} 
       style={{ color: tintColor }} 
      /> 
     ) 
     }), 
     }, 
     Friends: { 
     screen: FriendsScreen, 
     navigationOptions: ({ navigation }) => ({ 
      title: 'Friends', 
      tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons 
       name={focused ? 'ios-people' : 'ios-people-outline'} 
       size={26} 
       style={{ color: tintColor }} 
      /> 
     ) 
     }), 
     }, 
    }), 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Home', 
     headerStyle: {backgroundColor: "#553A91"}, 
     headerTitleStyle: {color: "#FFFFFF"}, 
    }), 
    } 
}); 
export default Stylelist; 

Ich habe versucht, den Fehler aus dem ‚fangen‘ und ich diesen Fehler zu protokollieren:

Cannot read property 'navigation' of undefined 

Wie kann ich es beheben?

Answer 1

Es sollte

const { navigate} = this.props.navigation; 

oder

const { navigation } = this.props; 

Eigentlich sein, was Sie in Requisiten ist Gegenstand Navigation, die Methode in it.and navigieren hat, was Sie taten, war

const { navigation } = this.props.navigation; 

Dies wird ausgewertet zu

this.props.navigation.navigation 

Es sagt, suchen Sie nach Navigationseigenschaft innerhalb Navigationsobjekt, die tatsächlich nicht vorhanden ist, daher gibt . Ich hoffe, das löscht deine Zweifel.