react-native - 路由 'ActivityFeed' 的组件必须是 React 组件

Question

我已经在 SO 上查看了关于类似问题的各种类似帖子，但没有一个答案能为我解决问题。

这是完整的错误:

所以在我的 src/navigation/feed/stack.js 中，它的定义如下:

import React from 'react';
import {StackNavigator} from 'react-navigation';
import ActivityFeed from 'activity-feed/session-user/screens/Main';
import HamburgerButton from 'navigation-components/HamburgerButton';
import HeaderTitle from 'navigation-components/HeaderTitle';
import ActionAlertIndicator from 'navigation-components/ActionAlertIndicator';
import * as navConfig from '../config';
import * as cache from 'utils/cache';

const stack = StackNavigator(
  {
    ActivityFeed: {
      screen: ActivityFeed,
      navigationOptions: ({navigation}) => ({
        header: (
          <HeaderTitle
            headerLeft={() => (
              <HamburgerButton
                onPress={() => navigation.navigate('DrawerOpen')}
              />
            )}
            headerRight={() => (
              <ActionAlertIndicator
                onPress={() => {
                  cache.setRouteStarter('MainDrawer');
                  navigation.navigate('ActionAlertsStack');
                }}
              />
            )}
          />
        ),
      }),
    },
  },
  {
    navigationOptions: {
      ...navConfig.defaultStackConfig,
    },
  }
);

export default stack;

实际的组件或屏幕在 src/activity-feed/session-user/screens/Main.js 中定义如下:

import React, {PureComponent} from 'react';
import {
  FlatList,
  StyleSheet,
  AppState,
  Platform,
  Dimensions,
  View,
  Alert,
} from 'react-native';
import PropTypes from 'prop-types';
import OneSignal from 'react-native-onesignal';
import {Loading, SwippableCard, BottomAlert} from 'common-components';
import EmptyState from 'activity-feed/session-user/components/EmptyState';
import EventFeedCard from 'events/components/EventFeedCard';
import SurveyBallotFeedCard from 'surveys-ballots/components/FeedCard';
import MicroSurvey from 'surveys-ballots/components/MicroSurvey';
import ActionAlertFeedCard from 'action-alerts/components/ActionAlertFeedCard';
import MissingAddressCard from 'action-alerts/components/MissingAddressCard';
import ArticleFeedCard from 'articles/components/ArticleFeedCard';
import GetInvolvedFeedCard from 'account-settings/components/GetInvolvedFeedCard';
import {connect} from 'react-redux';
import {
  fetchFeed,
  handleContentSwipe,
  undoSwipeAction,
  hideUndoAlert,
} from 'activity-feed/actions';
import {setSelectedEvent} from 'events/actions';
import {setSelectedSurvey} from 'surveys-ballots/actions';
import {setSelectedAlert, getCampaignDetails} from 'action-alerts/actions';
import * as cache from 'utils/cache';
import {setSelectedArticle} from 'articles/actions';
import {
  handleUpdateTopics,
  handleUpdateGetInvoved,
} from 'account-settings/preferencesActions';
import {scale} from 'react-native-size-matters';
import {emptyStateStyles} from 'theme';

const {height} = Dimensions.get('window');

export class ActivityFeed extends PureComponent {
  static propTypes = {
    displayAlert: PropTypes.bool,
    feed: PropTypes.array,
    fetchFeed: PropTypes.func,
    getCampaignDetails: PropTypes.func,
    handleContentSwipe: PropTypes.func,
    handleUpdateGetInvoved: PropTypes.func,
    handleUpdateTopics: PropTypes.func,
    hideUndoAlert: PropTypes.func,
    lastSwippedElement: PropTypes.object,
    loading: PropTypes.bool,
    navigation: PropTypes.object,
    setSelectedAlert: PropTypes.func,
    setSelectedArticle: PropTypes.func,
    setSelectedEvent: PropTypes.func,
    setSelectedSurvey: PropTypes.func.isRequired,
    undoSwipeAction: PropTypes.func,
    userEmailIsValidForVoterVoice: PropTypes.bool,
  };

  constructor(props) {
    super(props);
    this.prompted = false;

    this.state = {
      refreshing: false,
      appState: AppState.currentState,
    };
  }

  async componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    if (!this.props.loading) {
      const doRefresh = await cache.shouldRefresh('feed');
      if (this.props.feed.length === 0 || doRefresh) {
        this.props.fetchFeed();
      }
      cache.incrementAppViews();
    }
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = async appState => {
    if (
      this.state.appState.match(/inactive|background/) &&
      appState === 'active'
    ) {
      cache.incrementAppViews();
      const doRefresh = await cache.shouldRefresh('feed');
      if (doRefresh) {
        this.props.fetchFeed();
      }
    }
    this.setState({appState});
  };

  _keyExtractor = ({Entity}) =>
    (Entity.Key || Entity.Id || Entity.CampaignId || Entity.Code).toString();

  _gotoEvent = event => {
    cache.setRouteStarter('MainDrawer');
    this.props.setSelectedEvent(event);
    const title = `${event.LegislatureType} Event`;
    this.props.navigation.navigate('EventDetails', {title});
  };

  _gotoSurveyBallot = survey => {
    cache.setRouteStarter('MainDrawer');
    this.props.setSelectedSurvey(survey);
    this.props.navigation.navigate('SurveyDetails');
  };

  _gotoArticle = article => {
    cache.setRouteStarter('MainDrawer');
    this.props.setSelectedArticle(article);
    this.props.navigation.navigate('ArticleDetails');
  };

  _onAlertActionButtonPress = async item => {
    cache.setRouteStarter('MainDrawer');
    await this.props.setSelectedAlert(item.Entity);
    this.props.getCampaignDetails();
    if (this.props.userEmailIsValidForVoterVoice) {
      this.props.navigation.navigate('Questionnaire');
    } else {
      this.props.navigation.navigate('UnconfirmedEmail');
    }
  };

  _onSwipedOut = (swippedItem, index) => {
    this.props.handleContentSwipe(this.props, {swippedItem, index});
  };

  _handleGetInvolved = (response, entity) => {
    if (response !== entity.IsSelected) {
      const isTopic = entity.Category !== 'GetInvolved';
      const items = [
        {
          ...entity,
          IsSelected: response,
        },
      ];
      if (isTopic) {
        this.props.handleUpdateTopics({topics: items});
      } else {
        this.props.handleUpdateGetInvoved({involved: items});
      }
    }
  };

  renderItem = ({item, index}) => {
    const {Type, Entity} = item;
    if (Type === 'EVENT') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <EventFeedCard
            style={styles.push}
            mainActionButtonPress={() => this._gotoEvent(Entity)}
            event={Entity}
          />
        </SwippableCard>
      );
    }

    if (['SURVEY_SURVEY', 'SURVEY_BALLOT'].includes(Type)) {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <SurveyBallotFeedCard
            style={styles.push}
            survey={Entity}
            handleViewDetails={() => this._gotoSurveyBallot(Entity)}
          />
        </SwippableCard>
      );
    }

    if (Type === 'SURVEY_MICRO') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <MicroSurvey style={styles.push} selectedSurvey={Entity} />
        </SwippableCard>
      );
    }

    if (Type === 'ALERT') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <ActionAlertFeedCard
            datePosted={Entity.StartDateUtc}
            style={styles.push}
            title={Entity.Headline}
            content={Entity.Alert}
            mainActionButtonPress={() => this._onAlertActionButtonPress(item)}
            secondaryActionButtonPress={() => {
              this.props.setSelectedAlert(Entity);
              // eslint-disable-next-line
              this.props.navigation.navigate("ActionAlertDetails", {
                content: Entity.Alert,
                id: Entity.CampaignId,
                title: Entity.Headline,
              });
            }}
          />
        </SwippableCard>
      );
    }

    if (Type === 'ARTICLE') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <ArticleFeedCard
            content={Entity}
            style={styles.push}
            mainActionButtonPress={() => this._gotoArticle(Entity)}
          />
        </SwippableCard>
      );
    }

    //prettier-ignore
    if (Type === 'NOTIFICATION' && Entity.Code === 'INDIVIDUAL_ADDRESS_HOME_MISSING') {
      return (
        <MissingAddressCard
          style={styles.push}
          navigate={() => this.props.navigation.navigate('HomeAddress')}
        />
      );
    }

    if (['PREFERENCE_TOPIC', 'PREFERENCE_INVOLVEMENT'].includes(Type)) {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <GetInvolvedFeedCard
            style={styles.push}
            title={Entity.DisplayText}
            onPress={response => this._handleGetInvolved(response, Entity)}
          />
        </SwippableCard>
      );
    }

    return null;
  };

  _onRefresh = async () => {
    try {
      this.setState({refreshing: true});
      this.props
        .fetchFeed()
        .then(() => {
          this.setState({refreshing: false});
        })
        .catch(() => {
          this.setState({refreshing: false});
        });
    } catch (e) {
      this.setState({refreshing: false});
    }
  };

  _trackScroll = async event => {
    try {
      if (this.prompted) {
        return;
      }

      const y = event.nativeEvent.contentOffset.y;
      const scrollHeight = height * 0.8;
      const page = Math.round(Math.floor(y) / scrollHeight);
      const alert = await cache.shouldPromtpPushNotificationPermissions();
      const iOS = Platform.OS === 'ios';

      if (alert && iOS && page > 1) {
        this.prompted = true;
        this._openPromptAlert();
      }
    } catch (e) {
      return false;
    }
  };

  _openPromptAlert = () => {
    Alert.alert(
      'Push Notifications Access',
      'Stay engaged with NFIB on the issues and activities you care about by allowing us to notify you using push notifications',
      [
        {
          text: 'Deny',
          onPress: () => {
            cache.pushNotificationsPrompted();
          },
          style: 'cancel',
        },
        {
          text: 'Allow',
          onPress: () => {
            OneSignal.registerForPushNotifications();
            cache.pushNotificationsPrompted();
          },
        },
      ],
      {cancelable: false}
    );
  };

  _getAlertTitle = () => {
    const {lastSwippedElement} = this.props;
    const {Type} = lastSwippedElement.swippedItem;

    if (Type.startsWith('PREFERENCE')) {
      return 'Preference Dismissed';
    }

    switch (Type) {
      case 'EVENT':
        return 'Event Dismissed';
      case 'SURVEY_BALLOT':
        return 'Ballot Dismissed';
      case 'SURVEY_SURVEY':
        return 'Survey Dismissed';
      case 'SURVEY_MICRO':
        return 'Micro Survey Dismissed';
      case 'ARTICLE':
        return 'Article Dismissed';
      case 'ALERT':
        return 'Action Alert Dismissed';
      default:
        return 'Dismissed';
    }
  };

  render() {
    if (this.props.loading && !this.state.refreshing) {
      return <Loading />;
    }

    const contentStyles =
      this.props.feed.length > 0 ? styles.content : emptyStateStyles.container;

    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={contentStyles}
          showsVerticalScrollIndicator={false}
          data={this.props.feed}
          renderItem={this.renderItem}
          keyExtractor={this._keyExtractor}
          removeClippedSubviews={false}
          onRefresh={this._onRefresh}
          refreshing={this.state.refreshing}
          ListEmptyComponent={() => (
            <EmptyState navigation={this.props.navigation} />
          )}
          scrollEventThrottle={100}
          onScroll={this._trackScroll}
        />
        {this.props.displayAlert && (
          <BottomAlert
            title={this._getAlertTitle()}
            onPress={this.props.undoSwipeAction}
            hideAlert={this.props.hideUndoAlert}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    paddingHorizontal: scale(8),
    paddingTop: scale(16),
    paddingBottom: scale(20),
  },
  push: {
    marginBottom: 16,
  },
});

const mapState2Props = ({
  activityFeed,
  auth: {userEmailIsValidForVoterVoice},
  navigation,
}) => {
  return {
    ...activityFeed,
    userEmailIsValidForVoterVoice,
    loading: activityFeed.loading || navigation.deepLinkLoading,
  };
};

export default connect(mapState2Props, {
  fetchFeed,
  getCampaignDetails,
  handleUpdateGetInvoved,
  handleUpdateTopics,
  setSelectedAlert,
  setSelectedArticle,
  setSelectedEvent,
  setSelectedSurvey,
  handleContentSwipe,
  undoSwipeAction,
  hideUndoAlert,
})(ActivityFeed);

我没有看到我的代码有任何明显的变化，我想知道 react-navigation 团队是否做了一些改变。

我正在使用 react-navigation 1.5.11 版和 react-native 0.60.4 版。

这是RN版本的兼容性问题吗？我别无选择，只能升级吗？

这个问题似乎在我的整个应用程序中都很普遍。我也在这里得到错误:

这是 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);

并将其导入到 src/navigation/auth/stack.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
      })
    },

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

有人建议在 react-redux 7.1.0 的变更日志中，他们提到了一条说明 PropTypes.func 必须更改为 PropTypes.elementType 如果一个元素正在作为 Prop 传递

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
  };

然后在 navigation/auth/stack.js 中，我将大括号添加到导入语句中，如下所示:

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:

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:

也被命名为:

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？

Answer 1

眼前的问题看起来像是组件文件中的多个导出。尝试删除类定义之前的 export，只保留最后的 export default。

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

简单来说，

如果您将一个组件导出为默认，那么您可以在没有{}大括号的情况下导入它，例如

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

在这里您可以随意命名导入。

如果你使用大括号，那将导入named export，比如

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