React Native - navigation.addListner 不是对象

Question

App.js:

import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';

import Epics from './screens/tmp';
import Pager from './screens/Pager';

const DrawerNavigator = createDrawerNavigator({
 Home: {screen: Epics},
 Page: {screen: Pager}
},{initialRouteName: 'Home'});

const Stack = createAppContainer(DrawerNavigator);

export default class App extends Component {
  render() {
    return <Stack />;
  }
}

每次用户使用导航 addListner 事件登陆屏幕时尝试调用提取 API

componentDidMount() {
   this.loadFeed(); // fetch API
   const { navigation } = this.props;
   this.focus = navigation.addListener('willFocus', () => {
     this.loadFeed(); // fetch API
   });
}

来自 package.json 的 React Navigation 版本：

“反应导航”：“^4.2.2”
“反应导航抽屉”：“^2.4.2”

有没有更好的方法来检测应用程序上的活动屏幕并调用提取 API？或者修复下面给定的错误？

类型错误：undefined 不是对象（正在计算 'navigation.addListner'）： Error when the app launches

更新

我正在尝试在零食中复制以下示例：https://snack.expo.io/HkrP8YPIf

我做错了什么？（我是React Native新手，请帮我理解）

Answer 1

这只是意味着 navigation 不存在。所以看起来组件应该通过 props 接收它，但不是。这就是我从这段代码中可以看出的全部内容。

Answer 2

检查你的道具键，同意詹姆斯的观点。在这里有一个建议，因为你期待一个道具，你应该处理这个常见的错误，无论密钥是否存在（如果其他）

Answer 3

尝试使用 react-navigation 4.x 附带的 NavigationEvents 组件。只需将它嵌套在屏幕的渲染方法中的任何位置。

示例：

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={() => console.log('Screen will be in focus')}
      onDidFocus={() => console.log('Screen is in focus')}
      onWillBlur={() => console.log('Screen will blur')}
      onDidBlur={() => console.log('Screen blurred')}
    />
    {/*
      other code
    */}
  </View>
);

export default MyScreen;

React Native - navigation.addListner 不是对象

React Native - navigation.addListner is not an object

android

ios

react-native

react-native-navigation

expo

更新