TypeError：undefined不是对象（评估'this.props.navigation.navigate'）

Question

enter image description here

import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './screens/Login';




export default class App extends React.Component {
  /*
  static navigationOptions = {
    title: 'Home',
    headerstyle: {
      backgroundColor: 'powderblue',
    },
      headerTitleStyle: {
        color: '#FFFFFF'
      }
  };
  */

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View 
          style={styles.container} >   
          
          <View style={styles.boxContainer}>
            <View style = {[styles.boxContainer, styles.boxOne]}>
              <Text style={styles.paragraph}>Tido</Text>
            </View>
            
              <View style={styles.boxContainerToggle}>
                <TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigate('Login')}>
                    <Text style={styles.paragraph}>Login</Text>
                </TouchableOpacity>
         
                <TouchableOpacity style={[styles.boxContainer, styles.boxThree]}>
                    <Text style={styles.paragraph}>Sign Up</Text>
                </TouchableOpacity>
              </View>          
          </View>
      
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    
  },
  boxContainerToggle: {
    flex: 1, 
    flexDirection: 'row'
  },
  boxOne: {
    flex: 6, // 5:6
    backgroundColor: 'white',
    justifyContent: 'space-around',
    alignItems: 'center',
    
  },
  boxTwo: {
    flex: 1, // 1:6
    backgroundColor: 'powderblue',
    flexDirection: 'row',
    width: '50%',
    height: '100%'

  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%'
  },
  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  }, 
});

const appScreens = StackNavigator({
  Index: { screen: App },
  Login: { screen: Login }
})

AppRegistry.registerComponent('tido', () => appScreens);

import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity} from 'react-native';

export default class Login extends React.Component {
    /*
    static navigationOptions = {
        title: 'Home',
        headerstyle: {
          backgroundColor: 'powderblue',
        },
          headerTitleStyle: {
            color: '#FFFFFF'
          }
      };
      */
    
    constructor(props) {
        super(props)
    }
    
    render(){
        return(
            <View style={styles.container}>

                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="username,email or phone"
                            placeholderTextColor="#00000">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            placeholder="password"
                            placeholderTextColor="#00000">
                        </TextInput>
                    </View>
            
                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                         
                        </TouchableOpacity>
                    </View>          
                </View>   
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    },
    boxContainer: {
        flex: 1, // 1:3
        alignItems: 'center',
        justifyContent: 'center',
        
      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row'
      },
      boxOne: {
        flex: 6, // 5:6
        backgroundColor: 'white',
        justifyContent: 'space-around',
        alignItems: 'center',
        
      },
      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '50%',
        height: '100%'

      },
      inputBox: {
          height: 40,
          marginBottom: 20,
          color: '#000000',
          paddingHorizontal: 10,

      },      
      paragraph: {
        margin: 24,
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#34495e',
      },
});

我得到这个错误，我运行我的代码。我脱掉了const {navigate} = this.props.navigation;并使用onPress = {（）=＆gt; this.props.navigate（ '登录'）} 但它给了我另一个错误TypeError：undefined不是一个对象（评估'_this2.props.navigation.navigate'}

所以我想修复我的代码。任何帮助？

Answer 1

您的主模块似乎只导出App组件而不是下面的堆栈导航器（因为export default class App）。

如果您正在使用Create React Native App，则无需调用AppRegistry.registerComponent，因为CRNA入口点会为您执行此操作。您只需要导出根组件。您可以将export default class App更改为class App，然后将export default appScreens;添加到文件末尾来修复错误。

Answer 2

当您将导航对象解压缩为const时，无需使用this.props。只需添加一些验证，以便在存在时触发：

onPress={() => {
  if(navigate) {
    navigate('Login');
  }
}}