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

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>        )    }}注册.jsimport 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({

  Login: { screen: Login },

  Signup: { screen: Signup },

  Home: { screen: Home },

}, {

  initialRouteName: 'Login'

})

const AppRoot = createAppContainer(Container)

Answer 2

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

Answer 3

应用程序.js

import 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 {

  render() {

    return (

      <AppRoot />

    )

  }

}

let RootStack = createStackNavigator({

  Login: Login,

  Signup: Signup,

  Home: Home,

})

const AppRoot = createAppContainer(RootStack)

现在导航道具出现在您所有的屏幕登录、注册、主页上。例如，从登录导航到主页

登录.js

 import React, { Component } from 'react'

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

    export default class Login extends Component {

        render() {

            return (

                <TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>

                    <Text> Home </Text>

                </TouchableOpacity>

            )

        }

    }

希望这可以帮助。如果您有任何进一步的疑问，请告诉我。