React native 路由'的组件；ActivityFeed'；必须是反应组件

关于类似的问题，我在这里浏览了很多类似的帖子，但是没有一个答案能帮我解决这个问题

这是全部错误：

因此，在我的

src/navigation/feed/stack.js中，其定义如下：

从“React”导入React；
从“react navigation”导入{StackNavigator}；
从“activity feed/session user/screens/Main”导入ActivityFeed；
从“导航组件/汉堡按钮”导入汉堡按钮；
从“导航组件/标题”导入标题；
从“导航组件/ActionAlertIndicator”导入ActionAlertIndicator；
从“../config”导入*作为navConfig；
从“utils/cache”导入*作为缓存；
const stack=StackNavigator(
{
活动提要：{
屏幕：ActivityFeed，
导航选项：（{navigation}）=>({
标题：(
(
navigation.navigate（'drawerropen'）}
/>
)}
headerRight={（）=>(

这是
src/auth/screens/ResetLinkConfirmationAlert.js
文件：

import React from 'react';
import {connect} from 'react-redux';
import ResetPasswordLinkConfirmationAlert from 'auth/components/ResetPasswordLinkConfirmationAlert';
import PropTypes from 'prop-types';

const ResetLinkConfirmationAlert = ({resetEmail, navigation}) => {
  const {params} = navigation.state;
  return <ResetPasswordLinkConfirmationAlert email={resetEmail} {...params} />;
};

ResetLinkConfirmationAlert.propTypes = {
  navigation: PropTypes.object,
  resetEmail: PropTypes.string,
};

const mapStateToProps = ({registrations}) => {
  const {resetEmail} = registrations.resetPasswordData;
  const email = resetEmail || registrations.verificationEmail;
  return {resetEmail: email};
};

export default connect(mapStateToProps)(ResetLinkConfirmationAlert);

升级到
react navigation
2.0.0不是答案，因为我已经尝试过了，如果您打算建议升级到3.x，请解释如何解决此问题

有人建议，在react redux 7.1.0的变更日志中，他们提到了一个注释，说明如果元素作为道具传递，则必须将
PropTypes.func
更改为
PropTypes.elementType

github.com/reduxjs/react-redux/releases/tag/v7.0.1

因此，如果我得到
SetNewPassword
的错误，我将其重构如下：

export class CompleteAccount extends PureComponent {
  static propTypes = {
    loading: PropTypes.bool,
    newConfirmResetPassword: PropTypes.string,
    newResetPassword: PropTypes.string,
    resetUserPassword: PropTypes.elementType.isRequired,
    setConfirnResetPassword: PropTypes.elementType.isRequired,
    setNewResetPassword: PropTypes.elementType.isRequired,
    validationErrors: PropTypes.object
  };

import { SetNewPassword } from "auth/screens/SetNewPassword";

然后在
navigation/auth/stack.js
中，我在import语句中添加了花括号，如下所示：

export class CompleteAccount extends PureComponent {
  static propTypes = {
    loading: PropTypes.bool,
    newConfirmResetPassword: PropTypes.string,
    newResetPassword: PropTypes.string,
    resetUserPassword: PropTypes.elementType.isRequired,
    setConfirnResetPassword: PropTypes.elementType.isRequired,
    setNewResetPassword: PropTypes.elementType.isRequired,
    validationErrors: PropTypes.object
  };

import { SetNewPassword } from "auth/screens/SetNewPassword";

但是我仍然收到了错误消息，尽管我不确定我是否正确地应用了它。同时我注意到
SetNewPassword.js
文件只有
CompleteAccount
的命名导出：

export class CompleteAccount extends PureComponent {
  static propTypes = {
    loading: PropTypes.bool,
    newConfirmResetPassword: PropTypes.string,
    newResetPassword: PropTypes.string,
    resetUserPassword: PropTypes.elementType.isRequired,
    setConfirnResetPassword: PropTypes.elementType.isRequired,
    setNewResetPassword: PropTypes.elementType.isRequired,
    validationErrors: PropTypes.object
  };
.......

export default connect(
  mapStateToProps,
  {
    resetUserPassword,
    setNewResetPassword,
    setConfirnResetPassword
  }
)(CompleteAccount);

我不确定这个文件以前是如何以这种方式工作的。我通常将我的文件命名为与类或函数屏幕相同的名称，并使用相同的名称导入它

进一步检查后，我发现有两个屏幕具有相同的类名函数

CompleteAccount.js
：

import React from "react";
import { StackNavigator, NavigationActions } from "react-navigation";
import { Intro } from "auth/screens/Intro";
import { Login } from "auth/screens/Login";
import { PasswordReset } from "auth/screens/PasswordReset";
import { RegisterNoEmail } from "auth/screens/RegisterNoEmail";
import AskForMembership from "auth/screens/AskForMembership";
import { CompleteAccount } from "auth/screens/CompleteAccount";
import { ConfirmMemberAccount } from "auth/screens/ConfirmMemberAccount";
import { Register } from "auth/screens/Register";
import SetNewPassword from "auth/screens/SetNewPassword";
import { RegisterEmailPassword } from "auth/screens/RegisterEmailPassword";
import ResetLinkConfirmationAlert from "auth/screens/ResetLinkConfirmationAlert";
import DetailsConfirmation from "auth/screens/DetailsConfirmation";
import AccountCreated from "auth/screens/AccountCreated";

import BackButton from "navigation-components/BackButton";
import CustomHeader from "navigation-components/CustomHeader";
import HeaderTitle from "navigation-components/HeaderTitle";
import { v2Colors } from "theme";
import { defaultStackConfig, defaultHeaderStyles } from "../config";

const leftRegiterNavOptions = {
  title: "Register",
  headerStyle: defaultStackConfig.authHeaderStyle
};

const stack = StackNavigator(
  {
    Intro: {
      screen: Intro,
      navigationOptions: {
        header: null
      }
    },
    Register: {
      screen: Register,
      navigationOptions: ({ navigation }) => ({
        header: <CustomHeader onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    RegisterNoEmail: {
      screen: RegisterNoEmail,
      navigationOptions: leftRegiterNavOptions
    },
    RegisterEmailPassword: {
      screen: RegisterEmailPassword,
      navigationOptions: leftRegiterNavOptions
    },
    AskForMembership: {
      screen: AskForMembership,
      navigationOptions: {
        header: <HeaderTitle />,
        headerStyle: defaultStackConfig.authHeaderStyle
      }
    },
    ConfirmMemberAccount: {
      screen: ConfirmMemberAccount,
      navigationOptions: ({ navigation }) => ({
        header: (
          <HeaderTitle
            headerLeft={() => (
              <BackButton onPress={() => navigation.goBack(null)} />
            )}
          />
        ),
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    CompleteAccount: {
      screen: CompleteAccount,
      navigationOptions: {
        header: <HeaderTitle />,
        headerStyle: defaultStackConfig.authHeaderStyle
      }
    },
    Login: {
      screen: Login,
      navigationOptions: ({ navigation }) => ({
        title: "Log In",
        headerLeft: <BackButton onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    PasswordReset: {
      screen: PasswordReset,
      navigationOptions: ({ navigation }) => ({
        title: "Password Reset",
        headerLeft: <BackButton onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    ResetLinkConfirmationAlert: {
      screen: ResetLinkConfirmationAlert,
      navigationOptions: ({ navigation }) => ({
        title: "Password Reset",
        headerLeft: (
          <BackButton
            onPress={() => {
              const resetNavAction = NavigationActions.reset({
                index: 0,
                key: null,
                actions: [NavigationActions.navigate({ routeName: "Intro" })]
              });
              navigation.dispatch(resetNavAction);
            }}
          />
        ),
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },

export class CompleteAccount extends PureComponent {
  static propTypes = {
    cellPhone: PropTypes.string,
    cellPhoneChanged: PropTypes.func.isRequired,
    city: PropTypes.string,
    cityChanged: PropTypes.func.isRequired,
    errors: PropTypes.object,
    firstName: PropTypes.string.isRequired,
    homeAddress: PropTypes.string,
    homeAddressChanged: PropTypes.func.isRequired,
    homePhone: PropTypes.string,
    homePhoneChanged: PropTypes.func.isRequired,
    registeredUser: PropTypes.object,
    registerUser: PropTypes.func.isRequired,
    state: PropTypes.string,
    stateChanged: PropTypes.func.isRequired,
    zipCode: PropTypes.string.isRequired,
    zipCodeChanged: PropTypes.func.isRequired,
  };

导出为：

export default connect(mapStateToProps, {
  cityChanged,
  homeAddressChanged,
  homePhoneChanged,
  cellPhoneChanged,
  stateChanged,
  zipCodeChanged,
  registerUser,
})(CompleteAccount);

然后是
SetNewPassword.js
：

import React from "react";
import { StackNavigator, NavigationActions } from "react-navigation";
import { Intro } from "auth/screens/Intro";
import { Login } from "auth/screens/Login";
import { PasswordReset } from "auth/screens/PasswordReset";
import { RegisterNoEmail } from "auth/screens/RegisterNoEmail";
import AskForMembership from "auth/screens/AskForMembership";
import { CompleteAccount } from "auth/screens/CompleteAccount";
import { ConfirmMemberAccount } from "auth/screens/ConfirmMemberAccount";
import { Register } from "auth/screens/Register";
import SetNewPassword from "auth/screens/SetNewPassword";
import { RegisterEmailPassword } from "auth/screens/RegisterEmailPassword";
import ResetLinkConfirmationAlert from "auth/screens/ResetLinkConfirmationAlert";
import DetailsConfirmation from "auth/screens/DetailsConfirmation";
import AccountCreated from "auth/screens/AccountCreated";

import BackButton from "navigation-components/BackButton";
import CustomHeader from "navigation-components/CustomHeader";
import HeaderTitle from "navigation-components/HeaderTitle";
import { v2Colors } from "theme";
import { defaultStackConfig, defaultHeaderStyles } from "../config";

const leftRegiterNavOptions = {
  title: "Register",
  headerStyle: defaultStackConfig.authHeaderStyle
};

const stack = StackNavigator(
  {
    Intro: {
      screen: Intro,
      navigationOptions: {
        header: null
      }
    },
    Register: {
      screen: Register,
      navigationOptions: ({ navigation }) => ({
        header: <CustomHeader onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    RegisterNoEmail: {
      screen: RegisterNoEmail,
      navigationOptions: leftRegiterNavOptions
    },
    RegisterEmailPassword: {
      screen: RegisterEmailPassword,
      navigationOptions: leftRegiterNavOptions
    },
    AskForMembership: {
      screen: AskForMembership,
      navigationOptions: {
        header: <HeaderTitle />,
        headerStyle: defaultStackConfig.authHeaderStyle
      }
    },
    ConfirmMemberAccount: {
      screen: ConfirmMemberAccount,
      navigationOptions: ({ navigation }) => ({
        header: (
          <HeaderTitle
            headerLeft={() => (
              <BackButton onPress={() => navigation.goBack(null)} />
            )}
          />
        ),
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    CompleteAccount: {
      screen: CompleteAccount,
      navigationOptions: {
        header: <HeaderTitle />,
        headerStyle: defaultStackConfig.authHeaderStyle
      }
    },
    Login: {
      screen: Login,
      navigationOptions: ({ navigation }) => ({
        title: "Log In",
        headerLeft: <BackButton onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    PasswordReset: {
      screen: PasswordReset,
      navigationOptions: ({ navigation }) => ({
        title: "Password Reset",
        headerLeft: <BackButton onPress={() => navigation.goBack(null)} />,
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },
    ResetLinkConfirmationAlert: {
      screen: ResetLinkConfirmationAlert,
      navigationOptions: ({ navigation }) => ({
        title: "Password Reset",
        headerLeft: (
          <BackButton
            onPress={() => {
              const resetNavAction = NavigationActions.reset({
                index: 0,
                key: null,
                actions: [NavigationActions.navigate({ routeName: "Intro" })]
              });
              navigation.dispatch(resetNavAction);
            }}
          />
        ),
        headerStyle: defaultStackConfig.authHeaderStyle
      })
    },

export class CompleteAccount extends PureComponent {
  static propTypes = {
    cellPhone: PropTypes.string,
    cellPhoneChanged: PropTypes.func.isRequired,
    city: PropTypes.string,
    cityChanged: PropTypes.func.isRequired,
    errors: PropTypes.object,
    firstName: PropTypes.string.isRequired,
    homeAddress: PropTypes.string,
    homeAddressChanged: PropTypes.func.isRequired,
    homePhone: PropTypes.string,
    homePhoneChanged: PropTypes.func.isRequired,
    registeredUser: PropTypes.object,
    registerUser: PropTypes.func.isRequired,
    state: PropTypes.string,
    stateChanged: PropTypes.func.isRequired,
    zipCode: PropTypes.string.isRequired,
    zipCodeChanged: PropTypes.func.isRequired,
  };

又称:

export class CompleteAccount extends PureComponent {
  static propTypes = {
    loading: PropTypes.bool,
    newConfirmResetPassword: PropTypes.string,
    newResetPassword: PropTypes.string,
    resetUserPassword: PropTypes.func.isRequired,
    setConfirnResetPassword: PropTypes.func.isRequired,
    setNewResetPassword: PropTypes.func.isRequired,
    validationErrors: PropTypes.object
  };
.....

export default connect(
  mapStateToProps,
  {
    resetUserPassword,
    setNewResetPassword,
    setConfirnResetPassword
  }
)(CompleteAccount);

尽管文件名完全不同。这令人困惑，为什么他们不给第二个文件名为
SetNewPassword
？
直接问题看起来像是组件文件中的多次导出。尝试在类定义之前删除
导出
，只保留
导出默认值
最后

关于
SetNewPassword.js
和
CompleteAccount.js
具有相同导出的混淆，只要导入
default exported
组件，就不会产生问题

简单地说,

如果将组件导出为
默认值
，则可以在不使用
{}
花括号的情况下导入它，如

import CompleteAccount from '.../CompleteAccount.js'

在这里，您可以为导入命名任何您想要的名称

如果使用大括号，将导入名为export的
，如

import {CompleteAccount} from '.../CompleteAccount.js'

在经历了长达6天的艰苦工作之后，我尝试了一些与我们在获得命名导出时使用大括号的理解不符的修复，我一直怀疑问题出在
react导航
上，因为我没有弄乱
react导航
版本或代码库

问题在于
react导航
如何与
react redux
Version7一起工作或不工作

React导航无法识别React Redux版本7返回的对象

解决方案是降级为React-Redux版本5.1.1。
您的React-Redux版本是什么using@Gokul，我使用的是
“react redux”：“7.1.0”
。感谢您了解这一点。在react redux 7.0.1的变更日志中，他们提到了一条注释，说明如果元素作为道具传递，则必须将PropTypes.func更改为PropTypes.elementType。您能否检查这是否是您的系统中的一个问题case@Gokul，我尝试了。我将详细信息添加到上面的OP。删除“导出”Main.js文件中Class之前的关键字我尝试导入
Login
，但没有大括号，因为它有
导出默认连接（
，如您所说），我立即得到一个错误。