React Native：键盘弹出时如何隐藏UI-Kitten底部标签栏？

原因说明 #

你使用的tabBarOptions={{ keyboardHidesTabBar: true }}是React Navigation默认底部标签栏的配置项，但UI-Kitten的BottomNavigation是独立的自定义组件，并不支持该属性，所以无法生效。需要通过监听键盘事件手动控制标签栏的显示与隐藏。

解决方案 #

方案1：直接使用UI-Kitten BottomNavigation组件时的实现 #

通过React Native的Keyboard模块监听键盘弹出/收起事件，配合状态管理控制标签栏的可见性：

import React, { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';

const CustomBottomNav = () => {
  const [isTabBarVisible, setIsTabBarVisible] = useState(true);

  useEffect(() => {
    // 监听键盘弹出事件，隐藏标签栏
    const keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setIsTabBarVisible(false);
    });
    // 监听键盘收起事件，显示标签栏
    const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setIsTabBarVisible(true);
    });

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      keyboardShowListener.remove();
      keyboardHideListener.remove();
    };
  }, []);

  // 根据状态决定是否渲染标签栏
  return isTabBarVisible ? (
    <BottomNavigation>
      <BottomNavigationTab title="首页" />
      <BottomNavigationTab title="我的" />
    </BottomNavigation>
  ) : null;
};

export default CustomBottomNav;

方案2：结合React Navigation使用自定义UI-Kitten TabBar时的实现 #

如果是将UI-Kitten的BottomNavigation作为React Navigation的自定义tabBar，需要在自定义tabBar组件中实现键盘监听逻辑：

import React, { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';

const Tab = createBottomTabNavigator();

// 自定义UI-Kitten标签栏组件
const UIKittenTabBar = ({ state, navigation }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const showSub = Keyboard.addListener('keyboardDidShow', () => setIsVisible(false));
    const hideSub = Keyboard.addListener('keyboardDidHide', () => setIsVisible(true));

    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);

  if (!isVisible) return null;

  return (
    <BottomNavigation
      selectedIndex={state.index}
      onSelect={(index) => navigation.navigate(state.routeNames[index])}
    >
      {state.routes.map((route) => (
        <BottomNavigationTab key={route.key} title={route.name} />
      ))}
    </BottomNavigation>
  );
};

// 导航器配置
const AppTabNavigator = () => (
  <Tab.Navigator tabBar={(props) => <UIKittenTabBar {...props} />}>
    {/* 这里添加你的页面组件 */}
    {/* <Tab.Screen name="Home" component={HomeScreen} /> */}
    {/* <Tab.Screen name="Profile" component={ProfileScreen} /> */}
  </Tab.Navigator>
);

export default AppTabNavigator;

可选优化 #

如果需要更平滑的过渡效果，可以结合React Native的Animated组件，实现标签栏滑入滑出的动画，提升用户体验。

内容的提问来源于stack exchange，提问作者olighta-dog