Réagir natif - Pousser un écran à l'autre ont un problème

Question

J'ai utilisé le 'StackNavigator', j'ai un problème à pousser lorsque le code de navigation écrit dans un événement de bouton. mais cela fonctionne bien si nous codons directement l'événement onPress,

Importer le fichier.

import { StackNavigator } from "react-navigation"; 
import SignUpScreen from "./SignUp"; 

Poussez une autre travaille:

render() { 
    console.disableYellowBox = true; 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.viewStyle}> 
     <TouchableHighlight style = {styles.buttonStart} 
      onPress={() => navigate("SignUpCompany")}> 
       <Image 
       source={require('./Images/hire.png')} 
       /> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

Poussez une autre via la fonction ne fonctionne pas:

pushcode() { 
    console.log('call'); 
    this.props.navigation.navigate('SignUp'); 
    } 

    render() { 
    return (

    <TouchableHighlight style = {styles.buttonStart} 
     onPress={this.pushcode}> 
      <Image 
      source={require('./Images/hire.png')} 
      /> 
    </TouchableHighlight> 

    );} 

ERREUR BOUTON CLICK:

Merci. Aidez-moi, s'il vous plaît.

Answer 1

Regardez comme vous utilisez le coup de pouce supplémentaire dans cette ligne

this.props.navigation.navigate.push('SignUp'); 

Essayez cela fonctionnera pour vous

this.props.navigation.navigate('SignUp'); 

peut être cela peut vous aider

Answer 2

Je pense que vous manquez la fonction bind dans le constructeur --- c'est pourquoi vous avez undefined n'est pas un objet (évaluation 'this.props.navigation'). parce que this est indéfini à l'intérieur de pushcode portée de fonction.

ajouter ci-dessous dans votre constructeur:

constructor(props) { 
    super(props); 

    this.pushcode = this.pushcode.bind(this); 
    ... 
}