反应导航向我发送此错误：路由路由器的组件必须是反应组件

Question

我想为我的 React Native 应用程序创建导航，但它显示了这个错误。我不知道如何修复它。在底部我有我的 JS 文件：

我尝试了所有的代码，例如，我写 export className 和 import {className}

应用程序.js：

import React, { Component } from 'react'

import { Text, View } from 'react-native'

import { createAppContainer } from 'react-navigation';

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

import Login from './screens/Login'

import Signup from './screens/Signup'

import Home from './screens/home'

export default class App extends Component {

  render() {

    return (

      <AppRoot />

    )

  }

}

const Container = createAppContainer({

  Login: { screen: Login },

  Signup: { screen: Signup },

  Home: { screen: Home },

}, {

  initialRouteName: 'Login'

})

const AppRoot = createStackNavigator(Container)

登录.js：

import React, { Component } from 'react'

import { Text, View } from 'react-native'

export default class Login extends Component {

    render() {

        return (

            <View>

                <Text> login </Text>

            </View>

        )

    }

}

注册.js

import React, { Component } from 'react'

import { Text, View } from 'react-native'

export default class Signup extends Component {

    render() {

        return (

            <View>

                <Text> Signup </Text>

            </View>

        )

    }

}

主页.js：

import React, { Component } from 'react'

import { Text, View } from 'react-native'

export default class Home extends Component {

    render() {

        return (

            <View>

                <Text> Home </Text>

            </View>

        )

    }

}

我不知道是什么问题。

Answer 1

您似乎以错误的顺序使用了反应导航功能。首先，您必须创建堆栈导航器，然后使用它创建应用程序容器：const Container = createStackNavigator({&nbsp; Login: { screen: Login },&nbsp; Signup: { screen: Signup },&nbsp; Home: { screen: Home },}, {&nbsp; initialRouteName: 'Login'})const AppRoot = createAppContainer(Container)

Answer 2

从 'react-navigation-stack' 中删除 import { createStackNavigator } 并从 'react-navigation' 中使用 import { createAppContainer,createStackNavigator };

Answer 3

应用程序.jsimport React, { Component } from 'react'import { Text, View } from 'react-native'import { createAppContainer, createStackNavigator } from 'react-navigation';import Login from './screens/Login'import Signup from './screens/Signup'import Home from './screens/home'export default class App extends Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <AppRoot />&nbsp; &nbsp; )&nbsp; }}let RootStack = createStackNavigator({&nbsp; Login: Login,&nbsp; Signup: Signup,&nbsp; Home: Home,})const AppRoot = createAppContainer(RootStack)现在导航道具出现在您所有的屏幕登录、注册、主页上。例如，从登录导航到主页登录.js&nbsp;import React, { Component } from 'react'&nbsp; &nbsp; import { Text, View, TouchableOpacity } from 'react-native'&nbsp; &nbsp; export default class Login extends Component {&nbsp; &nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text> Home </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }希望这可以帮助。如果您有任何进一步的疑问，请告诉我。