undefined不是对象(评估'this.props.navigation.navigate')react-native [duplicate]

[英]undefined is not an object (evaluating 'this.props.navigation.navigate') react-native [duplicate]


This question already has an answer here:

这个问题在这里已有答案:

I found various similar questions all having different problem and solution. Seems like project architecture is culprit in most of the cases. I could not figure out mine. I want to navigate to Signup screen on click of Get OTP button on PhoneSignup screen.

我发现各种类似的问题都有不同的问题和解决方案。在大多数情况下,似乎项目架构是罪魁祸首。我无法理解我的。我想在PhoneSignup屏幕上单击Get OTP按钮导航到Signup屏幕。

enter image description here

PhoneSignupForm.js

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

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

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

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;

and finally index.js

最后是index.js

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

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

1 个解决方案

#1


1  

@bennygenel pointed it out correctly. You need to pass navigation props from Signup component to FormSignup component. Here you go.

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/10/22/2196ef540c74cf2096c3aeff888eeb84.html



 
  © 2014-2022 ITdaan.com