kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-24 04:25:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: don't recompute if routes didn't change

Browse Source
This commit is contained in:
satyajit.happy
2019-10-05 22:57:24 +02:00
parent ca432e0354
commit 4a11b8b127
2 changed files with 90 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/stack/src/views/Stack/Stack.tsx
View File

@@ -36,8 +36,8 @@ type Props = {
navigation: NavigationStackProp;
descriptors: SceneDescriptorMap;
routes: NavigationRoute[];
openingRoutes: string[];
closingRoutes: string[];
openingRoutesKeys: string[];
closingRoutesKeys: string[];
onGoBack: (props: { route: NavigationRoute }) => void;
onOpenRoute: (props: { route: NavigationRoute }) => void;
onCloseRoute: (props: { route: NavigationRoute }) => void;
@@ -141,7 +141,7 @@ export default class Stack extends React.Component<Props, State> {
acc[curr.key] =
state.progress[curr.key] ||
new Animated.Value(
props.openingRoutes.includes(curr.key) &&
props.openingRoutesKeys.includes(curr.key) &&
descriptor &&
descriptor.options.animationEnabled !== false
? 0
@@ -289,7 +289,7 @@ export default class Stack extends React.Component<Props, State> {
descriptors,
navigation,
routes,
closingRoutes,
closingRoutesKeys,
onOpenRoute,
onCloseRoute,
onGoBack,
@@ -374,7 +374,7 @@ export default class Stack extends React.Component<Props, State> {
index={index}
active={index === self.length - 1}
focused={focused}
closing={closingRoutes.includes(route.key)}
closing={closingRoutesKeys.includes(route.key)}
layout={layout}
current={current}
scene={scene}

138
packages/stack/src/views/Stack/StackView.tsx
View File

@@ -24,12 +24,14 @@ type Props = {
type State = {
// Local copy of the routes which are actually rendered
routes: NavigationRoute[];
// Previous routes, to compare whether routes have changed or not
previousRoutes: NavigationRoute[];
// List of routes being opened, we need to animate pushing of these new routes
opening: string[];
openingRouteKeys: string[];
// List of routes being closed, we need to animate popping of these routes
closing: string[];
closingRouteKeys: string[];
// List of routes being replaced, we need to keep a copy until the new route animates in
replacing: string[];
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: SceneDescriptorMap;
@@ -45,6 +47,14 @@ class StackView extends React.Component<Props, State> {
const { navigation } = props;
// If there was no change in routes, we don't need to compute anything
if (
navigation.state.routes === state.previousRoutes &&
state.routes.length
) {
return null;
}
let routes =
navigation.state.index < navigation.state.routes.length - 1
? // Remove any extra routes from the state
@@ -58,29 +68,23 @@ class StackView extends React.Component<Props, State> {
);
}
if (!routes.length) {
throw new Error(`There should always be at least one route.`);
}
// If there was no change in routes, we don't need to compute anything
if (routes === state.routes || !state.routes.length) {
return {
routes,
descriptors: props.descriptors,
};
}
// Now we need to determine which routes were added and removed
let { opening, closing, replacing } = state;
let {
openingRouteKeys,
closingRouteKeys,
replacingRouteKeys,
previousRoutes,
} = state;
const previousRoutes = state.routes.filter(
route => !closing.includes(route.key) && !replacing.includes(route.key)
);
const previousFocusedRoute = previousRoutes[previousRoutes.length - 1];
const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
| NavigationRoute
| undefined;
const nextFocusedRoute = routes[routes.length - 1];
if (previousFocusedRoute.key !== nextFocusedRoute.key) {
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
@@ -99,22 +103,33 @@ class StackView extends React.Component<Props, State> {
if (
isAnimationEnabled(nextFocusedRoute) &&
!opening.includes(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
opening = [...opening, nextFocusedRoute.key];
openingRouteKeys = [...openingRouteKeys, nextFocusedRoute.key];
closing = closing.filter(key => key !== nextFocusedRoute.key);
replacing = replacing.filter(key => key !== 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
replacing = [...replacing, previousFocusedRoute.key];
replacingRouteKeys = [
...replacingRouteKeys,
previousFocusedRoute.key,
];
opening = opening.filter(key => key !== previousFocusedRoute.key);
closing = closing.filter(key => key !== 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)
@@ -128,14 +143,18 @@ class StackView extends React.Component<Props, State> {
if (
isAnimationEnabled(previousFocusedRoute) &&
!closing.includes(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
closing = [...closing, previousFocusedRoute.key];
closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
opening = opening.filter(key => key !== previousFocusedRoute.key);
replacing = replacing.filter(key => key !== 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];
@@ -145,18 +164,23 @@ class StackView extends React.Component<Props, State> {
// i.e. the currently focused route already existed and the previously focused route still exists
// We don't know how to animate this
}
} else {
} else if (replacingRouteKeys.length || closingRouteKeys.length) {
// Keep the routes we are closing or replacing
routes = routes.slice();
routes.splice(
routes.length - 1,
0,
...state.routes.filter(
({ key }) => replacing.includes(key) || closing.includes(key)
({ key }) =>
replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
)
);
}
if (!routes.length) {
throw new Error(`There should always be at least one route.`);
}
const descriptors = routes.reduce(
(acc, route) => {
acc[route.key] =
@@ -169,18 +193,20 @@ class StackView extends React.Component<Props, State> {
return {
routes,
opening,
closing,
replacing,
previousRoutes: navigation.state.routes,
openingRouteKeys,
closingRouteKeys,
replacingRouteKeys,
descriptors,
};
}
state: State = {
routes: [],
opening: [],
closing: [],
replacing: [],
previousRoutes: [],
openingRouteKeys: [],
closingRouteKeys: [],
replacingRouteKeys: [],
descriptors: {},
};
@@ -205,11 +231,12 @@ class StackView extends React.Component<Props, State> {
};
private getPreviousRoute = ({ route }: { route: NavigationRoute }) => {
const { closing, replacing } = this.state;
const { closingRouteKeys, replacingRouteKeys } = this.state;
const routes = this.state.routes.filter(
r =>
r.key === route.key ||
(!closing.includes(r.key) && !replacing.includes(r.key))
(!closingRouteKeys.includes(r.key) &&
!replacingRouteKeys.includes(r.key))
);
const index = routes.findIndex(r => r.key === route.key);
@@ -261,12 +288,12 @@ class StackView extends React.Component<Props, State> {
private handleOpenRoute = ({ route }: { route: NavigationRoute }) => {
this.handleTransitionComplete({ route });
this.setState(state => ({
routes: state.replacing.length
? state.routes.filter(r => !state.replacing.includes(r.key))
routes: state.replacingRouteKeys.length
? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
: state.routes,
opening: state.opening.filter(key => key !== route.key),
replacing: [],
closing: state.closing.filter(key => key !== route.key),
openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
replacingRouteKeys: [],
closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
}));
};
@@ -284,8 +311,8 @@ class StackView extends React.Component<Props, State> {
// @ts-ignore
this.setState(state => ({
routes: state.routes.filter(r => r.key !== route.key),
opening: state.opening.filter(key => key !== route.key),
closing: state.closing.filter(key => key !== route.key),
openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
}));
};
@@ -299,7 +326,12 @@ class StackView extends React.Component<Props, State> {
} = this.props;
const { mode = 'card', ...config } = navigationConfig;
const { routes, descriptors, opening, closing } = this.state;
const {
routes,
descriptors,
openingRouteKeys,
closingRouteKeys,
} = this.state;
const headerMode =
mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
@@ -310,8 +342,8 @@ class StackView extends React.Component<Props, State> {
getPreviousRoute={this.getPreviousRoute}
getGesturesEnabled={this.getGesturesEnabled}
routes={routes}
openingRoutes={opening}
closingRoutes={closing}
openingRoutesKeys={openingRouteKeys}
closingRoutesKeys={closingRouteKeys}
onGoBack={this.handleGoBack}
onOpenRoute={this.handleOpenRoute}
onCloseRoute={this.handleCloseRoute}