问题
Initially, the app was working fine, after which I created a custom stack
over Authenticated stack (screens when the user is Authenticated).
The app is crashing when I navigate while going back using pop(), but it works fine with navigate or goBack().
inActiveUser => Check for user touch events using Pan Responder, to log out when he is inactive.
AuthenticatedNavigator => Routes where the authenticated user is allowed.
New stack:
New Authenticated stack is implemented over 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
Link referred
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
回答1:
I was passing the wrong object. {{...this.panHandlers}}
instead of { ...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
}
/>;
}
}
来源:https://stackoverflow.com/questions/60134855/the-app-is-crashing-when-i-navigate-while-going-back-using-pop