mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-12 22:51:18 +08:00
fix: remove tabBarAdapative option
This commit is contained in:
@@ -54,8 +54,13 @@ function BottomTabNavigator({
|
||||
tabBarLabelStyle: tabBarOptions.labelStyle,
|
||||
tabBarIconStyle: tabBarOptions.iconStyle,
|
||||
tabBarItemStyle: tabBarOptions.tabStyle,
|
||||
tabBarLabelPosition: tabBarOptions.labelPosition,
|
||||
tabBarAdaptive: tabBarOptions.adaptive,
|
||||
tabBarLabelPosition:
|
||||
tabBarOptions.labelPosition ??
|
||||
(tabBarOptions.adaptive === false ? 'below-icon' : undefined),
|
||||
tabBarStyle: [
|
||||
{ display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
|
||||
defaultScreenOptions.tabBarStyle,
|
||||
],
|
||||
});
|
||||
|
||||
warnOnce(
|
||||
|
||||
@@ -86,23 +86,6 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
||||
*/
|
||||
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
|
||||
* 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;
|
||||
}) => 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.
|
||||
*/
|
||||
@@ -126,6 +134,11 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
||||
size: number;
|
||||
}) => React.ReactNode;
|
||||
|
||||
/**
|
||||
* Style object for the tab icon.
|
||||
*/
|
||||
tabBarIconStyle?: StyleProp<TextStyle>;
|
||||
|
||||
/**
|
||||
* Text to show in a badge on the tab icon.
|
||||
*/
|
||||
@@ -148,17 +161,9 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
||||
*/
|
||||
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.
|
||||
* Renders `TouchableWithoutFeedback` by default.
|
||||
* Renders `Pressable` by default.
|
||||
*/
|
||||
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
|
||||
|
||||
@@ -178,59 +183,35 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
||||
tabBarActiveBackgroundColor?: string;
|
||||
|
||||
/**
|
||||
* background color for the inactive tabs.
|
||||
* Background color for the inactive tabs.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
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`.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
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.
|
||||
*
|
||||
* When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
|
||||
@@ -238,6 +219,23 @@ export type BottomTabNavigationOptions = HeaderOptions & {
|
||||
*/
|
||||
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.
|
||||
* Defaults to `false`.
|
||||
|
||||
@@ -48,15 +48,16 @@ const shouldUseHorizontalLabels = ({
|
||||
layout,
|
||||
dimensions,
|
||||
}: Options) => {
|
||||
const { tabBarLabelPosition, tabBarAdaptive = true } =
|
||||
const { tabBarLabelPosition } =
|
||||
descriptors[state.routes[state.index].key].options;
|
||||
|
||||
if (tabBarLabelPosition) {
|
||||
return tabBarLabelPosition === 'beside-icon';
|
||||
}
|
||||
|
||||
if (!tabBarAdaptive) {
|
||||
return false;
|
||||
switch (tabBarLabelPosition) {
|
||||
case 'beside-icon':
|
||||
return true;
|
||||
case 'below-icon':
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (layout.width >= 768) {
|
||||
|
||||
Reference in New Issue
Block a user