Question

我想为我的react native应用程序创建导航，但这显示了此错误。我不知道该如何解决。在底部，我有我的JS文件：

我尝试了所有代码，例如，我编写了导出className并导入了{className}

App.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)

Login.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>
        )
    }
}

Signup.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>
        )
    }
}

home.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

从“ react-navigation-stack”中删除导入{createStackNavigator}并使用从“反应导航”导入{createAppContainer，createStackNavigator};

Answer 2

App.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)

现在，导航道具出现在所有屏幕的登录，注册，主页中。例如，要从“登录”导航到首页

Login.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>
            )
        }
    }

希望这会有所帮助。让我知道您是否还有其他疑问。

Answer 3

似乎您以错误的顺序使用了反应导航功能。首先，您必须创建堆栈导航器，然后使用它创建应用程序容器：

const Container = createStackNavigator({
  Login: { screen: Login },
  Signup: { screen: Signup },

  Home: { screen: Home },
}, {
  initialRouteName: 'Login'
})
const AppRoot = createAppContainer(Container)

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

3 个答案: