TypeError: undefined is not an object (评估 'this.props.navigation.navigate')答案

【问题标题】：TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')TypeError: undefined is not an object (评估 'this.props.navigation.navigate')
【发布时间】：2018-01-08 14:06:31
【问题描述】：

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={() => this.props.navigate('Login')} 但它给了我另一个错误 TypeError: undefined not an object(evalating '_this2.props.navigation.navigate'}

所以我想修复我的代码。有什么帮助吗？

【问题讨论】：

标签： reactjs react-native expo

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：