javascript - 在 React Native 中的屏幕之间导航 navigation.navigate not found

Question

我正在使用 React Native，我正在尝试使用 createStackNavigator 在屏幕之间导航，但我在登录页面（这是我的初始页面）中收到错误消息，提示找不到 navigation.navitgate？如何在此文件中包含导航？

希望从 LoginScreen.js 导航到 AddProfilesScreen.js

应用 JS 下面

import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'expo-status-bar';
import LoginScreen from './assets/Screens/LoginScreen';
import AddProfilesScreen from './assets/Screens/AddProfilesScreen';
import { Keyboard, StyleSheet, Text, View, SafeAreaView, Button, TextInput} from 'react-native';
import React, { useEffect, useReducer } from 'react';
import Navigator from './routes/homeStack';

 const Stack = createStackNavigator(Navigator);

export default function App() {

 render () {
  return (
    
      <Navigator>
       
      </Navigator>
   
  );
}
}

路线（homestack.js）

import { createStackNavigator } from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import LoginScreen from '../assets/Screens/LoginScreen';
import AddProfilesScreen from '../assets/Screens/AddProfilesScreen';


const screens = {
    Home: {
        screen: LoginScreen
    },
    AddProfilesScreen: {
        screen: AddProfilesScreen
    }

}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack)

登录屏幕.js

import 'react-native-gesture-handler';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator, NavigationContainer, useNavigation} from 'react-navigation';
import { Keyboard, StyleSheet, Text, View, SafeAreaView, Button, TextInput} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { Component } from "react";
import AddProfilesScreen from './AddProfilesScreen';

class Login extends React {

 



render () {
  return (

    <SafeAreaView style={styles.container}>
      <Text >Welcome to Hearth!</Text>
      <Text style={styles.introText}>Lets get your account set up so you can start making more intentional time with your family</Text>
      <StatusBar style="auto" />
      <TextInput
        style={styles.input}
        // onChangeText={onChangeText}
        // value={text}
      />
      <TextInput
        style={styles.input}
        // onSubmitEditing={Keyboard.dismiss}
        // onChangeText={onChangeText}
        // value={text}
      />
      <TextInput
        style={styles.input}
        // onChangeText={onChangeText}
        // value={text}
      />
      <TextInput
        style={styles.input}
        // onChangeText={onChangeText}
        // value={text}
      />
      <Button
        // onPress={() => Alert.alert('Simple Button pressed')}
        title="Sign Up"
        color="#841584"
        accessibilityLabel="Learn more about this purple button"
        onPress={() =>
            this.props.navigation.navigate('AddProfilesScreen')
          }
     />
    </SafeAreaView>

    
  );
  } 
}
      
export default Login;

标签： javascriptreact-nativenavigation