mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-30 22:50:22 +08:00
fix: dispatch completeTransition on mount so focus event is emitted
This commit is contained in:
Satyajit Sahoo
@@ -1,6 +1,6 @@
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/index.tsx 2020-02-24 11:58:26.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/index.tsx 2020-03-04 00:03:45.000000000 +0100
|
||||
@@ -3,11 +3,6 @@
|
||||
import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
|
||||
import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
|
||||
@@ -28,9 +28,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
|
||||
StackHeaderTitleProps,
|
||||
StackCardInterpolatedStyle,
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
|
||||
@@ -1,79 +0,0 @@
|
||||
@@ -1,81 +0,0 @@
|
||||
-import * as React from 'react';
|
||||
-import {
|
||||
- useNavigationBuilder,
|
||||
@@ -107,12 +107,14 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
|
||||
-}
|
||||
-
|
||||
-export default createNavigatorFactory<
|
||||
- StackNavigationState,
|
||||
- StackNavigationOptions,
|
||||
- StackNavigationEventMap,
|
||||
- typeof StackNavigator
|
||||
->(StackNavigator);
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/types.tsx 2020-02-24 12:05:09.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/types.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -7,13 +7,28 @@
|
||||
} from 'react-native';
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
@@ -256,8 +258,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
|
||||
|
||||
export type StackNavigationConfig = {
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx src/vendor/views/BorderlessButton.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/BorderlessButton.tsx 2020-02-24 12:50:48.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/BorderlessButton.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -39,6 +39,7 @@
|
||||
const { children, style, enabled, ...rest } = this.props;
|
||||
|
||||
@@ -267,8 +269,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/BorderlessButton
|
||||
{...rest}
|
||||
onActiveStateChange={this.handleActiveStateChange}
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/Header.tsx 2020-02-24 12:48:47.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/Header.tsx 2020-03-04 00:04:05.000000000 +0100
|
||||
@@ -1,12 +1,14 @@
|
||||
import * as React from 'react';
|
||||
-import { StackActions } from '@react-navigation/native';
|
||||
@@ -306,7 +308,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
||||
|
||||
const goBack = React.useCallback(
|
||||
debounce(() => {
|
||||
- if (navigation.canGoBack()) {
|
||||
- if (navigation.isFocused() && navigation.canGoBack()) {
|
||||
- navigation.dispatch({
|
||||
- ...StackActions.pop(),
|
||||
- source: scene.route.key,
|
||||
@@ -348,8 +350,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
||||
+
|
||||
+export default Header;
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-02-24 11:58:32.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -8,9 +8,9 @@
|
||||
StyleSheet,
|
||||
LayoutChangeEvent,
|
||||
@@ -362,8 +364,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
|
||||
|
||||
type Props = StackHeaderLeftButtonProps;
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-02-24 11:58:32.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
|
||||
@@ -373,8 +375,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
|
||||
type Props = ViewProps & {
|
||||
children?: React.ReactNode;
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-02-24 12:08:14.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -1,11 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
@@ -426,8 +428,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
|
||||
);
|
||||
})}
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-02-24 11:58:32.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -8,7 +8,7 @@
|
||||
ViewStyle,
|
||||
} from 'react-native';
|
||||
@@ -447,8 +449,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
|
||||
};
|
||||
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-02-24 12:47:49.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as React from 'react';
|
||||
-import { Animated, StyleSheet, Platform, TextProps } from 'react-native';
|
||||
@@ -462,8 +464,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit
|
||||
children?: string;
|
||||
};
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Stack/Card.tsx 2020-02-24 11:58:32.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Stack/Card.tsx 2020-03-04 00:03:48.000000000 +0100
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
private interactionHandle: number | undefined;
|
||||
@@ -483,8 +485,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
|
||||
<StackGestureRefContext.Provider value={this.gestureRef}>
|
||||
<CardAnimationContext.Provider value={animationContext}>
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardContainer.tsx 2020-02-24 11:58:32.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardContainer.tsx 2020-03-04 13:24:38.000000000 +0100
|
||||
@@ -1,10 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
@@ -504,7 +506,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
|
||||
|
||||
type Props = TransitionPreset & {
|
||||
index: number;
|
||||
@@ -180,7 +186,7 @@
|
||||
@@ -35,6 +41,7 @@
|
||||
closing: boolean
|
||||
) => void;
|
||||
onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
|
||||
+ onTransitionComplete: (props: { route: Route<string> }) => void;
|
||||
onPageChangeStart?: () => void;
|
||||
onPageChangeConfirm?: () => void;
|
||||
onPageChangeCancel?: () => void;
|
||||
@@ -81,6 +88,7 @@
|
||||
layout,
|
||||
onCloseRoute,
|
||||
onOpenRoute,
|
||||
+ onTransitionComplete,
|
||||
onPageChangeCancel,
|
||||
onPageChangeConfirm,
|
||||
onPageChangeStart,
|
||||
@@ -150,6 +158,9 @@
|
||||
};
|
||||
}, [pointerEvents, scene.progress.next]);
|
||||
|
||||
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
+ React.useEffect(() => onTransitionComplete({ route: scene.route }), []);
|
||||
+
|
||||
return (
|
||||
<Card
|
||||
index={index}
|
||||
@@ -180,7 +191,7 @@
|
||||
? { marginTop: headerHeight }
|
||||
: null
|
||||
}
|
||||
@@ -514,8 +542,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
|
||||
>
|
||||
<View style={styles.container}>
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardStack.tsx 2020-02-24 12:09:38.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardStack.tsx 2020-03-04 13:31:28.000000000 +0100
|
||||
@@ -9,9 +9,8 @@
|
||||
ViewProps,
|
||||
} from 'react-native';
|
||||
@@ -535,18 +563,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
|
||||
Layout,
|
||||
StackHeaderMode,
|
||||
StackCardMode,
|
||||
@@ -103,7 +103,7 @@
|
||||
<View
|
||||
collapsable={!enabled}
|
||||
removeClippedSubviews={Platform.OS !== 'ios' && enabled}
|
||||
- style={[style, { overflow: 'hidden' }]}
|
||||
+ style={[style, { overflow: 'hidden' }] as any}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
@@ -54,6 +54,7 @@
|
||||
renderHeader: (props: HeaderContainerProps) => React.ReactNode;
|
||||
renderScene: (props: { route: Route<string> }) => React.ReactNode;
|
||||
headerMode: StackHeaderMode;
|
||||
+ onTransitionComplete: (props: { route: Route<string> }) => void;
|
||||
onTransitionStart: (
|
||||
props: { route: Route<string> },
|
||||
closing: boolean
|
||||
@@ -371,6 +372,7 @@
|
||||
renderHeader,
|
||||
renderScene,
|
||||
headerMode,
|
||||
+ onTransitionComplete,
|
||||
onTransitionStart,
|
||||
onTransitionEnd,
|
||||
onPageChangeStart,
|
||||
@@ -546,6 +548,7 @@
|
||||
renderScene={renderScene}
|
||||
onOpenRoute={onOpenRoute}
|
||||
onCloseRoute={onCloseRoute}
|
||||
+ onTransitionComplete={onTransitionComplete}
|
||||
onTransitionStart={onTransitionStart}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
|
||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-02-24 11:53:26.000000000 +0100
|
||||
+++ src/vendor/views/Stack/StackView.tsx 2020-02-24 12:09:08.000000000 +0100
|
||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-03-03 23:57:02.000000000 +0100
|
||||
+++ src/vendor/views/Stack/StackView.tsx 2020-03-04 13:24:28.000000000 +0100
|
||||
@@ -4,9 +4,9 @@
|
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||
import {
|
||||
@@ -576,7 +619,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
||||
};
|
||||
|
||||
type State = {
|
||||
@@ -290,14 +292,31 @@
|
||||
@@ -290,14 +292,37 @@
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -598,10 +641,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
||||
};
|
||||
|
||||
+ private handleTransitionComplete = ({ route }: { route: Route<string> }) => {
|
||||
+ // TODO: remove when the new event system lands
|
||||
+ this.props.navigation.dispatch(
|
||||
+ StackActions.completeTransition({ toChildKey: route.key })
|
||||
+ );
|
||||
+ const { state, navigation } = this.props;
|
||||
+
|
||||
+ if (state.isTransitioning) {
|
||||
+ navigation.dispatch(
|
||||
+ StackActions.completeTransition({
|
||||
+ key: navigation.state.key,
|
||||
+ toChildKey: route.key,
|
||||
+ })
|
||||
+ );
|
||||
+ }
|
||||
+ };
|
||||
+
|
||||
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
||||
@@ -609,7 +658,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
||||
this.setState(state => ({
|
||||
routes: state.replacingRouteKeys.length
|
||||
? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
|
||||
@@ -315,12 +334,17 @@
|
||||
@@ -315,12 +340,17 @@
|
||||
// If a route exists in state, trigger a pop
|
||||
// This will happen in when the route was closed from the card component
|
||||
// e.g. When the close animation triggered from a gesture ends
|
||||
@@ -632,7 +681,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
||||
// We need to clean up any state tracking the route and pop it immediately
|
||||
this.setState(state => ({
|
||||
routes: state.routes.filter(r => r.key !== route.key),
|
||||
@@ -337,22 +361,24 @@
|
||||
@@ -337,22 +367,24 @@
|
||||
private handleTransitionStart = (
|
||||
{ route }: { route: Route<string> },
|
||||
closing: boolean
|
||||
@@ -669,3 +718,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
||||
|
||||
render() {
|
||||
const {
|
||||
@@ -391,6 +423,7 @@
|
||||
closingRouteKeys={closingRouteKeys}
|
||||
onOpenRoute={this.handleOpenRoute}
|
||||
onCloseRoute={this.handleCloseRoute}
|
||||
+ onTransitionComplete={this.handleTransitionComplete}
|
||||
onTransitionStart={this.handleTransitionStart}
|
||||
onTransitionEnd={this.handleTransitionEnd}
|
||||
renderHeader={this.renderHeader}
|
||||
|
||||
Reference in New Issue
Block a user