React Native“ TypeError：Object（...）不是一个函数” React导航堆栈错误

Question

我的react-navigation-stack有问题，我相信这可能是依赖关系的问题，但是我不确定是不是这样。我只是想让一些文本重定向到另一个页面。如果有与问题无关的代码（例如按钮），我在尝试学习本机响应时表示歉意。问题首先指向homeStack.js，即“从'@ react-navigation / stack'导入{{ ，但是以前我只是在那儿使用react-navigation-stack，我相信这是旧依赖项的一部分，但是它最初给了我一个模块not found错误，当我将@ react-navigation /放到现在时，它变成了现在的错误堆叠代替。我正在从视频教程中学习，但该教程中的代码未编译。我多次重新下载了react导航，并尝试了一些无效的方法。我将在下面发布我的代码，非常感谢您提供帮助以解决我的问题。谢谢！Picture of error

homeStack.js

import { createStackNavigator } from '@react-navigation/stack';
//import { createAppContainer } from '@react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const screens = {
Home: {
screen: Home,
},
ReviewDetails: {
screen: ReviewDetails,
},
};

// home stack navigator screens
const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

home.js

import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home() {
  return (
    <View style={globalStyles.container}>
       <Text style={globalStyles.titleText}>Home Screen</Text>
    </View>
  );
}

App.js

//import React from 'react';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Buttonwithbackground from './src/Buttonwithbackground';
import { StackNavigator } from 'react-navigation';
//import Expo from 'expo';
//import Screen from 'screen2';
import { AppLoading } from 'expo';
import Navigator from './routes/homeStack';
import { render } from 'react-dom';
//
//import {Link} from 'react-router-dom';

class HomeScreen extends React.Component{
  static NavigationOptions = {
    title: 'Home',
  };
  render(){
    const { navigate} = this.props.navigation;
    return(
      <View style={styles.container}>
        <Text
         onPress= { ()=> navigate('Home') }>Navigate to Profile
         </Text>
      </View>
    );
    }
  }

class ProfileScreen extends React.Component{
  static NavigationOptions = {
    title: 'Profile',
  };
  render(){
    const { navigate} = this.props.navigation;
    return(
      <View style={styles.container}>
        <Text
         onPress= { ()=> navigate('Profile') }>Navigate to Profile
         </Text>
      </View>
    );
    }
  }


//export default function App() {
export default class App extends Component {

  editUser = () => {
    this.props.navigation.navigate("Screen");
  //    this.navigation.navigate("screen2");
  //     window.location.href = 'screen2';
        };

   editUser2 = () => {
  //if the second button is clicked, it will redirect to yahoo.com
        window.location.href="http://yahoo.com"
        };     

  render(){
  return (
    <View style={styles.container}>
      <Image
        style={{width: 350, height: 200}}
        source = {require('./assets/dolanduckjoker.jpg')}
      />
      <Navigator />
      <Buttonwithbackground text='Login' color='black' onPress={this.editUser2}/>
      <p><br/></p>
      <Button title='Login' color='black' onPress={this.editUser2}/>
      <Button title='Login' color='black' onPress={() => navigation.navigate('screen2.js')}/>
      <p><br/></p>
      <Button
                    style={styles.cancelButton} 
                    onPress={this.editUser}
                    title="Register"
                    color="#343434"
                    accessibilityLabel="Register a User."/>
    </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 32,
    textAlign: 'center',
    margin: 10,
  },
});

Answer 1

Object（...）不是函数

createStackNavigator需要一个函数，并且您正在将一个对象作为参数传递给它。根据docs

您的代码应类似于-

import { createStackNavigator } from '@react-navigation/stack';
//import { createAppContainer } from '@react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="ReviewDetails" component={ReviewDetails} />
    </Stack.Navigator>
  );
}

export default MyStack; //you need to render this

现在在您的根文件中，应该是这样的（不包括您的附加代码）-

import { createStackNavigator } from '@react-navigation/stack';
import MyStack from "yourPath";

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}