使用自定义tabBar时tabBarHideOnKeyboard属性不生效如何解决

失效原因 #

tabBarHideOnKeyboard是React Navigation为内置默认底部标签栏提供的专属属性，仅作用于框架自带的TabBar组件。当你传入自定义tabBar函数替换默认组件后，框架不会再对自定义组件注入键盘显隐的控制逻辑，因此该配置默认不生效。

解决方案 #

需要在自定义TabBar组件中手动监听键盘状态，结合配置控制显隐，实现和原生属性一致的效果。

前置准备（Android 端可选） #

如果是Android平台，先确认android/app/src/main/AndroidManifest.xml中主Activity的windowSoftInputMode配置为adjustResize，否则无法正常监听键盘高度变化：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize"
  <!-- 其他配置 -->
/>

基础实现（直接显隐） #

以下是自定义TabBar组件的示例代码：

import { useEffect, useState } from 'react';
import { Keyboard, Platform, View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { useNavigationState } from '@react-navigation/native';

const CustomTabBar = ({ state, descriptors, navigation }) => {
  // 读取当前活跃页面的tabBarHideOnKeyboard配置，和原生属性逻辑对齐
  const currentRoute = state.routes[state.index];
  const currentOptions = descriptors[currentRoute.key].options;
  const enableHideOnKeyboard = currentOptions.tabBarHideOnKeyboard ?? true;

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

  useEffect(() => {
    if (!enableHideOnKeyboard) return;

    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';

    const keyboardShowListener = Keyboard.addListener(showEvent, () => {
      setIsTabBarVisible(false);
    });

    const keyboardHideListener = Keyboard.addListener(hideEvent, () => {
      setIsTabBarVisible(true);
    });

    return () => {
      keyboardShowListener.remove();
      keyboardHideListener.remove();
    };
  }, [enableHideOnKeyboard]);

  // 键盘弹出时直接隐藏tabBar
  if (!isTabBarVisible) return null;

  return (
    <View style={styles.tabBar}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? options.title ?? route.name;
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={styles.tabItem}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    flexDirection: 'row',
    paddingBottom: 20,
    paddingTop: 10,
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default CustomTabBar;

进阶实现（平滑过渡动画） #

如果需要和默认tabBar一致的滑入滑出效果，可以用Animated组件替换直接显隐的逻辑：

// 替换上面的状态声明部分
const [tabBarAnimation] = useState(new Animated.Value(1));

useEffect(() => {
  if (!enableHideOnKeyboard) return;

  const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
  const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
  const animationDuration = Platform.OS === 'ios' ? 250 : 300;

  const keyboardShowListener = Keyboard.addListener(showEvent, () => {
    Animated.timing(tabBarAnimation, {
      toValue: 0,
      duration: animationDuration,
      useNativeDriver: true,
    }).start();
  });

  const keyboardHideListener = Keyboard.addListener(hideEvent, () => {
    Animated.timing(tabBarAnimation, {
      toValue: 1,
      duration: animationDuration,
      useNativeDriver: true,
    }).start();
  });

  return () => {
    keyboardShowListener.remove();
    keyboardHideListener.remove();
  };
}, [enableHideOnKeyboard, tabBarAnimation]);

// 替换返回的根组件样式
return (
  <Animated.View
    style={[
      styles.tabBar,
      {
        transform: [
          {
            translateY: tabBarAnimation.interpolate({
              inputRange: [0, 1],
              outputRange: [100, 0], // 100为你的tabBar总高度，按需修改
            }),
          },
        ],
        opacity: tabBarAnimation,
      },
    ]}
  >
    {/* 原有tabBar内容 */}
  </Animated.View>
);

内容的提问来源于stack exchange，提问作者Adeel Yousaf