Question

我试图在不使用tabBarVisible的情况下隐藏某些屏幕上的底部标签，因为它在iOS上增加了跳跃的行为。我正在尝试通过EXPO的React Navigation 5实现这一目标。

我需要更改以下设置：

import React from 'react';
import Colors from '../constants/Colors';

import SearchScreen, { searchScreenOptions } from '../screens/SearchScreen';
import PropertyDetailScreen, { propertyDetialsScreenOptions } from '../screens/PropertyDetailScreen';
import FavoriteScreen, { favoriteScreenOptions } from '../screens/FavoriteScreen';
import NotificationScreen, { notificationScreenOptions } from '../screens/NotificationScreen';
import ProfileScreen, { profileScreenOptions } from '../screens/ProfileScreen';
import MyPropertiesScreen, { myPropertiesScreenOptions } from '../screens/MyPropertiesScreen';
import SettingScreen, { settingScreenOptions } from '../screens/SettingScreen';
import FeedbackScreen, { feedbackScreenOptions } from '../screens/FeedbackScreen';
import AuthScreen, { authScreenOptions } from '../screens/AuthScreen';

import { Ionicons } from '@expo/vector-icons'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import IconWithBadge from '../components/BadgeCount';

const PropertyStackNavigator = createStackNavigator();
const FavoriteStackNavigator = createStackNavigator();
const NotificationStackNavigator = createStackNavigator();
const ProfileStackNavigator = createStackNavigator();
const PropertyTabNavigator = createBottomTabNavigator();

const defaultNavigationOptions = {
    headerStyle: {
        backgroundColor: '#fff'
    },
    headerTintColor: '#333'
}

const PropertyNavigator = () => {
    return <PropertyStackNavigator.Navigator screenOptions={defaultNavigationOptions}>
        <PropertyStackNavigator.Screen name="Search" component={SearchScreen} options={searchScreenOptions} />
        <PropertyStackNavigator.Screen name="PropertyDetail" component={PropertyDetailScreen} options={propertyDetialsScreenOptions} />
    </PropertyStackNavigator.Navigator>
}

const FavoriteNavigator = () => {
    return <FavoriteStackNavigator.Navigator screenOptions={defaultNavigationOptions}>
        <FavoriteStackNavigator.Screen name="Favorite" component={FavoriteScreen} options={favoriteScreenOptions} />
        <FavoriteStackNavigator.Screen name="PropertyDetail" component={PropertyDetailScreen} options={propertyDetialsScreenOptions} />
    </FavoriteStackNavigator.Navigator>
}

const NotificationNavigator = () => {
    return <NotificationStackNavigator.Navigator screenOptions={defaultNavigationOptions}>
        <NotificationStackNavigator.Screen name="Notification" component={NotificationScreen} options={notificationScreenOptions} />
    </NotificationStackNavigator.Navigator>
}

const ProfileNavigator = () => {
    return <ProfileStackNavigator.Navigator screenOptions={defaultNavigationOptions}>
        <ProfileStackNavigator.Screen name="Profile" component={ProfileScreen} options={profileScreenOptions} />
        <ProfileStackNavigator.Screen name="Feedback" component={FeedbackScreen} options={feedbackScreenOptions} />
        <ProfileStackNavigator.Screen name="MyProperty" component={MyPropertiesScreen} options={myPropertiesScreenOptions} />
        <ProfileStackNavigator.Screen name="Auth" component={AuthScreen} options={authScreenOptions} />
        <ProfileStackNavigator.Screen name="Settings" component={SettingScreen} options={settingScreenOptions} />
    </ProfileStackNavigator.Navigator>
}

const propertyTabNavigatorOptions = {
    tabBarLabel: 'Keresés',
    tabBarColor: '#3797dd'
}

const favoriteTabNavigatorOptions = {
    tabBarLabel: 'Kedvencek',
    tabBarColor: '#3797dd'
}

const notificationTabNavigatorOptions = {
    tabBarLabel: 'Értesítések',
    tabBarColor: '#3797dd'
}

const profileTabNavigatorOptions = {
    tabBarLabel: 'Profil',
    tabBarColor: '#3797dd'
}

const tabBarOptions = {
    activeTintColor: Colors.white,
    inactiveTintColor: Colors.white,
    showIcon: true,
    style: {height: 55},
    inactiveBackgroundColor: Colors.primary,
    activeBackgroundColor: Colors.primary
}

const tabBarScreenOptions = ({ route }) => ({
    tabBarIcon: ({ focused, color }) => {
        let iconName;
        let size;
        focused ? size = 28 : size = 25;

        if (route.name === 'Search') {
            iconName = focused ? 'ios-search' : 'ios-search';
        } else if (route.name === 'Favorite') {
            iconName = focused ? 'ios-heart-empty' : 'ios-heart-empty';
        } else if (route.name === 'Notification') {
            iconName = focused ? 'ios-mail' : 'ios-mail';
        } else if (route.name === 'Profile') {
            iconName = focused ? 'ios-contact' : 'ios-contact';
        }

        if (route.name === 'Notification') {
            return <IconWithBadge name={iconName} badgeCount={3} color={color} size={size}/>
        } else {
            return <Ionicons name={iconName} size={size} color={color} />;
        }
    },
})

const TabNavigator = () => {
    return <NavigationContainer>
        <PropertyTabNavigator.Navigator initialRouteName="Search" tabBarOptions={tabBarOptions} screenOptions={tabBarScreenOptions}>
            <PropertyTabNavigator.Screen name="Search" component={PropertyNavigator} screenOptions={propertyTabNavigatorOptions} />
            <PropertyTabNavigator.Screen name="Favorite" component={FavoriteNavigator} screenOptions={favoriteTabNavigatorOptions} />
            <PropertyTabNavigator.Screen name="Notification" component={NotificationNavigator} screenOptions={notificationTabNavigatorOptions} />
            <PropertyTabNavigator.Screen name="Profile" component={ProfileNavigator} screenOptions={profileTabNavigatorOptions} />
        </PropertyTabNavigator.Navigator>
    </NavigationContainer>
}

export default TabNavigator;

我要实现的功能是在以下屏幕上显示：PropertyDetailScreen，FeedbackScreen，MyPropertyScreen，AuthScreen，Settings屏幕，我想隐藏底部的标签。

我试图将TabNavigator嵌套到堆栈中，但是整个应用程序冻结了。我在docs中找到了一个解释，但这仅覆盖了一个堆栈。我试图将给定的想法实现为多个堆栈，但正如我提到的那样，整个应用程序都冻结了。

如果有人可以照亮灯塔，我想念的东西将大为赞赏。

谢谢，特里克斯

Answer 1

尝试一下。

const tabBarOptions = (route) {
  activeTintColor: Colors.white,
  inactiveTintColor: Colors.white,
  showIcon: true,
  style: {height: 55},
  inactiveBackgroundColor: Colors.primary,
  activeBackgroundColor: Colors.primary,
  tabBarVisible: getTabBarVisible(route),
}

const getTabBarVisible = route => {
  if (route.state?.index === 1) {
   return false;
  }
  return true;
};

在不使用tabBar的情况下隐藏底部选项卡

1 个答案: