mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-30 05:15:25 +08:00
fix: remove tabBarAdapative option
This commit is contained in:
@@ -54,8 +54,13 @@ function BottomTabNavigator({
|
|||||||
tabBarLabelStyle: tabBarOptions.labelStyle,
|
tabBarLabelStyle: tabBarOptions.labelStyle,
|
||||||
tabBarIconStyle: tabBarOptions.iconStyle,
|
tabBarIconStyle: tabBarOptions.iconStyle,
|
||||||
tabBarItemStyle: tabBarOptions.tabStyle,
|
tabBarItemStyle: tabBarOptions.tabStyle,
|
||||||
tabBarLabelPosition: tabBarOptions.labelPosition,
|
tabBarLabelPosition:
|
||||||
tabBarAdaptive: tabBarOptions.adaptive,
|
tabBarOptions.labelPosition ??
|
||||||
|
(tabBarOptions.adaptive === false ? 'below-icon' : undefined),
|
||||||
|
tabBarStyle: [
|
||||||
|
{ display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
|
||||||
|
defaultScreenOptions.tabBarStyle,
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
warnOnce(
|
warnOnce(
|
||||||
|
|||||||
@@ -86,23 +86,6 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
*/
|
*/
|
||||||
title?: string;
|
title?: string;
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether this screens should render the first time it's accessed. Defaults to `true`.
|
|
||||||
* Set it to `false` if you want to render the screen on initial render.
|
|
||||||
*/
|
|
||||||
lazy?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function that given returns a React Element to display as a header.
|
|
||||||
*/
|
|
||||||
header?: (props: BottomTabHeaderProps) => React.ReactNode;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether to show the header. Setting this to `false` hides the header.
|
|
||||||
* Defaults to `true`.
|
|
||||||
*/
|
|
||||||
headerShown?: boolean;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Title string of a tab displayed in the tab bar
|
* Title string of a tab displayed in the tab bar
|
||||||
* or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
|
* or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
|
||||||
@@ -117,6 +100,31 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
position: LabelPosition;
|
position: LabelPosition;
|
||||||
}) => React.ReactNode);
|
}) => React.ReactNode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the tab label should be visible. Defaults to `true`.
|
||||||
|
*/
|
||||||
|
tabBarShowLabel?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the label is shown below the icon or beside the icon.
|
||||||
|
*
|
||||||
|
* - `below-icon`: the label is shown below the icon (typical for iPhones)
|
||||||
|
* - `beside-icon` the label is shown next to the icon (typical for iPad)
|
||||||
|
*
|
||||||
|
* By default, the position is chosen automatically based on device width.
|
||||||
|
*/
|
||||||
|
tabBarLabelPosition?: LabelPosition;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style object for the tab label.
|
||||||
|
*/
|
||||||
|
tabBarLabelStyle?: StyleProp<TextStyle>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether label font should scale to respect Text Size accessibility settings.
|
||||||
|
*/
|
||||||
|
tabBarAllowFontScaling?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
|
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
|
||||||
*/
|
*/
|
||||||
@@ -126,6 +134,11 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
size: number;
|
size: number;
|
||||||
}) => React.ReactNode;
|
}) => React.ReactNode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style object for the tab icon.
|
||||||
|
*/
|
||||||
|
tabBarIconStyle?: StyleProp<TextStyle>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Text to show in a badge on the tab icon.
|
* Text to show in a badge on the tab icon.
|
||||||
*/
|
*/
|
||||||
@@ -148,17 +161,9 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
*/
|
*/
|
||||||
tabBarTestID?: string;
|
tabBarTestID?: string;
|
||||||
|
|
||||||
/**
|
|
||||||
* Animation config for showing and hiding the tab bar.
|
|
||||||
*/
|
|
||||||
tabBarVisibilityAnimationConfig?: {
|
|
||||||
show?: TabBarVisibilityAnimationConfig;
|
|
||||||
hide?: TabBarVisibilityAnimationConfig;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function which returns a React element to render as the tab bar button.
|
* Function which returns a React element to render as the tab bar button.
|
||||||
* Renders `TouchableWithoutFeedback` by default.
|
* Renders `Pressable` by default.
|
||||||
*/
|
*/
|
||||||
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
|
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
|
||||||
|
|
||||||
@@ -178,59 +183,35 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
tabBarActiveBackgroundColor?: string;
|
tabBarActiveBackgroundColor?: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* background color for the inactive tabs.
|
* Background color for the inactive tabs.
|
||||||
*/
|
*/
|
||||||
tabBarInactiveBackgroundColor?: string;
|
tabBarInactiveBackgroundColor?: string;
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether label font should scale to respect Text Size accessibility settings.
|
|
||||||
*/
|
|
||||||
tabBarAllowFontScaling?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the tab label should be visible. Defaults to `true`.
|
|
||||||
*/
|
|
||||||
tabBarShowLabel?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style object for the tab label.
|
|
||||||
*/
|
|
||||||
tabBarLabelStyle?: StyleProp<TextStyle>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style object for the tab icon.
|
|
||||||
*/
|
|
||||||
tabBarIconStyle?: StyleProp<TextStyle>;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Style object for the tab item container.
|
* Style object for the tab item container.
|
||||||
*/
|
*/
|
||||||
tabBarItemStyle?: StyleProp<ViewStyle>;
|
tabBarItemStyle?: StyleProp<ViewStyle>;
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the label is rendered below the icon or beside the icon.
|
|
||||||
* By default, the position is chosen automatically based on device width.
|
|
||||||
* In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
|
|
||||||
*/
|
|
||||||
tabBarLabelPosition?: LabelPosition;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the label position should adapt to the orientation.
|
|
||||||
*/
|
|
||||||
tabBarAdaptive?: boolean;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
|
* Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
|
||||||
*/
|
*/
|
||||||
tabBarHideOnKeyboard?: boolean;
|
tabBarHideOnKeyboard?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
|
||||||
|
*/
|
||||||
|
tabBarVisibilityAnimationConfig?: {
|
||||||
|
show?: TabBarVisibilityAnimationConfig;
|
||||||
|
hide?: TabBarVisibilityAnimationConfig;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Style object for the tab bar container.
|
* Style object for the tab bar container.
|
||||||
*/
|
*/
|
||||||
tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component to use as background for the tab bar.
|
* Function which returns a React Element to use as background for the tab bar.
|
||||||
* You could render an image, a gradient, blur view etc.
|
* You could render an image, a gradient, blur view etc.
|
||||||
*
|
*
|
||||||
* When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
|
* When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
|
||||||
@@ -238,6 +219,23 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
|||||||
*/
|
*/
|
||||||
tabBarBackground?: () => React.ReactNode;
|
tabBarBackground?: () => React.ReactNode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether this screens should render the first time it's accessed. Defaults to `true`.
|
||||||
|
* Set it to `false` if you want to render the screen on initial render.
|
||||||
|
*/
|
||||||
|
lazy?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function that given returns a React Element to display as a header.
|
||||||
|
*/
|
||||||
|
header?: (props: BottomTabHeaderProps) => React.ReactNode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to show the header. Setting this to `false` hides the header.
|
||||||
|
* Defaults to `true`.
|
||||||
|
*/
|
||||||
|
headerShown?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether this screen should be unmounted when navigating away from it.
|
* Whether this screen should be unmounted when navigating away from it.
|
||||||
* Defaults to `false`.
|
* Defaults to `false`.
|
||||||
|
|||||||
@@ -48,15 +48,16 @@ const shouldUseHorizontalLabels = ({
|
|||||||
layout,
|
layout,
|
||||||
dimensions,
|
dimensions,
|
||||||
}: Options) => {
|
}: Options) => {
|
||||||
const { tabBarLabelPosition, tabBarAdaptive = true } =
|
const { tabBarLabelPosition } =
|
||||||
descriptors[state.routes[state.index].key].options;
|
descriptors[state.routes[state.index].key].options;
|
||||||
|
|
||||||
if (tabBarLabelPosition) {
|
if (tabBarLabelPosition) {
|
||||||
return tabBarLabelPosition === 'beside-icon';
|
switch (tabBarLabelPosition) {
|
||||||
}
|
case 'beside-icon':
|
||||||
|
return true;
|
||||||
if (!tabBarAdaptive) {
|
case 'below-icon':
|
||||||
return false;
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (layout.width >= 768) {
|
if (layout.width >= 768) {
|
||||||
|
|||||||
Reference in New Issue
Block a user