undefined ist kein Objekt (Bewertung 'this.props.navigation.navigate') reactive-native

Question

Ich habe verschiedene ähnliche Fragen gefunden, die alle ein anderes Problem und eine andere Lösung haben. Scheint, dass Projektarchitektur in den meisten Fällen Schuld ist. Ich konnte mir nicht vorstellen. Ich möchte zu Signup screen mit einem Klick auf Get OTP-Taste auf PhoneSignup screen navigieren.

PhoneSignupForm.js

export default class PhoneSignupForm extends Component {  
     render() { 
     return (
      <View > 
       <TouchableOpacity 
        onPress={() => this.props.navigation.navigate('Signup') } 
       > 
        <Text> 
        Get OTP 
        </Text> 
       </ TouchableOpacity> 
      </View> 
     ); 
     } 
    } 

PhoneSignup.js

import PhoneSignupForm from './PhoneSignupForm'; 

export default class PhoneSignup extends Component { 
    render() { 
    return (
     <View style = {styles.container}> 
      <View style = {styles.logoContainer}> 
       <Image 
        style = {styles.logo} 
        source = {require('../../icons/hp.png') } 
       /> 
       <Text style = {styles.title}>Hewlett-Packard</Text> 
      </View> 
      <View style = {styles.formContainer} > 
       // Using PhoneSignupForm component here 
       <PhoneSignupForm /> 
      </View> 
     </View> 
    ); 
    } 
} 

main.js

import PhoneSignup from '../scenes/phoneSignup'; 
import Signup from '../scenes/signup'; 
import { StackNavigator } from 'react-navigation'; 

const AppNavigation = StackNavigator(
    { 
     PhoneSignup: {screen: PhoneSignup}, 
     Signup: {screen: Signup} 
    } 
); 


export default AppNavigation; 

App.js

import React, { Component } from 'react'; 
import {KeyboardAvoidingView} from 'react-native'; 
import PhoneSignup from './src/scenes/phoneSignup'; 
import Signup from './src/scenes/signup'; 
import AppNavigation from './src/routes/main'; 

const App =() => ({ 
    render() { 
    return (
     <KeyboardAvoidingView behavior = 'padding' > 
     <AppNavigation /> 
     </KeyboardAvoidingView> 
    ); 
    } 
}) 

export default App; 

und schließlich index.js

import { AppRegistry } from 'react-native'; 
import App from './App'; 

AppRegistry.registerComponent('DamReact',() => App); 

Answer 1

@bennygenel zeigte es richtig heraus. Sie müssen Navigationsrequisiten von der Registrierungskomponente an die FormSignup-Komponente übergeben. Hier gehen Sie.

export default class PhoneSignup extends Component { 
    render() { 
    const { navigation } = this.props; 
    return (
     <View style = {styles.container}> 
      <View style = {styles.logoContainer}> 
       <Image 
        style = {styles.logo} 
        source = {require('../../icons/hp.png') } 
       /> 
       <Text style = {styles.title}>Hewlett-Packard</Text> 
      </View> 
      <View style = {styles.formContainer} > 
       <PhoneSignupForm navigation={navigation} /> 
      </View> 
     </View> 
    ); 
    } 
}