使用 Stack Navigator 时出现“TypeError: (0, _reactNavigationStack.default) 不是函数”

Question

我使用 React-Native 为我的应用制作了主屏幕，然后返回实施 Stack Navigator，以便我可以从下一个屏幕开始。

它正在显示此错误消息：

我已将其范围缩小到我制作的主屏幕出现问题，谁能帮我找出哪里出错了？

应用画面

import React from 'react';
import { View, Text, Button } from 'react-native';
import  createAppContainer  from 'react-navigation';
import createStackNavigator from 'react-navigation-stack';

//Component Screens
import Home from './Home/Home.js';

const AppNavigator = createStackNavigator(
    {
    Home: { screen: Home }
},

);

const App = createAppContainer(AppNavigator);

export default App;

主屏幕

import React, {Component} from 'react';
import { StyleSheet, Text, View, ImageBackground, 
    Image, TextInput, Dimensions, Platform } from 'react-native';
  import  BackgroundCarousel from './components/Login_Screen/BackgroundCarousel.js'
  import Button_login from './components/Login_Screen/button_login.js'
  import  Button  from './components/Login_Screen/button.js'

  const images = [
    require("./images/Login_Images/basketball.jpg"),
    require("./images/Login_Images/network.jpg"),
    require("./images/Login_Images/memories.jpg"),
    require("./images/Login_Images/photographer.jpg")
  ];


  /* Logo for login page */
  import logo from './Icon/iconpersons.png'


  const { width: WIDTH } = Dimensions.get('window')


  const Home = ({navigation}) => { 


    return (
      <View style= {styles.carouselContainer}>
        <BackgroundCarousel images={images}>

          <View style={styles.logoContainer}>
            <Image source={logo} style={styles.logo}/>
            <Text style={styles.logoText}>Hello World</Text>
          </View>

            <Button style= {styles.button}>
              Let's Get Started
            </Button>

          <Button_login></Button_login>

          </BackgroundCarousel>
          </View>

    );

  }




  const styles = StyleSheet.create({
    carouselContainer: {
      height: "100%",
      width: "100%",
      backgroundColor: '#fff',
      flex: 1

  },
    logoContainer:{
      zIndex: 2,
      alignItems: 'center',
      position: 'absolute',
      justifyContent: "center",
      top: 0, left: 0, right: 0, bottom: 450

    },
    logo: {
      zIndex: 2,
      width: 125,
      height:125,

    },
    logoText: {
      zIndex: 2,
      color: 'white',
      fontSize: 25,
      fontWeight: '500',
      borderColor: 'white',
     //fontFamily: "ProximaNova-Regular", 


    },
    button: {
      flex: 1,
      zIndex: 2,
    }
  });



  export default Home

编辑： 我试图让我的主页成为我加载应用程序时显示的第一个主页。在我实现堆栈导航之前它一直在工作，现在我只是得到了错误。我很好奇，是

const Home = ({navigation}) => { 

在我的主屏幕上正确使用了吗？

Answer 1

您需要像下面这样导入新版本的 react-navigation 和 react-navigation-stack

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';