mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-20 02:48:14 +08:00
Compare commits
11 Commits
@react-nav
...
@react-nav
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e87925c086 | ||
|
|
7b13a81ac8 | ||
|
|
d618ab382e | ||
|
|
c7a5cfd5b2 | ||
|
|
87d445b4e4 | ||
|
|
eaf88478cc | ||
|
|
f271e299ac | ||
|
|
5a0dfa1a15 | ||
|
|
2750cad272 | ||
|
|
2e715ef48e | ||
|
|
7080517c91 |
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.22...@react-navigation/bottom-tabs@5.0.0-alpha.23) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.21...@react-navigation/bottom-tabs@5.0.0-alpha.22) (2019-11-17)
|
||||
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"android",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.22",
|
||||
"version": "5.0.0-alpha.23",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -6,6 +6,7 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as BottomTabView } from './views/BottomTabView';
|
||||
export { default as BottomTabBar } from './views/BottomTabBar';
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,6 +3,28 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.25...@react-navigation/core@5.0.0-alpha.26) (2019-12-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* don't handle replace if screen to replace with isn't present ([7b13a81](https://github.com/react-navigation/navigation-ex/commit/7b13a81ac8260879c8658be5704f46db59a72c73)), closes [#193](https://github.com/react-navigation/navigation-ex/issues/193)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.24...@react-navigation/core@5.0.0-alpha.25) (2019-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* wrap reset and resetRoot inside transaction ([#189](https://github.com/react-navigation/navigation-ex/issues/189)) ([5a0dfa1](https://github.com/react-navigation/navigation-ex/commit/5a0dfa1a155715714c8483fafc5a94dbc5120754)), closes [#185](https://github.com/react-navigation/navigation-ex/issues/185)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.23...@react-navigation/core@5.0.0-alpha.24) (2019-11-20)
|
||||
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"react-native",
|
||||
"react-navigation"
|
||||
],
|
||||
"version": "5.0.0-alpha.24",
|
||||
"version": "5.0.0-alpha.26",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -22,6 +22,10 @@ const BaseRouter = {
|
||||
|
||||
const { name, key, params } = action.payload;
|
||||
|
||||
if (!state.routeNames.includes(name)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
routes: state.routes.map((route, i) =>
|
||||
|
||||
@@ -112,79 +112,6 @@ const Container = React.forwardRef(function NavigationContainer(
|
||||
const isFirstMountRef = React.useRef<boolean>(true);
|
||||
const skipTrackingRef = React.useRef<boolean>(false);
|
||||
|
||||
const reset = React.useCallback((state: NavigationState) => {
|
||||
skipTrackingRef.current = true;
|
||||
setNavigationState(state);
|
||||
}, []);
|
||||
|
||||
const { trackState, trackAction } = useDevTools({
|
||||
name: '@react-navigation',
|
||||
reset,
|
||||
state,
|
||||
});
|
||||
|
||||
const { listeners, addListener: addFocusedListener } = useFocusedListeners();
|
||||
|
||||
const { getStateForRoute, addStateGetter } = useStateGetters();
|
||||
|
||||
const dispatch = (
|
||||
action: NavigationAction | ((state: NavigationState) => NavigationAction)
|
||||
) => {
|
||||
listeners[0](navigation => navigation.dispatch(action));
|
||||
};
|
||||
|
||||
const canGoBack = () => {
|
||||
const { result, handled } = listeners[0](navigation =>
|
||||
navigation.canGoBack()
|
||||
);
|
||||
|
||||
if (handled) {
|
||||
return result;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetRoot = React.useCallback(
|
||||
(state?: PartialState<NavigationState> | NavigationState) => {
|
||||
trackAction('@@RESET_ROOT');
|
||||
setNavigationState(state);
|
||||
},
|
||||
[trackAction]
|
||||
);
|
||||
|
||||
const getRootState = React.useCallback(() => {
|
||||
return getStateForRoute('root');
|
||||
}, [getStateForRoute]);
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
|
||||
any
|
||||
>((acc, name) => {
|
||||
acc[name] = (...args: any[]) =>
|
||||
dispatch(
|
||||
CommonActions[name](
|
||||
// @ts-ignore
|
||||
...args
|
||||
)
|
||||
);
|
||||
return acc;
|
||||
}, {}),
|
||||
resetRoot,
|
||||
dispatch,
|
||||
canGoBack,
|
||||
getRootState,
|
||||
}));
|
||||
|
||||
const builderContext = React.useMemo(
|
||||
() => ({
|
||||
addFocusedListener,
|
||||
addStateGetter,
|
||||
trackAction,
|
||||
}),
|
||||
[addFocusedListener, trackAction, addStateGetter]
|
||||
);
|
||||
|
||||
const performTransaction = React.useCallback((callback: () => void) => {
|
||||
if (isTransactionActiveRef.current) {
|
||||
throw new Error(
|
||||
@@ -222,6 +149,86 @@ const Container = React.forwardRef(function NavigationContainer(
|
||||
transactionStateRef.current = navigationState;
|
||||
}, []);
|
||||
|
||||
const reset = React.useCallback(
|
||||
(state: NavigationState) => {
|
||||
performTransaction(() => {
|
||||
skipTrackingRef.current = true;
|
||||
setState(state);
|
||||
});
|
||||
},
|
||||
[performTransaction, setState]
|
||||
);
|
||||
|
||||
const { trackState, trackAction } = useDevTools({
|
||||
name: '@react-navigation',
|
||||
reset,
|
||||
state,
|
||||
});
|
||||
|
||||
const { listeners, addListener: addFocusedListener } = useFocusedListeners();
|
||||
|
||||
const { getStateForRoute, addStateGetter } = useStateGetters();
|
||||
|
||||
const dispatch = (
|
||||
action: NavigationAction | ((state: NavigationState) => NavigationAction)
|
||||
) => {
|
||||
listeners[0](navigation => navigation.dispatch(action));
|
||||
};
|
||||
|
||||
const canGoBack = () => {
|
||||
const { result, handled } = listeners[0](navigation =>
|
||||
navigation.canGoBack()
|
||||
);
|
||||
|
||||
if (handled) {
|
||||
return result;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetRoot = React.useCallback(
|
||||
(state?: PartialState<NavigationState> | NavigationState) => {
|
||||
performTransaction(() => {
|
||||
trackAction('@@RESET_ROOT');
|
||||
setState(state);
|
||||
});
|
||||
},
|
||||
[performTransaction, setState, trackAction]
|
||||
);
|
||||
|
||||
const getRootState = React.useCallback(() => {
|
||||
return getStateForRoute('root');
|
||||
}, [getStateForRoute]);
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
|
||||
any
|
||||
>((acc, name) => {
|
||||
acc[name] = (...args: any[]) =>
|
||||
dispatch(
|
||||
CommonActions[name](
|
||||
// @ts-ignore
|
||||
...args
|
||||
)
|
||||
);
|
||||
return acc;
|
||||
}, {}),
|
||||
resetRoot,
|
||||
dispatch,
|
||||
canGoBack,
|
||||
getRootState,
|
||||
}));
|
||||
|
||||
const builderContext = React.useMemo(
|
||||
() => ({
|
||||
addFocusedListener,
|
||||
addStateGetter,
|
||||
trackAction,
|
||||
}),
|
||||
[addFocusedListener, trackAction, addStateGetter]
|
||||
);
|
||||
|
||||
const context = React.useMemo(
|
||||
() => ({
|
||||
state,
|
||||
|
||||
@@ -65,6 +65,15 @@ it("doesn't handle REPLACE if source key isn't present", () => {
|
||||
expect(result).toBe(null);
|
||||
});
|
||||
|
||||
it("doesn't handle REPLACE if screen to replace with isn't present", () => {
|
||||
const result = BaseRouter.getStateForAction(
|
||||
STATE,
|
||||
CommonActions.replace('nonexistent', { answer: 42 })
|
||||
);
|
||||
|
||||
expect(result).toBe(null);
|
||||
});
|
||||
|
||||
it('sets params for the focused screen with SET_PARAMS', () => {
|
||||
const result = BaseRouter.getStateForAction(
|
||||
STATE,
|
||||
|
||||
@@ -3,6 +3,28 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.24...@react-navigation/drawer@5.0.0-alpha.25) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.23...@react-navigation/drawer@5.0.0-alpha.24) (2019-11-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* enable gestures by default in drawer. closes [#188](https://github.com/react-navigation/navigation-ex/issues/188) ([7080517](https://github.com/react-navigation/navigation-ex/commit/7080517c914b4821e07a6320de94660e50d02950))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.22...@react-navigation/drawer@5.0.0-alpha.23) (2019-11-17)
|
||||
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"drawer"
|
||||
],
|
||||
"version": "5.0.0-alpha.23",
|
||||
"version": "5.0.0-alpha.25",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -6,10 +6,10 @@ export { default as createDrawerNavigator } from './navigators/createDrawerNavig
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as DrawerView } from './views/DrawerView';
|
||||
export { default as DrawerItem } from './views/DrawerItem';
|
||||
export { default as DrawerItemList } from './views/DrawerItemList';
|
||||
export { default as DrawerContent } from './views/DrawerContent';
|
||||
export { default as DrawerView } from './views/DrawerView';
|
||||
|
||||
/**
|
||||
* Utilities
|
||||
|
||||
@@ -40,10 +40,10 @@ function DrawerNavigator({
|
||||
|
||||
return (
|
||||
<DrawerView
|
||||
{...rest}
|
||||
state={state}
|
||||
descriptors={descriptors}
|
||||
navigation={navigation}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -97,9 +97,9 @@ type Props = {
|
||||
|
||||
export default class DrawerView extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
locked: false,
|
||||
drawerPostion: I18nManager.isRTL ? 'left' : 'right',
|
||||
drawerType: 'front',
|
||||
gestureEnabled: true,
|
||||
swipeEdgeWidth: 32,
|
||||
swipeVelocityThreshold: 500,
|
||||
keyboardDismissMode: 'on-drag',
|
||||
@@ -447,10 +447,7 @@ export default class DrawerView extends React.PureComponent<Props> {
|
||||
{
|
||||
nativeEvent: {
|
||||
oldState: (s: Animated.Value<number>) =>
|
||||
cond(
|
||||
and(eq(s, State.ACTIVE), this.isGestureEnabled),
|
||||
set(this.manuallyTriggerSpring, TRUE)
|
||||
),
|
||||
cond(eq(s, State.ACTIVE), set(this.manuallyTriggerSpring, TRUE)),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -217,7 +217,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
|
||||
<DrawerGestureContext.Provider value={this.drawerGestureRef}>
|
||||
<Drawer
|
||||
open={state.isDrawerOpen}
|
||||
gestureEnabled={gestureEnabled === true}
|
||||
gestureEnabled={gestureEnabled !== false}
|
||||
onOpen={this.handleDrawerOpen}
|
||||
onClose={this.handleDrawerClose}
|
||||
onGestureRef={this.setDrawerGestureRef}
|
||||
|
||||
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.21...@react-navigation/material-bottom-tabs@5.0.0-alpha.22) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.20...@react-navigation/material-bottom-tabs@5.0.0-alpha.21) (2019-11-17)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-bottom-tabs
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.21",
|
||||
"version": "5.0.0-alpha.22",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
*/
|
||||
export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
|
||||
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
|
||||
|
||||
/**
|
||||
* Types
|
||||
*/
|
||||
|
||||
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.19...@react-navigation/material-top-tabs@5.0.0-alpha.20) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.18...@react-navigation/material-top-tabs@5.0.0-alpha.19) (2019-11-20)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-top-tabs
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.19",
|
||||
"version": "5.0.0-alpha.20",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -6,6 +6,7 @@ export { default as createMaterialTopTabNavigator } from './navigators/createMat
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as MaterialTopTabView } from './views/MaterialTopTabView';
|
||||
export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.13...@react-navigation/native-stack@5.0.0-alpha.14) (2019-11-20)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/native-stack
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"react-native",
|
||||
"react-navigation"
|
||||
],
|
||||
"version": "5.0.0-alpha.14",
|
||||
"version": "5.0.0-alpha.15",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
*/
|
||||
export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
|
||||
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as NativeStackView } from './views/NativeStackView';
|
||||
|
||||
/**
|
||||
* Types
|
||||
*/
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
screensEnabled,
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
} from 'react-native-screens';
|
||||
import StackView from '../views/StackView';
|
||||
import NativeStackView from '../views/NativeStackView';
|
||||
import {
|
||||
NativeStackNavigatorProps,
|
||||
NativeStackNavigationOptions,
|
||||
@@ -64,11 +64,11 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
|
||||
);
|
||||
|
||||
return (
|
||||
<StackView
|
||||
<NativeStackView
|
||||
{...rest}
|
||||
state={state}
|
||||
navigation={navigation}
|
||||
descriptors={descriptors}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -29,7 +29,11 @@ type Props = {
|
||||
descriptors: NativeStackDescriptorMap;
|
||||
};
|
||||
|
||||
export default function StackView({ state, navigation, descriptors }: Props) {
|
||||
export default function NativeStackView({
|
||||
state,
|
||||
navigation,
|
||||
descriptors,
|
||||
}: Props) {
|
||||
return (
|
||||
<ScreenStack style={styles.scenes}>
|
||||
{state.routes.map(route => {
|
||||
@@ -3,6 +3,40 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.39...@react-navigation/stack@5.0.0-alpha.40) (2019-12-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.38...@react-navigation/stack@5.0.0-alpha.39) (2019-12-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* correctly update layout on onLayout events ([eaf8847](https://github.com/react-navigation/navigation-ex/commit/eaf88478cc392fb9ff0b69c7539595920db8e010))
|
||||
* disable pointerEvents on header when not focused ([87d445b](https://github.com/react-navigation/navigation-ex/commit/87d445b4e4468cf6c17787f47dd875ab8a95598a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.37...@react-navigation/stack@5.0.0-alpha.38) (2019-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* respect custom safearea insets when calculating header height ([2750cad](https://github.com/react-navigation/navigation-ex/commit/2750cad272def2e701ba2823a6e5693cee61eff0)), closes [#190](https://github.com/react-navigation/navigation-ex/issues/190)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.36...@react-navigation/stack@5.0.0-alpha.37) (2019-11-17)
|
||||
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"android",
|
||||
"stack"
|
||||
],
|
||||
"version": "5.0.0-alpha.37",
|
||||
"version": "5.0.0-alpha.40",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -16,6 +16,7 @@ export const Assets = [
|
||||
/**
|
||||
* Views
|
||||
*/
|
||||
export { default as StackView } from './views/Stack/StackView';
|
||||
export { default as Header } from './views/Header/Header';
|
||||
export { default as HeaderTitle } from './views/Header/HeaderTitle';
|
||||
export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
StackNavigationState,
|
||||
StackActions,
|
||||
} from '@react-navigation/routers';
|
||||
import KeyboardManager from '../views/KeyboardManager';
|
||||
import StackView from '../views/Stack/StackView';
|
||||
import {
|
||||
StackNavigationConfig,
|
||||
@@ -24,7 +23,6 @@ type Props = DefaultNavigatorOptions<StackNavigationOptions> &
|
||||
StackNavigationConfig;
|
||||
|
||||
function StackNavigator({
|
||||
keyboardHandlingEnabled,
|
||||
initialRouteName,
|
||||
children,
|
||||
screenOptions,
|
||||
@@ -64,17 +62,12 @@ function StackNavigator({
|
||||
);
|
||||
|
||||
return (
|
||||
<KeyboardManager enabled={keyboardHandlingEnabled !== false}>
|
||||
{props => (
|
||||
<StackView
|
||||
state={state}
|
||||
descriptors={descriptors}
|
||||
navigation={navigation}
|
||||
{...rest}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</KeyboardManager>
|
||||
<StackView
|
||||
{...rest}
|
||||
state={state}
|
||||
descriptors={descriptors}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -114,7 +114,7 @@ export default function HeaderContainer({
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
pointerEvents="box-none"
|
||||
pointerEvents={isFocused ? 'box-none' : 'none'}
|
||||
accessibilityElementsHidden={!isFocused}
|
||||
importantForAccessibility={
|
||||
isFocused ? 'auto' : 'no-hide-descendants'
|
||||
|
||||
@@ -79,17 +79,20 @@ export default class HeaderSegment extends React.Component<Props, State> {
|
||||
|
||||
private handleTitleLayout = (e: LayoutChangeEvent) => {
|
||||
const { height, width } = e.nativeEvent.layout;
|
||||
const { titleLayout } = this.state;
|
||||
|
||||
if (
|
||||
titleLayout &&
|
||||
height === titleLayout.height &&
|
||||
width === titleLayout.width
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.setState(({ titleLayout }) => {
|
||||
if (
|
||||
titleLayout &&
|
||||
height === titleLayout.height &&
|
||||
width === titleLayout.width
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
this.setState({ titleLayout: { height, width } });
|
||||
return {
|
||||
titleLayout: { height, width },
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
private handleLeftLabelLayout = (e: LayoutChangeEvent) => {
|
||||
|
||||
@@ -60,7 +60,7 @@ type Props = TransitionPreset & {
|
||||
floatingHeaderHeight: number;
|
||||
};
|
||||
|
||||
export default class StackItem extends React.PureComponent<Props> {
|
||||
export default class CardContainer extends React.PureComponent<Props> {
|
||||
private handleOpen = () => {
|
||||
const { scene, onTransitionEnd, onOpenRoute } = this.props;
|
||||
|
||||
@@ -16,7 +16,7 @@ import { StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||
import StackItem from './StackItem';
|
||||
import CardContainer from './CardContainer';
|
||||
import {
|
||||
DefaultTransition,
|
||||
ModalTransition,
|
||||
@@ -121,21 +121,25 @@ const getFloatingHeaderHeights = (
|
||||
layout: Layout,
|
||||
previous: Record<string, number>
|
||||
) => {
|
||||
const defaultHeaderHeight = getDefaultHeaderHeight(layout, insets);
|
||||
|
||||
return routes.reduce<Record<string, number>>((acc, curr) => {
|
||||
const { options = {} } = descriptors[curr.key] || {};
|
||||
const { height = previous[curr.key] } = StyleSheet.flatten(
|
||||
options.headerStyle || {}
|
||||
);
|
||||
|
||||
acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
|
||||
acc[curr.key] =
|
||||
typeof height === 'number'
|
||||
? height
|
||||
: getDefaultHeaderHeight(layout, {
|
||||
...insets,
|
||||
...options.safeAreaInsets,
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
export default class Stack extends React.Component<Props, State> {
|
||||
export default class CardStack extends React.Component<Props, State> {
|
||||
static getDerivedStateFromProps(props: Props, state: State) {
|
||||
if (
|
||||
props.routes === state.routes &&
|
||||
@@ -229,25 +233,24 @@ export default class Stack extends React.Component<Props, State> {
|
||||
private handleLayout = (e: LayoutChangeEvent) => {
|
||||
const { height, width } = e.nativeEvent.layout;
|
||||
|
||||
if (
|
||||
height === this.state.layout.height &&
|
||||
width === this.state.layout.width
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const layout = { width, height };
|
||||
|
||||
this.setState(state => ({
|
||||
layout,
|
||||
floatingHeaderHeights: getFloatingHeaderHeights(
|
||||
this.props.routes,
|
||||
this.props.insets,
|
||||
state.descriptors,
|
||||
this.setState((state, props) => {
|
||||
if (height === state.layout.height && width === state.layout.width) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
layout,
|
||||
{}
|
||||
),
|
||||
}));
|
||||
floatingHeaderHeights: getFloatingHeaderHeights(
|
||||
props.routes,
|
||||
props.insets,
|
||||
state.descriptors,
|
||||
layout,
|
||||
{}
|
||||
),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
private handleFloatingHeaderLayout = ({
|
||||
@@ -257,18 +260,20 @@ export default class Stack extends React.Component<Props, State> {
|
||||
route: Route<string>;
|
||||
height: number;
|
||||
}) => {
|
||||
const previousHeight = this.state.floatingHeaderHeights[route.key];
|
||||
this.setState(({ floatingHeaderHeights }) => {
|
||||
const previousHeight = this.state.floatingHeaderHeights[route.key];
|
||||
|
||||
if (previousHeight && previousHeight === height) {
|
||||
return;
|
||||
}
|
||||
if (previousHeight && previousHeight === height) {
|
||||
return null;
|
||||
}
|
||||
|
||||
this.setState(state => ({
|
||||
floatingHeaderHeights: {
|
||||
...state.floatingHeaderHeights,
|
||||
[route.key]: height,
|
||||
},
|
||||
}));
|
||||
return {
|
||||
floatingHeaderHeights: {
|
||||
...floatingHeaderHeights,
|
||||
[route.key]: height,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
private handleTransitionStart = (
|
||||
@@ -426,7 +431,7 @@ export default class Stack extends React.Component<Props, State> {
|
||||
active={isScreenActive}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<StackItem
|
||||
<CardContainer
|
||||
index={index}
|
||||
active={index === self.length - 1}
|
||||
focused={focused}
|
||||
@@ -4,7 +4,8 @@ import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { StackActions, StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
import Stack from './Stack';
|
||||
import CardStack from './CardStack';
|
||||
import KeyboardManager from '../KeyboardManager';
|
||||
import HeaderContainer, {
|
||||
Props as HeaderContainerProps,
|
||||
} from '../Header/HeaderContainer';
|
||||
@@ -19,9 +20,6 @@ type Props = StackNavigationConfig & {
|
||||
state: StackNavigationState;
|
||||
navigation: StackNavigationHelpers;
|
||||
descriptors: StackDescriptorMap;
|
||||
onPageChangeStart?: () => void;
|
||||
onPageChangeConfirm?: () => void;
|
||||
onPageChangeCancel?: () => void;
|
||||
};
|
||||
|
||||
type State = {
|
||||
@@ -307,9 +305,7 @@ class StackView extends React.Component<Props, State> {
|
||||
const {
|
||||
state,
|
||||
navigation,
|
||||
onPageChangeStart,
|
||||
onPageChangeConfirm,
|
||||
onPageChangeCancel,
|
||||
keyboardHandlingEnabled,
|
||||
mode = 'card',
|
||||
...rest
|
||||
} = this.props;
|
||||
@@ -328,28 +324,30 @@ class StackView extends React.Component<Props, State> {
|
||||
<SafeAreaProviderCompat>
|
||||
<SafeAreaConsumer>
|
||||
{insets => (
|
||||
<Stack
|
||||
mode={mode}
|
||||
insets={insets as EdgeInsets}
|
||||
getPreviousRoute={this.getPreviousRoute}
|
||||
getGesturesEnabled={this.getGesturesEnabled}
|
||||
routes={routes}
|
||||
openingRouteKeys={openingRouteKeys}
|
||||
closingRouteKeys={closingRouteKeys}
|
||||
onGoBack={this.handleGoBack}
|
||||
onOpenRoute={this.handleOpenRoute}
|
||||
onCloseRoute={this.handleCloseRoute}
|
||||
onPageChangeStart={onPageChangeStart}
|
||||
onPageChangeConfirm={onPageChangeConfirm}
|
||||
onPageChangeCancel={onPageChangeCancel}
|
||||
renderHeader={this.renderHeader}
|
||||
renderScene={this.renderScene}
|
||||
headerMode={headerMode}
|
||||
state={state}
|
||||
navigation={navigation}
|
||||
descriptors={descriptors}
|
||||
{...rest}
|
||||
/>
|
||||
<KeyboardManager enabled={keyboardHandlingEnabled !== false}>
|
||||
{props => (
|
||||
<CardStack
|
||||
mode={mode}
|
||||
insets={insets as EdgeInsets}
|
||||
getPreviousRoute={this.getPreviousRoute}
|
||||
getGesturesEnabled={this.getGesturesEnabled}
|
||||
routes={routes}
|
||||
openingRouteKeys={openingRouteKeys}
|
||||
closingRouteKeys={closingRouteKeys}
|
||||
onGoBack={this.handleGoBack}
|
||||
onOpenRoute={this.handleOpenRoute}
|
||||
onCloseRoute={this.handleCloseRoute}
|
||||
renderHeader={this.renderHeader}
|
||||
renderScene={this.renderScene}
|
||||
headerMode={headerMode}
|
||||
state={state}
|
||||
navigation={navigation}
|
||||
descriptors={descriptors}
|
||||
{...rest}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</KeyboardManager>
|
||||
)}
|
||||
</SafeAreaConsumer>
|
||||
</SafeAreaProviderCompat>
|
||||
|
||||
Reference in New Issue
Block a user