react-native - 获得未定义不是一个对象（评估'props.navigation.addListener'）

Question

我正在尝试为 Backhandler 实现 HOC。我有 3 个组件都包裹在 createBottomTabNavigator 中，home 就是其中之一。但在实施反处理之前，HOC 显示此错误。

组件首页-

import React, { Component } from 'react';
import {Text,View} from 'react-native';
import updateComponent from './HOC/updateComponent';
class home extends Component {
constructor(props) {
    super(props);
}
 render() {
  return (
     <View><Text> HOC</Text></View>
    );
  }
}
export default updateComponent(home);

HOC 更新组件

import React, { Component } from 'react';
const updateComponent = WrappedComponent => {
  class NewComponent extends Component {
    constructor(props) {
      super(props);
    }
    render() {

      return <WrappedComponent />;
    }
  }
  return NewComponent;
};
export default updateComponent;

Answer 1

你的home组件应该大写，来自React 文档：

当元素类型以小写字母开头时，它指代内置组件，如 or 并导致传递给 React.createElement 的字符串 'div' 或 'span'。以大写字母开头的类型，如编译为 React.createElement(Foo) 并对应于 JavaScript 文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在 JSX 中使用它之前将其分配给大写变量。

另一件事（不确定导致错误，但稍后会出现错误）是您没有将道具传递给NewComponent，这意味着每次包装组件时updateComponent都会丢失所有道具。

解决方案：

1. home-> Home。
2. return <WrappedComponent />--> return <WrappedComponent {...this.props} />。