React native 未定义不是对象'；导航。导航'；反应本机导航5（新）

我正在使用new react native navigation进行导航我想要的是当按下按钮时导航到下一个屏幕，我遵循了新的文档，但问题是我在使用类，在文档中所有的工作都是使用App.js中的函数完成的，我试图相应地修改代码，但无法处理类，因为onPress按钮不会导航，反而会给我错误。 这是我的app.js：

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer,useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Nav from './screens/Nav';
import Home from './screens/Home';
import Login from './screens/Login';
const Stack = createStackNavigator();

export default class App extends React.Component {
  render(){
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
}

---

代码中有一点变化，您的代码将正常工作

应用程序内类initialRouteName和屏幕名称应相同地将Splash更改为Nav

<Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />

使用此行后在主类中更新

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {

    return (
      <View style={styles.container}>
        //<TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>

use this

<TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、TouchableHighlight、图像、BackHandler}；
从“./Login”导入登录名；
导出默认类Home extends组件{
render（）{
返回(
//导航。导航（'Login'）}>
用这个
this.props.navigation.navigate（'Login'）}>
登录
);
}
}

代码有一点变化，您的代码将正常工作

应用程序内类initialRouteName和屏幕名称应相同地将Splash更改为Nav

<Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />

使用此行后在主类中更新

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {

    return (
      <View style={styles.container}>
        //<TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>

use this

<TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、TouchableHighlight、图像、BackHandler}；
从“./Login”导入登录名；
导出默认类Home extends组件{
render（）{
返回(
//导航。导航（'Login'）}>
用这个
this.props.navigation.navigate（'Login'）}>
登录
);
}
}

你能控制这个

this.props.navigation

并告诉我它给了你什么吗？是的，它说“无法读取未定义的属性'navigate'”试着像这样使用它

onPress={（）=>this.props.navigation.navigate（'Login'）}

并告诉我它给了你什么我也这样做了，但给了我同样的错误。你是在使用Expo还是react native CLI？你能控制台这个

这个.props.navigation

并告诉我它给了你什么吗？是的，它说“无法读取未定义的属性'navigate'”试着像这样使用它

onPress={（）=>this.props.navigation.navigate（'Login'））

并告诉我它给了您什么我也这样做了，但给了我相同的错误。您使用的是Expo还是react native CLI？

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {

    return (
      <View style={styles.container}>
        //<TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>

use this

<TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}