mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-04 17:28:48 +08:00
Compare commits
4 Commits
@react-nav
...
@react-nav
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
75ed888b33 | ||
|
|
ee82ab1d1b | ||
|
|
301c35ec32 | ||
|
|
22cb675608 |
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.18...@react-navigation/bottom-tabs@5.0.0-alpha.19) (2019-11-04)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* fix default BottomTabBar button ([#161](https://github.com/react-navigation/navigation-ex/issues/161)) ([22cb675](https://github.com/react-navigation/navigation-ex/commit/22cb675))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.17...@react-navigation/bottom-tabs@5.0.0-alpha.18) (2019-11-04)
|
# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.17...@react-navigation/bottom-tabs@5.0.0-alpha.18) (2019-11-04)
|
||||||
|
|
||||||
**Note:** Version bump only for package @react-navigation/bottom-tabs
|
**Note:** Version bump only for package @react-navigation/bottom-tabs
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
"android",
|
"android",
|
||||||
"tab"
|
"tab"
|
||||||
],
|
],
|
||||||
"version": "5.0.0-alpha.18",
|
"version": "5.0.0-alpha.19",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@@ -13,8 +13,7 @@ import { Route, NavigationContext } from '@react-navigation/core';
|
|||||||
import { SafeAreaConsumer } from 'react-native-safe-area-context';
|
import { SafeAreaConsumer } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import TabBarIcon from './TabBarIcon';
|
import TabBarIcon from './TabBarIcon';
|
||||||
import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
|
import { BottomTabBarProps } from '../types';
|
||||||
import { BottomTabBarProps, BottomTabBarButtonProps } from '../types';
|
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
dimensions: { height: number; width: number };
|
dimensions: { height: number; width: number };
|
||||||
@@ -265,9 +264,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
|
|||||||
getAccessibilityLabel,
|
getAccessibilityLabel,
|
||||||
getAccessibilityRole,
|
getAccessibilityRole,
|
||||||
getAccessibilityStates,
|
getAccessibilityStates,
|
||||||
renderButton = (props: BottomTabBarButtonProps) => (
|
renderButton,
|
||||||
<TouchableWithoutFeedbackWrapper {...props} />
|
|
||||||
),
|
|
||||||
getTestID,
|
getTestID,
|
||||||
style,
|
style,
|
||||||
tabStyle,
|
tabStyle,
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {
|
import {
|
||||||
View,
|
View,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
AccessibilityRole,
|
AccessibilityRole,
|
||||||
AccessibilityStates,
|
AccessibilityStates,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import { Route, CommonActions } from '@react-navigation/core';
|
import { Route, CommonActions } from '@react-navigation/core';
|
||||||
import { TabNavigationState } from '@react-navigation/routers';
|
import { TabNavigationState } from '@react-navigation/routers';
|
||||||
// eslint-disable-next-line import/no-unresolved
|
// eslint-disable-next-line import/no-unresolved
|
||||||
@@ -53,6 +55,8 @@ export default class BottomTabView extends React.Component<Props, State> {
|
|||||||
|
|
||||||
private renderButton = ({
|
private renderButton = ({
|
||||||
route,
|
route,
|
||||||
|
children,
|
||||||
|
style,
|
||||||
...rest
|
...rest
|
||||||
}: { route: Route<string> } & BottomTabBarButtonProps) => {
|
}: { route: Route<string> } & BottomTabBarButtonProps) => {
|
||||||
const { descriptors } = this.props;
|
const { descriptors } = this.props;
|
||||||
@@ -60,10 +64,14 @@ export default class BottomTabView extends React.Component<Props, State> {
|
|||||||
const options = descriptor.options;
|
const options = descriptor.options;
|
||||||
|
|
||||||
if (options.tabBarButton) {
|
if (options.tabBarButton) {
|
||||||
return options.tabBarButton(rest);
|
return options.tabBarButton({ children, style, ...rest });
|
||||||
}
|
}
|
||||||
|
|
||||||
return undefined;
|
return (
|
||||||
|
<TouchableWithoutFeedback {...rest}>
|
||||||
|
<View style={style}>{children}</View>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
private renderIcon = ({
|
private renderIcon = ({
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { TouchableWithoutFeedback, View } from 'react-native';
|
|
||||||
|
|
||||||
export default function TouchableWithoutFeedbackWrapper({
|
|
||||||
onPress,
|
|
||||||
onLongPress,
|
|
||||||
testID,
|
|
||||||
accessibilityLabel,
|
|
||||||
accessibilityRole,
|
|
||||||
accessibilityStates,
|
|
||||||
...rest
|
|
||||||
}: React.ComponentProps<typeof TouchableWithoutFeedback> & {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<TouchableWithoutFeedback
|
|
||||||
onPress={onPress}
|
|
||||||
onLongPress={onLongPress}
|
|
||||||
testID={testID}
|
|
||||||
hitSlop={{ left: 15, right: 15, top: 0, bottom: 5 }}
|
|
||||||
accessibilityLabel={accessibilityLabel}
|
|
||||||
accessibilityRole={accessibilityRole}
|
|
||||||
accessibilityStates={accessibilityStates}
|
|
||||||
>
|
|
||||||
<View {...rest} />
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
|
# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
|
||||||
|
|
||||||
**Note:** Version bump only for package @react-navigation/native-stack
|
**Note:** Version bump only for package @react-navigation/native-stack
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
"react-native",
|
"react-native",
|
||||||
"react-navigation"
|
"react-navigation"
|
||||||
],
|
],
|
||||||
"version": "5.0.0-alpha.9",
|
"version": "5.0.0-alpha.10",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@@ -1,10 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
|
import {
|
||||||
|
createNavigator,
|
||||||
|
useNavigationBuilder,
|
||||||
|
EventArg,
|
||||||
|
} from '@react-navigation/core';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
StackRouter,
|
StackRouter,
|
||||||
StackNavigationState,
|
StackNavigationState,
|
||||||
StackRouterOptions,
|
StackRouterOptions,
|
||||||
|
StackActions,
|
||||||
} from '@react-navigation/routers';
|
} from '@react-navigation/routers';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -36,6 +41,28 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
|
|||||||
screenOptions,
|
screenOptions,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
React.useEffect(
|
||||||
|
() =>
|
||||||
|
navigation.addListener &&
|
||||||
|
navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
|
||||||
|
const isFocused = navigation.isFocused();
|
||||||
|
|
||||||
|
// Run the operation in the next frame so we're sure all listeners have been run
|
||||||
|
// This is necessary to know if preventDefault() has been called
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (state.index > 0 && isFocused && !e.defaultPrevented) {
|
||||||
|
// When user taps on already focused tab and we're inside the tab,
|
||||||
|
// reset the stack to replicate native behaviour
|
||||||
|
navigation.dispatch({
|
||||||
|
...StackActions.popToTop(),
|
||||||
|
target: state.key,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
[navigation, state.index, state.key]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StackView
|
<StackView
|
||||||
state={state}
|
state={state}
|
||||||
|
|||||||
Reference in New Issue
Block a user