React Native问题：打开键盘后底部标签导航器上移

方案一：监听键盘收起事件，确保返回前布局稳定 #

在无底部标签的页面中，添加键盘收起监听，延迟执行返回操作，让布局完成后再切换页面：

import { Keyboard } from 'react-native';
import { useEffect } from 'react';

// 在页面组件内使用
useEffect(() => {
  const handleKeyboardHide = () => {
    setTimeout(() => {
      navigation.canGoBack() && navigation.goBack();
    }, 100);
  };

  const listener = Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
  return () => listener.remove();
}, [navigation]);

如果使用系统手势返回，也可以通过自定义手势拦截，只在键盘完全收起时允许返回操作。

方案二：强制底部导航栏基于安全区域布局 #

创建底部标签导航时，修改screenOptions的样式配置，固定导航栏位置：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: '#fff',
          borderTopWidth: 1,
          borderTopColor: '#eee',
        },
        keyboardHidesTabBar: false,
      }}
    >
      {/* 你的标签页面组件 */}
    </Tab.Navigator>
  );
}

方案三：临时禁用react-native-screens优化 #

部分版本的react-native-screens与导航库存在布局计算冲突，可在项目入口文件禁用屏幕优化：

import { enableScreens } from 'react-native-screens';

// 禁用屏幕优化以修复布局问题
enableScreens(false);

方案四：升级兼容依赖版本 #

当前使用的依赖版本存在已知布局bug，建议升级到以下兼容版本：

• react-native: 0.72.x最新补丁版本
• react-native-screens: ^3.27.0及以上
• @react-navigation/bottom-tabs: ^6.5.15及以上

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