时间戳

首页 > 解决方案 > 错误路由器的组件必须是反应组件

react-native - 错误路由器的组件必须是反应组件

问题描述

环境

反应原生：0.61

反应原生导航：4.0

部署的操作系统：Android 9 pie

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './Signup';
import React, { Component } from 'react';
import Home from './Home';
import EditProfile from './Editprofile';
import Payments from './Payments';
import Refer from './Refer';
import { createDrawerNavigator } from 'react-navigation-drawer';

export default class App extends React.Component {
  render() {

    return <Appcont />;
  }
}
const appi = createStackNavigator(
  {
    signup: {
      screen: ()=><Signup/>
    },
     home: {
        screen: ()=><Home/>
      },
      editProfile:{
        screen:()=><EditProfile/>
      },
      payments:{
        screen:()=><Payments/>
      },
      refer:{
        screen:()=><Refer/>
      }
    },
    {
      initialRouteName:'signup'
    }

);


const MyDrawerNavigator = createDrawerNavigator(appi,{
  initialRouteName: 'signup',
    headerMode:'float',
  contentOptions: {
    activeTintColor: '#e91e63',
  }
});

const Appcont = createAppContainer(MyDrawerNavigator);

主页.js

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


 class Home extends Component {
  static navigationOptions = {
    title:'Home',
  drawerLabel: 'Home',
  drawerIcon: ({ tintColor }) => (
    <Image
      source={require('./img/Homepng.png')}
      style={{width:20,height:20}}
    />
  ),headerShown:'true'
};
  render() {

    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, home</Text>
      </View>
    );
  }
}
export default Home;

当我运行上面的代码时，它会抛出一个错误！错误路由器的组件必须是反应组件

我已经看到了与此相关的所有问题并尽可能地进行了纠正，但我仍然收到此错误，我不知道为什么？

标签： react-native

解决方案

你可以尝试改变

const appi = createStackNavigator(
  {
    signup: {
      screen: ()=><Signup/>
    },
}

至

const appi = createStackNavigator({
  signup: {
    screen: Signup,
  },
});

同时，Singup 必须扩展 React.Component，并记得导出它。并且() => <Home/>不是一个组件。它是函数对象

export defalut class Sigup extends React.component

推荐阅读