TypeError:未定义不是对象(计算'this.props = props')

Question

我试图实现堆栈导航，我得到了一个错误，它说。道具给出了我尝试过的错误：

• 删除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>
        )
    }
}

这是错误

o 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.

Answer 1

同样地更改您的登录类：

//import Register from './Register'; //because you are not using this in your Login Class

export default class Login extends Component {

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

}