React Native - navigation.addListner не является объектом - PullRequest
Новая
       65

React Native - navigation.addListner не является объектом

0 голосов
/ 09 марта 2020

Приложение. 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 />;
  }
}

Попытка вызывать API извлечения каждый раз, когда пользователь попадает на экран, используя событие навигации addListner 

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

Реагирование версии навигации из пакета. json:

  • "реагировать-навигация": "^ 4.2.2"
  • "реагировать-навигация-ящик": "^ 2.4.2"

Есть ли лучший способ обнаружить активный экран в приложении и вызвать API извлечения? Или исправить приведенную ниже ошибку?

Ошибка типа: undefined не является объектом (оценивается как «navigation.addListner»): Ошибка при запуске приложения

Обновление

Я пытаюсь повторить следующий пример в перекусе: https://snack.expo.io/HkrP8YPIf

Что я делаю не так? (Я новичок в React Native, пожалуйста, помогите мне понять)

Ответы [ 3 ]

0 голосов
/ 09 марта 2020

Проверь ключи от реквизита, согласись с Джеймсом. Здесь есть одно предложение, так как вы ожидаете реквизит, вы должны обработать эту распространенную ошибку независимо от того, существует ключ или нет (если есть)

0 голосов
/ 12 марта 2020

Попробуйте использовать компонент NavigationEvents, поставляемый с response-navigation 4.x. Просто вложите его где угодно в метод визуализации вашего экрана.

Пример: 

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;
0 голосов
/ 09 марта 2020

Это просто означает, что navigation не существует. Таким образом, похоже, что компонент должен получать его через реквизит, а это не так. Это все, что я могу сказать из этого кода.

...