当我使用 pop() 返回时导航时应用程序崩溃

Question

最初，该应用程序运行良好，之后我在经过身份验证的堆栈上创建了一个custom stack（用户通过身份验证时的屏幕）。

当我使用 pop() 返回时导航时应用程序崩溃，但使用 navigate 或 goBack() 可以正常工作。

inActiveUser => 使用 Pan Responder 检查用户触摸事件，以便在他不活动时注销。

AuthenticatedNavigator => 允许经过身份验证的用户的路由。

新堆栈：

新的Authenticated stack是在Authentcated stack之上实现的。

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/share-state-between-screens-with-custom-navigators-in-react-navigation-62a34e3c7f97

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

React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined

Unable to access React instance (this) inside event handler

React-Native App getting crashed on navigate

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