TypeError: undefined is not an object（评估'_reactNative.Stack.Navigator'）

Question

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Stack } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; a
import { Ionicons, AntDesign } from '@react-navigation/native';

import { Icon } from 'react-native-elements'
import 'react-native-gesture-handler';
import Header from "./components/header.js"
import LoadingScreen from './screens/LoadingScreen';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import FirebaseKeys from './Config'

import MessageScreen from './screens/MessageScreen';
import ProfileScreen from './screens/ProfileScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';

import * as firebase from 'firebase';

var firebaseConfig = FirebaseKeys
firebase.initializeApp(firebaseConfig);

export default function App() {

    if (this.isLoading) {
        return <LoadingScreen />;
    }

    return (
        <Stack.Navigator>
            {this.state.userToken == null ? (
                // No token found, user isn't signed in
                <>
                    <Stack.Screen name="Login" component={LoginScreen} options={{
                        title: 'Login',
                        // When logging out, a pop animation feels intuitive
                        // You can remove this if you want the default 'push' animation
                        animationTypeForReplace: this.state.isSignout ? 'pop' : 'push',
                    }}
                    />
                    <Stack.Screen name="SignUp" component={SignUpScreen} />
                </>
            ) : (
                    // User is signed in
                    <>
                        <Stack.Screen name="Home" component={HomeScreen} />
                        <Stack.Screen name="Post" component={PostScreen} />
                        <Stack.Screen name="Message" component={MessageScreen} />
                        <Stack.Screen name="Notification" component={NotificationScreen} />
                        <Stack.Screen name="Profile" component={ProfileScreen} />
                    </>
                )}
        </Stack.Navigator>
    );
}

我尝试了一切以查看代码是否有效，但我什至不了解错误任何解决方案？ 我认为这是因为反应导航 4 或其他原因，但它有点令人困惑。 我也直接从文档中获得了所有这些信息，所以我看不出这里有什么问题。

Answer 1

首先，您需要将整个应用程序包装在

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

接下来您需要创建一个堆栈导航器组件

const Stack = createStackNavigator();

然后将屏幕添加到 Stack 并将其包含在 Navigation Container 中

   <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>

您的代码应如下所示：

const AuthScreens = ()  => {
     <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{
           title: 'Login',
           animationTypeForReplace: this.state.isSignout ? 'pop' : 'push',
           }}
         />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
     </Stack.Navigator>
}

const HomeScreens = ()  => {
     <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Post" component={PostScreen} />
        <Stack.Screen name="Message" component={MessageScreen} />
        <Stack.Screen name="Notification" component={NotificationScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
     </Stack.Navigator>
}

<NavigationContainer>
    {this.state.userToken == null ? AuthScreens : HomeScreens}
</NavigationContainer>