undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;）react-native

Question

我发现各种类似的问题都有不同的问题和解决方案。在大多数情况下，似乎项目架构是罪魁祸首。我无法弄清楚我的。我想点击Signup screen上的获取OTP按钮导航到PhoneSignup screen。

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;

最后 index.js

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

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

Answer 1

@bennygenel正确地指出了它。 您需要将导航道具从Signup组件传递到FormSignup组件。 你走了。

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