Приложение аварийно завершает работу при переходе назад с использованием pop ()

Question

Изначально приложение работало нормально, после чего я создал custom stack поверх стека Authenticated (экраны, когда пользователь проходит проверку подлинности).

Приложение аварийно завершает работу, когда я возвращаюсь при возврате с помощью pop (), но оно отлично работает с navigate или goBack ().

inActiveUser => Проверка событий касания пользователя с помощью Pan Responder, для выхода из системы, когда он неактивен.

AuthenticatedNavigator => Маршруты, в которых разрешен аутентифицированный пользователь.

Новый стек:

Новый стека аутентификации реализовано поверх стека с аутентификацией.

Panresponder

 "react-dom": "^16.12.0",
 "react-native": "0.61.5",
 "react-native-gesture-handler": "^1.5.3",
 "react-navigation": "^4.0.10",
 "react-navigation-drawer": "^2.3.3",
 "react-navigation-stack": "^2.0.10",

import React from 'react';
import UserActivity from 'utils/inactiveUser';
import AuthenticatedNavigator from '../AuthenticatedStack';

class CustomStack extends React.Component {
    panHandlers = {};

    userActivity;

    constructor(props) {
        super(props);
        this.userActivity = new UserActivity();
    }

    componentDidMount() {
        this.userActivity.startTimer();
        this.panHandlers = this.userActivity.panHandlers();
    }

    static router = AuthenticatedNavigator.router;

    render() {
        const { navigation } = this.props;
        return <AuthenticatedNavigator screenProps={{ ...this.panHandlers }} navigation={navigation} />;
    }
}

export default CustomStack;


/*******************************************/


TypeError: Cannot read property 'state' of undefined

This error is located at:
    in Navigator (at SceneView.js:9)
    in SceneView (at StackView.tsx:269)
    in RCTView (at CardContainer.tsx:171)
    in RCTView (at CardContainer.tsx:170)
    in RCTView (at Card.tsx:486)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:473)
    in PanGestureHandler (at Card.tsx:466)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:462)
    in RCTView (at Card.tsx:455)
    in Card (at CardContainer.tsx:138)
    in CardContainer (at CardStack.tsx:501)
    in RCTView (at CardStack.tsx:110)
    in MaybeScreen (at CardStack.tsx:494)
    in RCTView (at CardStack.tsx:93)
    in MaybeScreenContainer (at CardStack.tsx:401)
    in CardStack (at StackView.tsx:377)
    in KeyboardManager (at StackView.tsx:375)
    in RNCSafeAreaView (at src/index.tsx:26)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
    in SafeAreaProviderCompat (at StackView.tsx:372)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Unknown (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at DrawerView.tsx:183)
    in RCTView (at ResourceSavingScene.tsx:37)
    in RCTView (at ResourceSavingScene.tsx:26)
    in ResourceSavingScene (at DrawerView.tsx:175)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at DrawerView.tsx:164)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:539)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:535)
    in PanGestureHandler (at Drawer.tsx:525)
    in DrawerView (at DrawerView.tsx:251)
    in DrawerView (at createNavigator.js:80)
    in Navigator (at CustomStack/index.js:24)
    in CustomStack (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at src/index.js:52)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (at src/index.js:51)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in ChildrenWrapper (at wrapRootComponent.js:9)
    in _default (at wrapRootComponent.js:8)
    in Root (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)



TypeError: Cannot read property 'state' of undefined

This error is located at:
    in NavigationContainer (at src/index.js:52)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (at src/index.js:51)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in ChildrenWrapper (at wrapRootComponent.js:9)
    in _default (at wrapRootComponent.js:8)
    in Root (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)



BugReporting extraData: 
{AppRegistry.runApplication1: "Running "smemobileapp" with {"rootTag":21,"initialProps":{}}"}
AppRegistry.runApplication1: (...)
get AppRegistry.runApplication1: ƒ ()
set AppRegistry.runApplication1: ƒ ()
__proto__: Object

Ссылка указана

https://medium.com/@benjaminwfox / совместное использование состояний между экранами с пользовательскими навигаторами- in-реагировать на навигацию-62a34e3c7f97

https://reactnavigation.org/docs/en/custom-routers.html

Реагировать с ES7: Uncaught TypeError: Невозможно прочитать свойство 'state' of undefined

Невозможно получить доступ к экземпляру React (this) из обработчика событий

Сбой приложения React-Native при навигации

Answer 1

Я пропускал не тот объект. {{...this.panHandlers}} вместо { ...this.panHandlers}

class CustomStack extends React.Component {
  panHandlers = {};

  userActivity;

  constructor(props) {
    super(props);
    this.userActivity = new UserActivity();
  }

  componentDidMount() {
    this.userActivity.startTimer();
    this.panHandlers = this.userActivity.panHandlers();
  }

  static router = AuthenticatedNavigator.router;

  render() {
    const {
      navigation
    } = this.props;
    return <AuthenticatedNavigator screenProps = { ...this.panHandlers
    }
    navigation = {
      navigation
    }
    />;
  }
}