未定义不是函数'（（0，_reactNavigation.StackNavigator）'未定义）

Question

当我使用反应式导航时，该错误向我显示？我该如何解决该错误？请帮助我

import {StackNavigator} from 'react-navigation'
    import * as firebase from 'firebase'
    import Home from './screens/home'
    import Login from './screens/login'

    firebase.initializeApp(firebaseConfig)

    const RouteConfigs = {
      Login: {screen:Login},
      Home: {screen:Home},
    }

    const StackNavigatorConfig = {
      headerMode:'none',
    }

    export default StackNavigator (RouteConfigs, StackNavigatorConfig)

Answer 1

React Navigation的初始设置应该是这样。

    import { createStackNavigator } from 'react-navigation';

    import HomeScreen from '../pages/home';
    import SigninScreen from '../pages/signin';
    import SignupScreen from '../pages/signup';

    const AppNavigator = createStackNavigator(
      {
        Home: { screen: HomeScreen },
        Signin: { screen: SigninScreen },
        Signup: { screen: SignupScreen }
    },
      {
        initialRouteName: 'HomeScreen',
        headerMode: 'none'
      }    
    );
export default AppNavigator;

Answer 2

Possibly outdated: “Stack Navigator"
use "createStackNavigator" 

for example :


import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator);

Answer 3

这些给出的答案不适用于新版本的 React Native。请尝试以下示例以更好地理解。

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/component/stage_one';
import StageTwo from './src/component/stage_two';
import StageThree from './src/component/stage_03';



const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Home' }}
        />
        <Stack.Screen name="StageTwo" component={StageTwo} />
        <Stack.Screen name="StageThree" component={StageThree} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack

stage_one.js 应该是这样的

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const stage_one = ({navigation}) => {
    return (
        <View style={styles.container}>
               <Text>Hello Stage One</Text>
               <Button 
                onPress = { 
                    () => navigation.navigate('StageTwo')
                 }
                 title = "Got to Stage Two"
               />
               <Button 
                onPress = { 
                    () => navigation.navigate('StageThree')
                 }
                 title = "Got to Stage Three"
               />
           </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_one

stage_two.js 应该是这样的

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

const stage_two = ({navigation}) => {
    return (
       <View style={styles.container}>
               <Text>Hello Stage Two</Text>
           </View> 
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_two

stage_03.js 应该是这样的

import React, { Component } from 'react'
import { StyleSheet, View, Text } from 'react-native';

const stage_03 = ({navigation}) => {
    return (
           <View style={styles.container}>
               <Text>Hello Stage three</Text>
           </View>
        )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default stage_03

<块引用>

尝试修改本期代码段的这一行，它会 轻松解决。

查看 React Native Documentation 以获得更多说明。