当输入框聚焦触发软键盘时，绝对定位的自定义底部 TabBar 会随屏幕内容上移；本文介绍两种稳定方案：使用 tabBarHideOnKeyboard 自动隐藏 TabBar，或通过原生配置 android:windowSoftInputMode="adjustPan" 控制 Android 键盘行为。
当输入框聚焦触发软键盘时，绝对定位的自定义底部 tabbar 会随屏幕内容上移；本文介绍两种稳定方案：使用 `tabbarhideonkeyboard` 自动隐藏 tabbar，或通过原生配置 `android:windowsoftinputmode="adjustpan"` 控制 android 键盘行为。
在 React Native 应用中，为实现固定于屏幕底部的自定义 TabBar（通常采用 position: 'absolute' + bottom: 0），开发者常忽略软键盘对布局的干扰——尤其在 Android 平台上，系统默认的 adjustResize 模式会压缩可滚动区域并推动绝对定位元素上移，导致 TabBar 意外浮起，破坏 UI 一致性。
✅ 推荐方案一：使用 tabBarHideOnKeyboard（React Navigation v6.10+）
这是最轻量、跨平台且声明式的解决方案。只需在 Tab.Navigator 的 screenOptions 中启用该属性，导航库会在键盘弹出时自动隐藏 TabBar，收起时恢复显示，无需监听事件或手动控制状态：
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabNavigator() {
return (
<tab.navigator screenoptions="{{" tabbarhideonkeyboard: true headershown: false><tab.screen name="Home" component="{HomeScreen}"></tab.screen><tab.screen name="Search" component="{SearchScreen}"></tab.screen><tab.screen name="Profile" component="{ProfileScreen}"></tab.screen></tab.navigator>
);
}
⚠️ 注意：该选项仅适用于 @react-navigation/bottom-tabs v6.10 及以上版本；若使用自定义 TabBar 组件（非 createBottomTabNavigator 默认栏），需确保其被正确包裹在 Tab.Navigator 内，并未通过 tabBar 属性完全覆盖默认行为。
? 备选方案二：原生层配置 android:windowSoftInputMode（Android 专用）
若项目需完全禁用键盘对视图的挤压（例如保留 TabBar 始终可见，同时让 TextInput 浮层覆盖或滚动适配），可修改 Android 原生配置。在 android/app/src/main/AndroidManifest.xml 中定位 <activity></activity> 标签，将 android:windowSoftInputMode 改为 "adjustPan"：
<activity android:name=".MainActivity" android:label="@string/app_name" android:configchanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:windowsoftinputmode="adjustPan" adjustresize> android:exported="true"></activity>
? 修改后必须重新编译并安装 APK（npx react-native run-android 或 Android Studio 构建），热重载无效。adjustPan 模式会使当前 Activity 整体平移，而非重绘布局，因此绝对定位的 TabBar 将保持在屏幕物理底部，而 TextInput 会随光标“滑入”可视区——适合 TabBar 不可隐藏的场景，但需注意可能遮挡输入框，建议配合 ScrollView 或 KeyboardAvoidingView 使用。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
? 最佳实践建议
- 优先采用
tabBarHideOnKeyboard：语义清晰、维护成本低、兼容 iOS/Android； - 若必须保持 TabBar 始终可见，请结合
KeyboardAvoidingView+Platform.select对 iOS/Android 分别处理，并测试不同机型键盘高度； - 避免在
TextInput外层滥用position: 'absolute'，易加剧布局冲突； - iOS 上无
windowSoftInputMode，默认行为更接近adjustPan，通常无需额外配置。
通过上述任一方式，即可彻底解决底部 TabBar 被键盘顶起的问题，保障用户在搜索等高频交互场景下的视觉稳定性与操作连贯性。
