React Native底部TabBar被键盘顶起的适配问题求助

我之前也碰到过和你一模一样的场景：全局需要adjustResize来适配聊天页面，但搜索页面唤起键盘时TabBar总被顶上去。下面几个方案亲测有效，你可以试试：

方案1：自定义绝对定位的TabBar #

你之前尝试自定义TabBarComponent没达到预期，大概率是样式配置没到位。核心思路是把TabBar设为绝对定位固定在底部，同时给所有页面的根容器添加底部内边距，避免内容被TabBar遮挡。

步骤1：编写自定义TabBar组件 #

import { View, TouchableOpacity, Image, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const CustomTabBar = ({ navigation, state }) => {
  // 定义底部导航的tab项，根据你的实际图标调整
  const tabItems = [
    { name: 'Followers', icon: require('./assets/icons/followers.png') },
    { name: 'Search', icon: require('./assets/icons/search.png') },
    { name: 'Home', icon: require('./assets/icons/home.png') },
    { name: 'Bookmarks', icon: require('./assets/icons/bookmarks.png') },
    { name: 'Profile', icon: require('./assets/icons/profile.png') },
  ];

  return (
    <View style={styles.tabBarContainer}>
      {tabItems.map((item) => {
        const isActive = state.routeNames[state.index] === item.name;
        return (
          <TouchableOpacity
            key={item.name}
            onPress={() => navigation.navigate(item.name)}
            style={styles.tabItem}
          >
            <Image
              source={item.icon}
              tintColor={isActive ? 'red' : 'gray'}
              style={styles.tabIcon}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBarContainer: {
    position: 'absolute', // 关键：绝对定位锁死在底部
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#F9F8FB',
    height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
    paddingTop: DeviceInfo.hasNotch() ? '5%' : 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    elevation: 8, // 加个阴影，避免被页面内容覆盖
  },
  tabItem: {
    alignItems: 'center',
  },
  tabIcon: {
    width: 24,
    height: 24,
  },
});

export default CustomTabBar;

步骤2：修改TabNavigator配置 #

把默认TabBar替换成自定义组件，同时给每个页面添加底部内边距：

const SignedIn = createBottomTabNavigator(
  {
    Followers: { 
      screen: () => <FollowerStack style={{ paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT }} />,
    },
    Search: { 
      screen: () => <SearchStack style={{ paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT }} />,
    },
    Home: { 
      screen: () => <HomeStack style={{ paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT }} />,
    },
    Bookmarks: { 
      screen: () => <BookmarkStack style={{ paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT }} />,
    },
    Profile: { 
      screen: () => <ProfileStack style={{ paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT }} />,
    }
  },
  {
    initialRouteName: "Home",
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarComponent: CustomTabBar, // 启用自定义TabBar
    // 移除keyboardHidesTabBar，因为我们要TabBar始终显示
  }
);

这样设置后，TabBar会一直固定在屏幕底部，键盘弹出时也不会被顶起，页面内容因为加了底部内边距，也不会被TabBar挡住。

方案2：动态修改单个页面的windowSoftInputMode #

你之前用react-native-android-keyboard-adjust没生效，可能是没在正确的生命周期里调用方法。这个方案可以让搜索页面单独使用adjustPan，其他页面保持adjustResize。

步骤1：安装并链接组件 #

npm install react-native-android-keyboard-adjust --save
react-native link react-native-android-keyboard-adjust

步骤2：在Search页面中动态切换模式 #

import KeyboardAdjust from 'react-native-android-keyboard-adjust';
import { useEffect } from 'react';

const SearchScreen = () => {
  useEffect(() => {
    // 进入搜索页面时，设置键盘模式为adjustPan
    KeyboardAdjust.setAdjustPan();

    // 离开页面时，恢复为adjustResize，保证聊天页面正常
    return () => {
      KeyboardAdjust.setAdjustResize();
    };
  }, []);

  return (
    // 你的搜索页面布局，包含搜索栏等内容
    <View style={{ flex: 1 }}>
      {/* 搜索栏 */}
      {/* 其他内容 */}
    </View>
  );
};

这个方法完全不会影响全局配置，只针对搜索页面生效，完美适配你的场景。

方案3：用KeyboardAvoidingView包裹搜索页面 #

如果上面两个方案都不适用，可以试试用KeyboardAvoidingView调整搜索页面的内容布局，让内容随键盘上移，但TabBar保持固定：

import { KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';

const SearchScreen = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      keyboardVerticalOffset={TAB_NAVIGATOR_DYNAMIC_HEIGHT} // 偏移量等于TabBar高度
    >
      {/* 搜索栏 */}
      {/* 页面内容 */}
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: TAB_NAVIGATOR_DYNAMIC_HEIGHT, // 同样需要加底部内边距
  },
});

这个方案在iOS和Android上都能生效，键盘弹出时页面内容会向上移动，但TabBar因为是绝对定位（来自方案1）会留在底部。

最后提醒一下：你之前配置的keyboardHidesTabBar: true是让键盘弹出时隐藏TabBar，如果你需要TabBar始终显示，一定要把这个属性去掉，这可能是你之前自定义TabBar没生效的原因之一。

内容的提问来源于stack exchange，提问作者Dhevendhiran M