mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-31 09:18:29 +08:00
fix: fix incorrect reference to react-navigation. fixes #334
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
|
||||
--- node_modules/@react-navigation/stack/src/index.tsx 2020-01-03 21:46:12.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/index.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/index.tsx 1970-01-01 01:00:00.000000000 +0100
|
||||
@@ -1,57 +0,0 @@
|
||||
-import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators';
|
||||
@@ -60,7 +60,7 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.ts
|
||||
- StackHeaderStyleInterpolator,
|
||||
-} from './types';
|
||||
diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
|
||||
--- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-03 21:46:12.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
|
||||
@@ -1,77 +0,0 @@
|
||||
-import * as React from 'react';
|
||||
@@ -141,8 +141,8 @@ diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigat
|
||||
- typeof StackNavigator
|
||||
->(StackNavigator);
|
||||
diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
|
||||
--- node_modules/@react-navigation/stack/src/types.tsx 2020-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/types.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/types.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/types.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -8,13 +8,28 @@
|
||||
} from 'react-native';
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
@@ -242,7 +242,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts
|
||||
};
|
||||
|
||||
export type Layout = { width: number; height: number };
|
||||
@@ -232,24 +234,27 @@
|
||||
@@ -238,24 +240,27 @@
|
||||
/**
|
||||
* Navigation prop for the header.
|
||||
*/
|
||||
@@ -277,7 +277,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts
|
||||
export type StackNavigationOptions = StackHeaderOptions &
|
||||
Partial<TransitionPreset> & {
|
||||
/**
|
||||
@@ -322,6 +327,8 @@
|
||||
@@ -328,6 +333,8 @@
|
||||
bottom?: number;
|
||||
left?: number;
|
||||
};
|
||||
@@ -287,8 +287,8 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts
|
||||
|
||||
export type StackNavigationConfig = {
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/Header.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/Header.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
-import { StackActions } from '@react-navigation/routers';
|
||||
@@ -329,8 +329,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/v
|
||||
}
|
||||
styleInterpolator={styleInterpolator}
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -8,9 +8,9 @@
|
||||
StyleSheet,
|
||||
LayoutChangeEvent,
|
||||
@@ -343,8 +343,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton
|
||||
|
||||
type Props = StackHeaderLeftButtonProps;
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
|
||||
@@ -354,8 +354,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackground
|
||||
export default function HeaderBackground({ style, ...rest }: ViewProps) {
|
||||
const { colors } = useTheme();
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,16 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
@@ -388,8 +388,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.
|
||||
};
|
||||
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -8,7 +8,7 @@
|
||||
ViewStyle,
|
||||
} from 'react-native';
|
||||
@@ -409,8 +409,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.ts
|
||||
};
|
||||
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { Animated, StyleSheet, Platform, TextProps } from 'react-native';
|
||||
@@ -420,8 +420,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx
|
||||
type Props = TextProps & {
|
||||
tintColor?: string;
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Stack/Card.tsx 2020-01-03 21:48:42.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Stack/Card.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -453,7 +453,7 @@
|
||||
pointerEvents="none"
|
||||
/>
|
||||
@@ -432,8 +432,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vend
|
||||
{children}
|
||||
</StackCardAnimationContext.Provider>
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardContainer.tsx 2020-01-03 21:49:43.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardContainer.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,10 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
@@ -464,8 +464,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx
|
||||
>
|
||||
<View style={styles.container}>
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardStack.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Stack/CardStack.tsx 2020-01-05 12:59:50.000000000 +0100
|
||||
@@ -11,8 +11,7 @@
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
@@ -485,8 +485,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src
|
||||
StackHeaderMode,
|
||||
StackCardMode,
|
||||
diff -ruN 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-01-03 21:46:12.000000000 +0100
|
||||
+++ src/vendor/views/Stack/StackView.tsx 2020-01-03 21:46:29.000000000 +0100
|
||||
--- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-01-05 02:33:14.000000000 +0100
|
||||
+++ src/vendor/views/Stack/StackView.tsx 2020-01-05 12:57:08.000000000 +0100
|
||||
@@ -1,8 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { Platform } from 'react-native';
|
||||
@@ -614,390 +614,3 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src
|
||||
|
||||
render() {
|
||||
const {
|
||||
diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx.orig src/vendor/views/Stack/StackView.tsx.orig
|
||||
--- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx.orig 1970-01-01 01:00:00.000000000 +0100
|
||||
+++ src/vendor/views/Stack/StackView.tsx.orig 2020-01-03 21:46:29.000000000 +0100
|
||||
@@ -0,0 +1,383 @@
|
||||
+import * as React from 'react';
|
||||
+import { Platform } from 'react-native';
|
||||
+import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
|
||||
+import { Route } from '@react-navigation/native';
|
||||
+import { StackActions, StackNavigationState } from '@react-navigation/routers';
|
||||
+
|
||||
+import CardStack from './CardStack';
|
||||
+import KeyboardManager from '../KeyboardManager';
|
||||
+import HeaderContainer, {
|
||||
+ Props as HeaderContainerProps,
|
||||
+} from '../Header/HeaderContainer';
|
||||
+import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
|
||||
+import {
|
||||
+ StackNavigationHelpers,
|
||||
+ StackNavigationConfig,
|
||||
+ StackDescriptorMap,
|
||||
+} from '../../types';
|
||||
+
|
||||
+type Props = StackNavigationConfig & {
|
||||
+ state: StackNavigationState;
|
||||
+ navigation: StackNavigationHelpers;
|
||||
+ descriptors: StackDescriptorMap;
|
||||
+};
|
||||
+
|
||||
+type State = {
|
||||
+ // Local copy of the routes which are actually rendered
|
||||
+ routes: Route<string>[];
|
||||
+ // Previous routes, to compare whether routes have changed or not
|
||||
+ previousRoutes: Route<string>[];
|
||||
+ // Previous descriptors, to compare whether descriptors have changed or not
|
||||
+ previousDescriptors: StackDescriptorMap;
|
||||
+ // List of routes being opened, we need to animate pushing of these new routes
|
||||
+ openingRouteKeys: string[];
|
||||
+ // List of routes being closed, we need to animate popping of these routes
|
||||
+ closingRouteKeys: string[];
|
||||
+ // List of routes being replaced, we need to keep a copy until the new route animates in
|
||||
+ replacingRouteKeys: string[];
|
||||
+ // Since the local routes can vary from the routes from props, we need to keep the descriptors for old routes
|
||||
+ // Otherwise we won't be able to access the options for routes that were removed
|
||||
+ descriptors: StackDescriptorMap;
|
||||
+};
|
||||
+
|
||||
+class StackView extends React.Component<Props, State> {
|
||||
+ static getDerivedStateFromProps(
|
||||
+ props: Readonly<Props>,
|
||||
+ state: Readonly<State>
|
||||
+ ) {
|
||||
+ // If there was no change in routes, we don't need to compute anything
|
||||
+ if (props.state.routes === state.previousRoutes && state.routes.length) {
|
||||
+ if (props.descriptors !== state.previousDescriptors) {
|
||||
+ const descriptors = state.routes.reduce<StackDescriptorMap>(
|
||||
+ (acc, route) => {
|
||||
+ acc[route.key] =
|
||||
+ props.descriptors[route.key] || state.descriptors[route.key];
|
||||
+
|
||||
+ return acc;
|
||||
+ },
|
||||
+ {}
|
||||
+ );
|
||||
+
|
||||
+ return {
|
||||
+ previousDescriptors: props.descriptors,
|
||||
+ descriptors,
|
||||
+ };
|
||||
+ }
|
||||
+
|
||||
+ return null;
|
||||
+ }
|
||||
+
|
||||
+ // Here we determine which routes were added or removed to animate them
|
||||
+ // We keep a copy of the route being removed in local state to be able to animate it
|
||||
+
|
||||
+ let routes =
|
||||
+ props.state.index < props.state.routes.length - 1
|
||||
+ ? // Remove any extra routes from the state
|
||||
+ // The last visible route should be the focused route, i.e. at current index
|
||||
+ props.state.routes.slice(0, props.state.index + 1)
|
||||
+ : props.state.routes;
|
||||
+
|
||||
+ // Now we need to determine which routes were added and removed
|
||||
+ let {
|
||||
+ openingRouteKeys,
|
||||
+ closingRouteKeys,
|
||||
+ replacingRouteKeys,
|
||||
+ previousRoutes,
|
||||
+ } = state;
|
||||
+
|
||||
+ const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
|
||||
+ | Route<string>
|
||||
+ | undefined;
|
||||
+ const nextFocusedRoute = routes[routes.length - 1];
|
||||
+
|
||||
+ const isAnimationEnabled = (key: string) => {
|
||||
+ const descriptor = props.descriptors[key] || state.descriptors[key];
|
||||
+
|
||||
+ return descriptor ? descriptor.options.animationEnabled !== false : true;
|
||||
+ };
|
||||
+
|
||||
+ if (
|
||||
+ previousFocusedRoute &&
|
||||
+ previousFocusedRoute.key !== nextFocusedRoute.key
|
||||
+ ) {
|
||||
+ // We only need to animate routes if the focused route changed
|
||||
+ // Animating previous routes won't be visible coz the focused route is on top of everything
|
||||
+
|
||||
+ if (!previousRoutes.find(r => r.key === nextFocusedRoute.key)) {
|
||||
+ // A new route has come to the focus, we treat this as a push
|
||||
+ // A replace can also trigger this, the animation should look like push
|
||||
+
|
||||
+ if (
|
||||
+ isAnimationEnabled(nextFocusedRoute.key) &&
|
||||
+ !openingRouteKeys.includes(nextFocusedRoute.key)
|
||||
+ ) {
|
||||
+ // In this case, we need to animate pushing the focused route
|
||||
+ // We don't care about animating any other added routes because they won't be visible
|
||||
+ openingRouteKeys = [...openingRouteKeys, nextFocusedRoute.key];
|
||||
+
|
||||
+ closingRouteKeys = closingRouteKeys.filter(
|
||||
+ key => key !== nextFocusedRoute.key
|
||||
+ );
|
||||
+ replacingRouteKeys = replacingRouteKeys.filter(
|
||||
+ key => key !== nextFocusedRoute.key
|
||||
+ );
|
||||
+
|
||||
+ if (!routes.find(r => r.key === previousFocusedRoute.key)) {
|
||||
+ // The previous focused route isn't present in state, we treat this as a replace
|
||||
+
|
||||
+ replacingRouteKeys = [
|
||||
+ ...replacingRouteKeys,
|
||||
+ previousFocusedRoute.key,
|
||||
+ ];
|
||||
+
|
||||
+ openingRouteKeys = openingRouteKeys.filter(
|
||||
+ key => key !== previousFocusedRoute.key
|
||||
+ );
|
||||
+ closingRouteKeys = closingRouteKeys.filter(
|
||||
+ key => key !== previousFocusedRoute.key
|
||||
+ );
|
||||
+
|
||||
+ // Keep the old route in state because it's visible under the new route, and removing it will feel abrupt
|
||||
+ // We need to insert it just before the focused one (the route being pushed)
|
||||
+ // After the push animation is completed, routes being replaced will be removed completely
|
||||
+ routes = routes.slice();
|
||||
+ routes.splice(routes.length - 1, 0, previousFocusedRoute);
|
||||
+ }
|
||||
+ }
|
||||
+ } else if (!routes.find(r => r.key === previousFocusedRoute.key)) {
|
||||
+ // The previously focused route was removed, we treat this as a pop
|
||||
+
|
||||
+ if (
|
||||
+ isAnimationEnabled(previousFocusedRoute.key) &&
|
||||
+ !closingRouteKeys.includes(previousFocusedRoute.key)
|
||||
+ ) {
|
||||
+ // Sometimes a route can be closed before the opening animation finishes
|
||||
+ // So we also need to remove it from the opening list
|
||||
+ closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
|
||||
+
|
||||
+ openingRouteKeys = openingRouteKeys.filter(
|
||||
+ key => key !== previousFocusedRoute.key
|
||||
+ );
|
||||
+ replacingRouteKeys = replacingRouteKeys.filter(
|
||||
+ key => key !== previousFocusedRoute.key
|
||||
+ );
|
||||
+
|
||||
+ // Keep a copy of route being removed in the state to be able to animate it
|
||||
+ routes = [...routes, previousFocusedRoute];
|
||||
+ }
|
||||
+ } else {
|
||||
+ // Looks like some routes were re-arranged and no focused routes were added/removed
|
||||
+ // i.e. the currently focused route already existed and the previously focused route still exists
|
||||
+ // We don't know how to animate this
|
||||
+ }
|
||||
+ } else if (replacingRouteKeys.length || closingRouteKeys.length) {
|
||||
+ // Keep the routes we are closing or replacing if animation is enabled for them
|
||||
+ routes = routes.slice();
|
||||
+ routes.splice(
|
||||
+ routes.length - 1,
|
||||
+ 0,
|
||||
+ ...state.routes.filter(({ key }) =>
|
||||
+ isAnimationEnabled(key)
|
||||
+ ? replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
|
||||
+ : false
|
||||
+ )
|
||||
+ );
|
||||
+ }
|
||||
+
|
||||
+ if (!routes.length) {
|
||||
+ throw new Error(`There should always be at least one route.`);
|
||||
+ }
|
||||
+
|
||||
+ const descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
|
||||
+ acc[route.key] =
|
||||
+ props.descriptors[route.key] || state.descriptors[route.key];
|
||||
+
|
||||
+ return acc;
|
||||
+ }, {});
|
||||
+
|
||||
+ return {
|
||||
+ routes,
|
||||
+ previousRoutes: props.state.routes,
|
||||
+ previousDescriptors: props.descriptors,
|
||||
+ openingRouteKeys,
|
||||
+ closingRouteKeys,
|
||||
+ replacingRouteKeys,
|
||||
+ descriptors,
|
||||
+ };
|
||||
+ }
|
||||
+
|
||||
+ state: State = {
|
||||
+ routes: [],
|
||||
+ previousRoutes: [],
|
||||
+ previousDescriptors: {},
|
||||
+ openingRouteKeys: [],
|
||||
+ closingRouteKeys: [],
|
||||
+ replacingRouteKeys: [],
|
||||
+ descriptors: {},
|
||||
+ };
|
||||
+
|
||||
+ private getGesturesEnabled = ({ route }: { route: Route<string> }) => {
|
||||
+ const descriptor = this.state.descriptors[route.key];
|
||||
+
|
||||
+ if (descriptor) {
|
||||
+ const { gestureEnabled, animationEnabled } = descriptor.options;
|
||||
+
|
||||
+ if (animationEnabled === false) {
|
||||
+ // When animation is disabled, also disable gestures
|
||||
+ // The gesture to dismiss a route will look weird when not animated
|
||||
+ return false;
|
||||
+ }
|
||||
+
|
||||
+ return gestureEnabled !== undefined
|
||||
+ ? gestureEnabled
|
||||
+ : Platform.OS !== 'android';
|
||||
+ }
|
||||
+
|
||||
+ return false;
|
||||
+ };
|
||||
+
|
||||
+ private getPreviousRoute = ({ route }: { route: Route<string> }) => {
|
||||
+ const { closingRouteKeys, replacingRouteKeys } = this.state;
|
||||
+ const routes = this.state.routes.filter(
|
||||
+ r =>
|
||||
+ r.key === route.key ||
|
||||
+ (!closingRouteKeys.includes(r.key) &&
|
||||
+ !replacingRouteKeys.includes(r.key))
|
||||
+ );
|
||||
+ const index = routes.findIndex(r => r.key === route.key);
|
||||
+
|
||||
+ return routes[index - 1];
|
||||
+ };
|
||||
+
|
||||
+ private renderScene = ({ route }: { route: Route<string> }) => {
|
||||
+ const descriptor =
|
||||
+ this.state.descriptors[route.key] || this.props.descriptors[route.key];
|
||||
+
|
||||
+ if (!descriptor) {
|
||||
+ return null;
|
||||
+ }
|
||||
+
|
||||
+ return descriptor.render();
|
||||
+ };
|
||||
+
|
||||
+ private renderHeader = (props: HeaderContainerProps) => {
|
||||
+ return <HeaderContainer {...props} />;
|
||||
+ };
|
||||
+
|
||||
+ private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
||||
+ this.setState(state => ({
|
||||
+ routes: state.replacingRouteKeys.length
|
||||
+ ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
|
||||
+ : state.routes,
|
||||
+ openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
|
||||
+ closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
|
||||
+ replacingRouteKeys: [],
|
||||
+ }));
|
||||
+ };
|
||||
+
|
||||
+ private handleCloseRoute = ({ route }: { route: Route<string> }) => {
|
||||
+ const { state, navigation } = this.props;
|
||||
+
|
||||
+ if (state.routes.find(r => r.key === route.key)) {
|
||||
+ // 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
|
||||
+ // For the cleanup, the card needs to call this function again from its componentDidUpdate
|
||||
+ navigation.dispatch({
|
||||
+ ...StackActions.pop(),
|
||||
+ source: route.key,
|
||||
+ target: state.key,
|
||||
+ });
|
||||
+ } else {
|
||||
+ // Otherwise, the animation was triggered due to a route removal
|
||||
+ // In this case, we need to clean up any state tracking the route and pop it immediately
|
||||
+
|
||||
+ // @ts-ignore
|
||||
+ this.setState(state => ({
|
||||
+ routes: state.routes.filter(r => r.key !== route.key),
|
||||
+ openingRouteKeys: state.openingRouteKeys.filter(
|
||||
+ key => key !== route.key
|
||||
+ ),
|
||||
+ closingRouteKeys: state.closingRouteKeys.filter(
|
||||
+ key => key !== route.key
|
||||
+ ),
|
||||
+ }));
|
||||
+ }
|
||||
+ };
|
||||
+
|
||||
+ private handleTransitionStart = (
|
||||
+ { route }: { route: Route<string> },
|
||||
+ closing: boolean
|
||||
+ ) =>
|
||||
+ this.props.navigation.emit({
|
||||
+ type: 'transitionStart',
|
||||
+ data: { closing },
|
||||
+ target: route.key,
|
||||
+ });
|
||||
+
|
||||
+ private handleTransitionEnd = (
|
||||
+ { route }: { route: Route<string> },
|
||||
+ closing: boolean
|
||||
+ ) =>
|
||||
+ this.props.navigation.emit({
|
||||
+ type: 'transitionEnd',
|
||||
+ data: { closing },
|
||||
+ target: route.key,
|
||||
+ });
|
||||
+
|
||||
+ render() {
|
||||
+ const {
|
||||
+ state,
|
||||
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
+ navigation,
|
||||
+ keyboardHandlingEnabled,
|
||||
+ mode = 'card',
|
||||
+ ...rest
|
||||
+ } = this.props;
|
||||
+
|
||||
+ const {
|
||||
+ routes,
|
||||
+ descriptors,
|
||||
+ openingRouteKeys,
|
||||
+ closingRouteKeys,
|
||||
+ } = this.state;
|
||||
+
|
||||
+ const headerMode =
|
||||
+ mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
|
||||
+
|
||||
+ return (
|
||||
+ <SafeAreaProviderCompat>
|
||||
+ <SafeAreaConsumer>
|
||||
+ {insets => (
|
||||
+ <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
|
||||
+ {props => (
|
||||
+ <CardStack
|
||||
+ mode={mode}
|
||||
+ insets={insets as EdgeInsets}
|
||||
+ getPreviousRoute={this.getPreviousRoute}
|
||||
+ getGesturesEnabled={this.getGesturesEnabled}
|
||||
+ routes={routes}
|
||||
+ openingRouteKeys={openingRouteKeys}
|
||||
+ closingRouteKeys={closingRouteKeys}
|
||||
+ onOpenRoute={this.handleOpenRoute}
|
||||
+ onCloseRoute={this.handleCloseRoute}
|
||||
+ onTransitionStart={this.handleTransitionStart}
|
||||
+ onTransitionEnd={this.handleTransitionEnd}
|
||||
+ renderHeader={this.renderHeader}
|
||||
+ renderScene={this.renderScene}
|
||||
+ headerMode={headerMode}
|
||||
+ state={state}
|
||||
+ descriptors={descriptors}
|
||||
+ {...rest}
|
||||
+ {...props}
|
||||
+ />
|
||||
+ )}
|
||||
+ </KeyboardManager>
|
||||
+ )}
|
||||
+ </SafeAreaConsumer>
|
||||
+ </SafeAreaProviderCompat>
|
||||
+ );
|
||||
+ }
|
||||
+}
|
||||
+
|
||||
+export default StackView;
|
||||
|
||||
Reference in New Issue
Block a user