React Native栈导航报错：TypeError: undefined is not an object (evaluating 'this.props = props')

在React Native中实现栈导航时触发上述错误，尝试删除this.props（误以为App.js用函数组件就不能用）但无效。以下是相关代码及完整错误信息，附解决方案和解释：

App.js 代码 #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';

import Login from './pages/Login';
import Register from './pages/Register';

const Stack = createStackNavigator()

function MystackNav(){
  return(
    <Stack.Navigator>
      <Stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
      <Stack.Screen name='Register' component={Register} options={{headerShown:false}}/>
    </Stack.Navigator>
  )
}

export default function App(){
  return(
    <NavigationContainer>
      <MystackNav/>
    </NavigationContainer>
  )
}

Login.js 代码 #

import React, { Component } from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    useColorScheme,
    Image,
    View,
} from 'react-native';

import Register from './Register';

export default class Login extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.container2}>
                    <View>
                        <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                    </View>
                    <View>
                        <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                    </View>
                    <TouchableHighlight style={styles.button} 
                    onPress={()=>this.props.navigation.navigate('Register')}>
                        <Text style={styles.buttontext}>Login</Text>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
}

完整错误信息 #

To reload the app press "r"
To open developer menu press "d"

 BUNDLE  ./index.js

 ERROR  TypeError: undefined is not an object (evaluating 'this.props = props')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

问题根源 #

报错的核心原因是类组件未正确初始化父类构造函数。你的Login是类组件，继承自Component，但没有在构造函数中调用super(props)——这会导致this对象未被正确创建，自然无法访问this.props。

你之前删除this.props是误解：App.js用函数组件不影响Login.js的类组件写法，类组件必须通过this.props获取导航属性。

修复步骤 #

修改Login.js，添加构造函数并调用super(props)：

export default class Login extends Component {
    // 添加构造函数初始化this和props
    constructor(props) {
        super(props);
    }

    render() {
        return (
            // 原有渲染内容完全不变
            <View style={styles.container}>
                <View style={styles.container2}>
                    <View>
                        <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                    </View>
                    <View>
                        <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                    </View>
                    <TouchableHighlight style={styles.button} 
                    onPress={()=>this.props.navigation.navigate('Register')}>
                        <Text style={styles.buttontext}>Login</Text>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
}

额外优化建议 #

1. 删除无用代码：Login.js中导入了Register组件但从未使用，直接删掉import Register from './Register';即可。
2. 可选：转为函数组件：如果更习惯函数组件写法，可以改成下面这样，用useNavigation钩子替代this.props.navigation：

import React from 'react';
import { useNavigation } from '@react-navigation/native';
// 其他导入保持不变

export default function Login() {
    const navigation = useNavigation();
    return (
        <View style={styles.container}>
            <View style={styles.container2}>
                {/* 输入框部分不变 */}
                <TouchableHighlight style={styles.button} 
                onPress={()=>navigation.navigate('Register')}>
                    <Text style={styles.buttontext}>Login</Text>
                </TouchableHighlight>
            </View>
        </View>
    )
}

内容的提问来源于stack exchange，提问作者Abhiram